Webflow CMS templates
Webflow CMS Collection Testimonial Widgets
A static Webflow page takes one pasted embed. A Collection template is different: the same layout renders every service, location or product in the Collection, so a hard coded widget id would show identical proof on all of them. Store each item’s StoryProof widget id in a Collection field, bind that field inside one Code Embed, and every template page draws its own widget.
- A Plain text field that stores each widget id
- One bound Code Embed in the Collection template
- Hide the slot when an item has no widget yet
Collection template code
The three pieces for a per item widget
Type any widget id to see the shape. In Webflow the id in the first block is not typed at all: you replace it with the bound Collection field, so each item supplies its own.
Part 1 · Code Embed inside the Collection template (bind the field where the id sits)
Collection page template > Add panel > Code Embed
<!-- In the Webflow code editor, delete the id below, keep the cursor between the quotes and insert the Plain text field "StoryProof widget id" -->
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>Part 2 · Script, once, in the template’s page settings
Collection template page settings > Custom code > Before </body> tag
<script src="https://app.storyproof.io/embed.js" async></script>Part 3 · Value to store on each Collection item
CMS > your Collection > item > StoryProof widget id
YOUR_WIDGET_IDPublish, then open two different item pages on the webflow.io address or your domain. View the source of each: the div should carry a different widget id on each page, and embed.js should appear once.
The code is built in your browser. The id you type is not stored or sent.
The problem, solved
What goes wrong with widgets in Webflow Collections
- Problem 1
Every service page shows the same quotes
A widget pasted into the template with a fixed id renders on all items, so the plumbing page and the roofing page praise the same job.
How StoryProof solves it
Make one StoryProof widget per item and choose its testimonials there. The bound field gives each template page the id that belongs to it.
- Problem 2
Sorting testimonials by item takes forever
With dozens of Collection items, picking the right quotes for each widget turns into scrolling through one long list.
How StoryProof solves it
Tag each approved testimonial with the item it is about, on any plan, then filter by that tag when you fill the item’s widget.
- Problem 3
New items render an empty widget box
An item added before its testimonials exist would print a div with no id, leaving a blank gap in the layout.
How StoryProof solves it
Add a Webflow visibility condition so the embed shows only when the field is set. The two line embed then appears only on items that have a widget.
- Problem 4
A Collection list repeats the script per card
Put the whole snippet inside a Collection list item and embed.js is printed once for every card on the page.
How StoryProof solves it
Keep only the div in the list item and load the script once in page settings. One copy fills every StoryProof div on that page.
- Problem 5
More items than our widget allowance
A widget per item is easy to set up for ten locations and harder for two hundred products.
How StoryProof solves it
Check the allowance first: widgets per workspace differ by plan, and the badge stays until Pro. Group items that share proof onto one widget id when you run short.
In StoryProof
Wire it into the Collection template
Webflow’s help docs describe the field binding; these steps apply it to the StoryProof div.
Step 1 of 5
Add a Plain text field to the Collection
In the Collection settings, add a Plain text field and name it StoryProof widget id. Leave it optional so items without proof can still publish.
Step 2 of 5
Paste each widget id into its item
Copy the id from each widget’s embed code in StoryProof and paste it into the matching item’s field. Only the id goes in the field, not the div or script.
Step 3 of 5
Bind the field inside a Code Embed
On the Collection page template, drag in a Code Embed and paste the div. Remove the sample id, keep the cursor between the quotes, and insert the field using the purple field control in the code editor (Webflow labels it as a dot or as + Add Field depending on the view). Save and close.
Step 4 of 5
Hide the embed on items without an id
Select the Code Embed, open Element settings > Visibility, add a condition on StoryProof widget id with the rule Is set, show when true and hide otherwise.
Step 5 of 5
Load embed.js once and publish
In the template’s page settings, paste the script into Before </body> tag custom code. Publish, because the Designer shows custom code only as a placeholder, then check two item pages on the live site.
Template page or Collection list?
Before you start
Limits before you build
Webflow docs as of 2026-11-14
Field binding, visibility conditions, plan requirements and list limits follow Webflow’s help center as seen on 2026-11-14 through search results, because the help pages themselves refused automated reading. Nobody has yet followed these steps on a live project.
No StoryProof Webflow app
StoryProof does not ship a Webflow app or CMS sync. The widget id is a value you paste into each item yourself.
Ecommerce variants do not switch it
Webflow notes that dynamic embeds using Ecommerce fields do not update when a shopper picks a variant, so one product page keeps one widget regardless of variant.
Widget count by plan
A widget per item uses one widget each. Widgets per workspace depend on your plan, and a small badge shows until Pro.
Custom code support
Webflow treats custom code as outside its support policy, so questions about the embed itself go to StoryProof support or the Webflow community.
FAQ
Questions people ask
Short answers to what usually comes up next.
Can I store the whole embed code in a CMS field instead?
Storing only the id is safer. A field holding full HTML is easy to break while editing, and the script would then load once per item in a list. Keep the markup in the template and let the field supply one value.
Why does the Designer show a grey box instead of testimonials?
Webflow shows a placeholder for embeds that contain scripts or rely on them. Publish to the webflow.io address and check there.
Do I need a separate widget for every single item?
No. Items that should show the same proof can carry the same widget id. Separate widgets pay off where customers describe a specific service, place or product.
What if my Collection has more than 100 items?
The 100 item cap applies to what one Collection list displays, not to template pages. Each item’s template page renders its own widget regardless of the Collection size.
Does the widget id field need to be a Plain text field?
Plain text is the field type Webflow’s own embed tutorials use for an identifier, and it keeps stray formatting out of the attribute. Rich text would add markup you do not want there.
Still have a question? Ask the StoryProof team or book a demo.
Give every Collection item its own proof
Approve testimonials, tag them by item and paste one id per Collection item.
Sources
- Use dynamic data in custom code embeds, Webflow Help Center. Checked 2026-11-14.
- Custom code embed, Webflow Help Center. Checked 2026-11-14.
- Custom code in the CMS, Webflow Help Center. Checked 2026-11-14.
- Conditionals, Webflow Help Center. Checked 2026-11-14.
- Dynamic content limits, Webflow Help Center. Checked 2026-11-14.
Last updated 2026-11-14.