About the Team Showcase Widget
Zyff's team showcase widget builds a meet-the-team section for any website, free. Add each person with a photo, a role and a short bio, then choose photo cards, round portraits, wide rows for longer bios, or a carousel for a large team. Email and profile links are optional per person. Zyff does not host the photos — you paste URLs from wherever they already live — and the output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add a team section to your website
Add your people
Give each person a name, a role and a short bio, and paste a photo URL. Anyone without a photo shows their initials on a tinted circle rather than a broken image.
Pick a layout
Photo cards are the familiar team-page shape, round portraits are compact and friendly, rows put the photo beside the text for longer bios, and the carousel pages through a large team.
Choose what to show
Turn roles, bios, email links and profile links on or off for the whole widget, so you are not deciding it person by person.
Copy the embed code
Paste the container div and script tag where the team should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the Team Showcase Widget does
Four layouts for four situations
Photo cards for a standard team page, round portraits when the team is large and the bios are short, rows when the bios are long, and a carousel when the space is small.
Never a broken headshot
Someone without a photo yet renders their initials on a tinted circle. A team page assembled over a fortnight looks deliberate the whole time rather than half-finished.
Bios that stay optional
Roles, bios, email links and profile links are toggled for the whole widget, so a change of mind is one switch rather than an edit per person.
Photos stay yours
Zyff does not host or store the images. The widget loads each photo from its own URL, so replacing the file there updates it everywhere the widget is embedded.
Reads properly on a phone
The grid drops to two columns below 900px and one below 560px, and the row layout stacks, so a five-column team never forces a customer's page to scroll sideways.
Nothing to slow your page
The widget runs in the visitor's browser from the settings in your snippet, makes no request to Zyff when your page loads, and can wait until it is scrolled near.
At a glance
| People | Up to 40, each with name, role, photo, bio, email and a profile link |
|---|---|
| Layouts | 4 templates: photo cards, round portraits, rows, carousel |
| Columns | 1 to 5, dropping to 2 below 900px and 1 below 560px |
| Bio length | Up to 400 characters per person |
| Photo hosting | None — the widget loads your images from their own URLs |
| Styling | Light or dark, 4 hex colors, 6 fonts, radius 0-32px |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add a meet-the-team section to my website?
Add each person in Zyff's builder with a name, role, photo URL and short bio, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.
Does Zyff store my team's photos?
No. You paste a URL for each photo and the widget loads it from there, so the images stay wherever you already keep them and Zyff never holds pictures of your staff. Replacing the file at that URL updates the photo everywhere the widget is embedded.
What size should team photos be?
Square, and at least 400px on each side. A square crop is the only one that looks right in every layout here, because the round-portrait template crops to a circle and a portrait-orientation photo loses the top of someone's head when it does.
What happens if someone has no photo yet?
Their initials are shown on a tinted circle in your accent colour. That is deliberate: a team page is usually assembled over days as people send their headshots in, and a broken-image icon on a live page for a week is worse than a neat placeholder.
Can I show email addresses for each person?
Yes, as an optional mailto link per person. Bear in mind it is a plain email address in the page, visible to address harvesters exactly as it would be anywhere else on your site — the widget does not obfuscate it, and pretending otherwise would be worse than saying so.
Which layout should I use for a large team?
Round portraits if the bios are short, because they pack four or five to a row without looking crowded. The carousel if the section has to stay a fixed height. Rows are the wrong choice above about eight people — the section gets very long.
Does the team widget work on mobile?
Yes, and you can check it before publishing, because the builder's preview has a 390px mobile view alongside the desktop one. The grid drops to two columns below 900px and one below 560px, and the row layout stacks the photo above the text.
Where do I paste the team embed code?
Wherever the team should appear — an about page, a contact page, or partway down a home page. Put the container div in that spot and keep the script tag with it.
Is the team showcase widget really free?
Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Team widget by Zyff" link, which is how the tool stays free. Photo cards and round portraits are both free, and there is no limit on people below 40. An optional account saves a widget so you can edit it later, and a paid plan adds the rows and carousel layouts, full colour control and removes the attribution link.