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?
TL;DR
- Choose a commenting system like Disqus that supports dynamic pages and unique identifiers.
- On the Webflow Stories Template, embed the comment code and dynamically insert each story's unique slug or URL using Webflow CMS fields to ensure each post has its own comment thread.
To make a unique comment section for each individual Story page in your Webflow site, you need to integrate a third-party commenting system that supports dynamic pages using CMS item-specific IDs or URLs.
1. Choose a Dynamic-Friendly Commenting Platform
Use a third-party service that can tie comments to individual CMS items:
- Disqus is commonly used and supports this.
- Alternatives include Hyvor Talk, Commento, and Crisp Chat (for chat-style).
- Make sure the platform supports dynamic page URLs or unique identifiers.
2. Use Webflow CMS Dynamic Fields
On your Stories Template page:
- Webflow uses a single template page to render all CMS stories.
- You need to use a unique identifier, like the CMS slug or post ID, to assign a unique comment thread.
3. Embed the Third-Party Comment Code with Dynamic Data
- Go to the Stories Template page in the Designer.
- Add an Embed element (from “Add Elements” > Embed).
- Paste the embed code from your commenting provider.
- In the embed code, replace fixed identifiers (like
page.urlorpost.identifier) with Webflow CMS dynamic fields: - For unique page URL: use
Current Page URL - For post ID or slug: use
Slug(via Add Field inside Embed)
For example, if using Disqus:
- In the embed, dynamically inject:
- URL:
window.location.hreforhttps://yourdomain.com/stories/{{slug}} - Identifier: use the CMS item's slug or a unique post ID field
Use the “Add Field” option in the embed code editor to insert CMS data as needed.
4. Prevent Global Comments by Forcing Unique Identifiers
- Disqus and similar platforms will display the same comments thread on different pages if the identifier isn't unique.
- Always ensure each story passes a unique identifier or unique canonical URL.
5. Test on the Published Site
- Publish the site to staging or your custom domain.
- Visit individual story pages and confirm that comments are unique per post.
- Leave a test comment on one story and verify it doesn't appear on others.
Summary
To show a unique comment section per story, embed a commenting system like Disqus on your Stories Template with a dynamic unique identifier (e.g., slug or URL). This ensures comments are scoped only to each CMS item, not site-wide.