Disqus

How to integrate Disqus with Webflow

Disqus brings robust commenting capabilities to Webflow sites through multiple integration methods.

While Disqus doesn't offer an official Webflow app, you can implement comments using the universal embed code for quick setup, leverage automation tools like Zapier for enhanced workflows, or build custom integrations with the Disqus API for advanced functionality like comment analytics and custom moderation interfaces.

Use Code Embeds and custom code

Quickly enable robust commenting on your Webflow site by embedding Disqus. This method supports blogs, portfolios, and content sites, providing threaded discussions, social logins, spam filtering, and moderation tools. Each page receives a unique comment thread based on its URL, and CMS collections can be configured for dynamic comment sections. Minimal coding required.

Implementation:

1. Create a Disqus account and register your site. Sign up for a Disqus account and register your website to obtain your unique universal embed code.

2. Add the Embed element in Webflow. In Webflow, drag an Embed element to the desired location (typically at the bottom of blog post templates or CMS collection pages).

3. Paste and configure your embed code. Paste your Disqus universal embed code into the Embed element. For CMS collections, ensure the embed is placed in the Collection Template so each item generates a unique thread. Optionally, configure Disqus variables (e.g., disqus_identifier) for advanced thread control.

4. Publish your site and moderate comments. Publish your site to activate Disqus comments. Manage moderation, notifications, and appearance settings via the Disqus dashboard. Enable or disable guest commenting as needed.

Configuration notes:

• Each page automatically gets its own unique comment thread based on the URL
• For CMS collections, place the embed in your Collection Template to add comments to all items
• Guest commenting can be enabled or disabled based on your community preferences

Use automation tools

Integrate Disqus with hundreds of apps using Zapier to automate notifications, data management, and engagement tasks — no coding required. Popular automations include sending new comment alerts to Slack, exporting comments to Google Sheets, creating support tickets, and triggering email or social media actions. Zapier’s intuitive setup allows you to connect Disqus to tools like Slack, Google Docs, LinkedIn, and more, streamlining your comment management and reporting workflows.

Implementation:

1. Sign up and connect Disqus to Zapier. Create a Zapier account if you don’t have one. In Zapier, connect your Disqus account by authorizing access. Ensure you select the correct Disqus forum (site) during setup. If your site’s shortname isn’t listed, enter it manually.

2. Choose a trigger event. Select a trigger such as 'New Comment' or 'New Flagged Comment' from Disqus. This event will start your automated workflow (Zap). Some triggers, like 'New Email Subscriber,' require a Disqus Pro subscription.

3. Set up an action in your target app. Pick an action app (e.g., Slack, Google Sheets, LinkedIn, CRM) and define what should happen when the trigger occurs, such as sending a notification, creating a document, or posting an update.

4. Map data fields and test your Zap. Map relevant Disqus comment data to the fields in your action app. Test the Zap to ensure data flows correctly and the automation works as intended. Adjust mappings or filters as needed for accuracy.

Limitations:

• Cannot modify Webflow content directly through these automations
• Primarily useful for notifications and data export, not content synchronization

Build with Webflow and Disqus APIs

Direct API integration unlocks capabilities beyond standard commenting, enabling custom analytics dashboards, advanced moderation workflows, and seamless data synchronization between platforms. This approach requires server-side implementation since Webflow doesn't execute backend code.

The Disqus API provides comprehensive endpoints for managing comments, threads, and user data programmatically. Common implementations use serverless functions (AWS Lambda, Netlify Functions) or dedicated servers to bridge Webflow and Disqus.

Core capabilities include:

• Display comment counts on article listings
• Sync comment data to Webflow CMS
• Build custom moderation interfaces
• Create analytics dashboards

Display comment counts

Show real-time engagement metrics by displaying Disqus comment counts on your blog index pages, mapped to Webflow CMS items and optimized for performance.

Implementation:

1. Configure Disqus API access. Register your site with Disqus, obtain API credentials, and review the threads/details endpoint documentation to ensure you can securely fetch comment data.

2. Fetch and map comment data. Create a serverless function to query the Disqus threads/details endpoint using article URLs, then match thread identifiers to Webflow CMS slugs for accurate mapping.

3. Update CMS or render counts. Use the Webflow CMS API to update comment count fields for each blog item, or render counts client-side if direct CMS updates are not feasible.

4. Cache and monitor results. Implement caching to minimize API calls and improve performance. Set up error handling, rate limit management, and periodic refresh to ensure data accuracy and reliability.

Implement custom moderation

Create a robust, automated moderation system tailored to your community's needs by combining Disqus API endpoints, moderation rules, and integrations with team tools. This method ensures efficient detection, processing, and resolution of problematic content while supporting collaborative workflows.

Implementation:

1. Configure moderation profiles and rules. Set up your Disqus Moderation Profile (Balanced or Strict) and define automated moderation rules for restricted words, toxicity, links, and flagged users. Use the Disqus admin panel to customize filters and actions (e.g., send to pending, delete, mark as spam) for various scenarios. Prioritize rules for effective handling of overlapping triggers.

2. Fetch and monitor comments programmatically. Use the Disqus forums/listPosts API endpoint to retrieve recent comments, applying filters for spam, flagged content, restricted words, or specific keywords. Schedule regular polling or use webhooks (if available) to ensure timely detection of new or problematic comments.

3. Take action and integrate with team tools. Programmatically approve or remove comments using the posts/approve and posts/remove endpoints. Integrate moderation events with Slack, email, or project management tools to notify moderators, assign reviews, or track escalations. Maintain an audit trail for transparency.

Sync user profiles

Establish a unified user experience by connecting Webflow member profiles with Disqus accounts. This method enables seamless authentication, profile data synchronization, and the display of user engagement metrics within Webflow, ensuring consistent identity and activity across both platforms.

Implementation:

1. Authenticate and link accounts. Implement OAuth to connect Webflow member accounts with Disqus profiles. Ensure secure consent and store necessary tokens for future API calls.

2. Enable single sign-on (sso). Configure Disqus SSO to allow users to log in to both platforms with a single identity, streamlining the authentication process and reducing friction.

3. Fetch and sync profile data. Use the Disqus users/details endpoint to retrieve user information, including comment history, reputation, and badges. Map and store relevant data in Webflow CMS for each member.

4. Display engagement metrics in Webflow. Show user comment activity, reputation scores, and badges on Webflow profile pages. Update displays dynamically to reflect real-time engagement and foster community participation.

What you can build

Integrating Disqus with Webflow enables dynamic community features and engagement tools across various use cases.

• Dynamic blog engagement: Transform static blog posts into interactive forums where readers exchange ideas, debate topics, and foster a loyal content community.
• Documentation with real-time support: Empower users to ask questions and share solutions directly on help articles, creating a collaborative, crowd-sourced knowledge base.
• Portfolio social proof: Collect and showcase authentic client testimonials on project pages, enhancing credibility and trust with verified, moderated feedback.
• Peer learning for education: Enable threaded discussions on course materials and assignments, promoting student collaboration and deeper understanding through peer-to-peer interaction.