How to Add Comments to Webflow with Hyvor Talk

Webflow offers creative professionals an easier, more visual way to design and host responsive websites. To date, web designers often simply outsource the work of coding a responsive site after first using something like Photoshop or Illustrator to create the design itself, or they use frameworks for front-end development. Webflow is different. It not only offers a visual editor that lets you drag-and-drop, customize responsive layouts, and define CSS styles for each device you want to support, but you can also publish your site immediately upon completion. In this article, I’ll be guiding you on how to add comments to your Webflow website.

When you need to build an audience on your website, there are some key points things to do:

  1. Adding social share buttons
  2. Adding a comments section so that users can engage, share feedback, ask questions, and contribute to your content.
  3. (Optionally) Adding reactions system (So that users can add their reactions)

In this article, we are going to explain to add comments to your Webflow website using Hyvor Talk commenting platform. Surprisingly, Hyvor Talk comes with a reactions plugin. So, you can add reactions at the same time!

Why Hyvor Talk?

Hyvor Talk is a fully-featured commenting platform that you can embed on your Webflow website in a few minutes. It is also ad-free and privacy-focused. Unlike most other free plugins, Hyvor Talk does not place ads or affiliate links on your website to monetize your content. We are committed to protect the privacy of your visitors. Hyvor Talk is fully customizable so that you can customize its colors, fonts, and texts so that it blends in seamlessly with the rest of your site or blog.

Additionally, Webflow team has tested and listed Hyvor Talk as an official Webflow intergration on Webflow University.

Installing Comments on Webflow

Comes in the process of installing Hyvor Talk, you will realize that it is a seamless experience that is not fussy at all.

1. Sign Up to Hyvor Talk

Click over to Hyvor Talk and sign up.

Everything is controlled in Hyvor Talk console. Click the link and create an account. After confirming the email, you’ll be redirected to the console.

2. Adding Your Website to the Console

This step is easy. Just add a name and your website domain, and click “ADD”.

Adding your website to Hyvor Talk. Then, add comments to webflow

2. Installing Hyvor Talk Comments on Webflow

In the install section, you will see the installation guides for multiple platforms.

A screenshot of Hyvor Talk installation section of the console

Click Manual Installation.

Hyvor Talk comments installation code

Copy it by clicking the copy button. Now, we have to paste the code in the place we need comments to load. 

3. Now onto Webflow

We assume that you have already set up your Webflow website and you are familiar with Webflow dashboard.

Then, add an embed component to the place you need comments to load (Usually after blog post contents). This video explains how to use embeds with Webflow.

Place the copied Hyvor Talk installation code in the code field of the embed. That’s all!

You’ll now see the comments section with reactions.

Comments and reactions added to Webflow

Hyvor Talk has been embedded!

4. (Optional) Set up Single Sign-on

If you have set up authentication on your Webflow website using a solution like Firebase, you can also set up Single Sign-on (SSO). This part is entirely optional. One benefit of using this method is that your users will be able to comment using accounts created on your website (no more Hyvor accounts needed). Setting up SSO requires dealing with some Javascript code.

We have put together a tutorial on setting up Single Sign-on with Firebase. If you are interested, visit the tutorial for more details.

If you want to learn how to set up authentication with Webflow and Firebase, check out this awesome video series created by Jason Dark on YouTube.

5. Tinker around with Hyvor Talk

In the console, you can customize the appearance of your commenting section in a few minutes. Check out our documentation to learn more about appearnce customization.

After that, you can change how your users can comment, and what data to collect from them when commenting. Learn more about community settings.

Conclusion

There you have it: a simple and easy tutorial on how to install Hyvor Talk on your web flow website. Usually, the best place to have comments is after blog posts. But, you can add it to any page you like. You can go through our documentation to learn more about Hyvor Talk.

Need a privacy-focused commenting platform for your website?