How can I make a unique comment section appear on each individual Story page in my Webflow site's "Stories Template" collection, instead of displaying site-wide comments?
- Use a third-party comment platform (e.g., Disqus) that supports dynamic identifiers.
- Add an HTML Embed to the Stories Template Page and bind the Story’s slug or URL dynamically as the comment thread identifier.
- Publish and test different Story pages to confirm each has a unique comment thread.
To show a unique comment section for each Story page in your Webflow “Stories Template” (Collection Page), you need to dynamically separate comments based on each story’s unique identifier. Here's how to do it:
1. Use a Third-Party Commenting Platform That Supports Dynamic Page IDs
Webflow doesn’t have built-in commenting, so you’ll need to use a third-party integration such as Disqus, Hyvor Talk, or Commento that supports unique page identifiers (like URL slugs or CMS item IDs).
- Disqus is the most common and has solid support for single-page apps like Webflow.
- Ensure the platform allows passing a unique identifier or page URL with the embed.
2. Add an Embed Component to the Stories Template Page
- Inside the "Stories Template" Collection Page, drag a HTML Embed element to where you want the comment section to appear.
- Use the platform’s recommended embed code, and dynamically bind the unique Story slug or ID from the CMS.
Example with Disqus (use inline code only):
- Set the
page.identifierandpage.urlusing binding: - Identifier:
slug(from CMS) - URL: Webflow's dynamic page URL (use
https://your-site.com/stories/slug)
3. Dynamically Bind Content Within the Embed
In your embed settings:
- Replace any hardcoded values with Webflow CMS bindings.
- For example in Disqus:
this.page.identifier = 'story-{{wf {slug} wf}}';this.page.url = 'https://yourdomain.com/stories/{{wf {slug} wf}}';
This tells the platform to treat each Story as a separate thread or comment space, instead of one global comment section.
4. Publish and Test the Implementation
- Publish your site to the custom domain or Webflow subdomain.
- Visit at least two different Story pages and confirm that the comment threads are not shared, and are tied individually to each slug or URL.
Summary
To create a unique comment section per Story page in Webflow, embed a third-party comment tool like Disqus and dynamically pass the Story’s slug or URL as the comment thread’s unique identifier. This ensures that each comment section is tied to its specific CMS item.