Hyvor Talk

How to integrate Hyvor Talk with Webflow

This section teaches readers how to connect Webflow with Hyvor Talk.

Integrating Hyvor Talk with Webflow brings powerful commenting and community features to your site without the complexity of building custom systems. Choose from simple embed methods for basic commenting, native SSO features for seamless user authentication, or API integration for advanced automation and data synchronization.

The embed approach works perfectly for most sites needing commenting functionality. For membership sites using Webflow's authentication system, the SSO integration creates a unified user experience. API methods enable custom workflows, automated moderation, and CMS synchronization for sites requiring deeper integration.

Use the embed element

Add Hyvor Talk's commenting system to any Webflow page using the Embed element. This method requires no coding knowledge and delivers all core commenting features including moderation, reactions, and real-time updates.

Capabilities:

• Guest and authenticated commenting with moderation controls
• Rich text editing with support for bold, italics, code blocks, and media embeds
• Real-time updates showing new comments instantly
• Multi-language support for global audiences
• Customizable appearance matching your site's design

To implement, create an account in the Hyvor Talk Console, obtain your website ID, then add an Embed element in Webflow Designer with this code:

<script async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
<div id="comments-view"></div>
<script type="module">
  const comments = document.createElement('hyvor-talk-comments');
  comments.setAttribute('website-id', "YOUR_WEBSITE_ID");
  document.getElementById("comments-view").appendChild(comments);
</script>

Replace YOUR_WEBSITE_ID with your actual ID from the Hyvor Talk Console. Publish your site to activate comments immediately.

Single Sign-On with Webflow Memberships

Connect Hyvor Talk with Webflow's Memberships feature to let logged-in users comment using their site credentials. This creates a seamless experience where users don't need separate accounts for commenting.

Features:

• Unified authentication using Webflow Memberships integration
• Automatic user profile sync for names and avatars
• Member-only commenting options
• GDPR-compliant data handling with user deletion support

Implementation uses the Sygnal Attributes library to bridge Webflow's membership data with Hyvor Talk's SSO system. Enable SSO in your Hyvor Talk Console as "Stateless" and "Keyless", then add this enhanced embed code:

<script async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
<div id="comments-view"></div>
<script type="module">
  import { WfuUserInfo, WfuUser } from 'https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/modules/webflow-membership.js';
  
  $(function() {
  var membership = new WfuUserInfo({
  userInfoUpdatedCallback: function(user) {
  if (user) {
  const comments = document.createElement('hyvor-talk-comments');
  comments.setAttribute('website-id', "YOUR_WEBSITE_ID");
  comments.setAttribute('sso-user', btoa(JSON.stringify({
  timestamp: Math.floor(Date.now() / 1000),
  id: user.user_id_alt,
  name: user.name || user.email.split('@')[0],
  email: user.email
  })));
  document.getElementById("comments-view").appendChild(comments);
  }
  }
  }).init();
  });
</script>

Build with Webflow and Hyvor Talk API

For sites requiring advanced functionality, the APIs enable custom integrations, automated workflows, and deep data synchronization between Webflow and Hyvor Talk.

Use cases:

• Sync comment data to Webflow CMS with the Data API
• Automate moderation workflows using the Console API
• Track engagement metrics with webhook integrations
• Custom user management and bulk operations

The Data API provides read-only access to public comment data, while the Console API handles administrative tasks like moderation and user management. Both support pagination and filtering for scalable operations.

Display comments in Webflow CMS

Fetch comments from Hyvor Talk and display them in custom Webflow collections or sections using the Data API:

// Client-side example (domain must be whitelisted in Hyvor Console)
fetch('https://talk.hyvor.com/api/data/v1/comments?website_id=YOUR_ID&limit=10')
  .then(response => response.json())
  .then(data => {
  // Process and display comments in your Webflow site
  });

This enables custom comment displays, featured discussions, or comment count widgets anywhere on your site.

Automate moderation and user management

Use the Console API to build custom moderation dashboards or automate common tasks:

// Server-side example with API key
fetch('https://talk.hyvor.com/api/console/v1/YOUR_WEBSITE_ID/comments', {
  method: 'PATCH',
  headers: {
  'X-API-KEY': 'YOUR_API_KEY',
  'Content-Type': 'application/json'
  },
  body: JSON.stringify({
  state: 'approved'
  })
});

Configure webhooks to receive real-time notifications about new comments, user signups, or moderation events, enabling integration with automation tools like Zapier.

What you can build

Integrating Hyvor Talk with Webflow enables interactive communities, engaged audiences, and monetized content platforms.

• Content communities: Build blogs or news sites with vibrant comment sections where readers discuss articles, share insights, and connect with authors through threaded conversations and reactions
• Membership sites: Create exclusive communities with gated commenting, premium discussions, and member-only content areas that integrate seamlessly with Webflow's membership system
• Documentation hubs: Add feedback channels to help articles where users ask questions, report issues, and share solutions, turning static docs into collaborative resources
• E-learning platforms: Enable student discussions under lessons, peer-to-peer learning through Q&A sections, and instructor feedback on course materials with multi-language support