Adding Comments to Your Bubble.io Apps with Hyvor Talk

We have released our own blogging platform: Hyvor Blogs. Start your own blog for free today!! ✌✌

This guide shows you how to embed the Hyvor Talk comments system on Bubble.io Apps and connect Hyvor Talk with Bubble login using Single Sign-on.

What is Hyvor Talk?

Hyvor Talk is a privacy-first, fully-featured commenting system for websites. Some features of Hyvor Talk:

• Real-time comments

• Voting, reactions, and ratings

• Email Notifications

• Image/GIF uploading

• Multi-language support

• Single Sign-on (Connecting Bubble Login)

• And more...

Just like most things in Bubble, you do not need to know how to code to follow this guide. All is just clicking, copying, and pasting.

This guide has two main sections.

1. Installing Hyvor Talk Comments on Bubble

2. Connecting Bubble login with Hyvor Talk (Single Sign-on)

1. Installing Hyvor Talk Comments on Bubble

• Go to the Hyvor Talk Console and add your website (You will be asked to create a Hyvor account first). Use your bubble app's domain as the Website Domain.

• Next, you will see the Install section. Copy the website ID.

• Next, go to your Bubble Application, and install the Hyvor Talk plugin.

• Now, you will see the Hyvor Talk element in the Visual Elements panel. Choose it and draw the element in your application in the place you want to add Hyvor Talk comments.

• Now, paste the previously copied Website ID (from Hyvor Talk Console -> Install section) in the Website ID field in the element settings.

That's all! You should now see the Hyvor Talk comments section on your Bubble application like this:

Note: The auto-resize option is turned on by default. This will resize the parent element when the comments section grows (Ex: when users publish comments). However, if you want the comments section to have a fixed height with a scroll bar, disable that option.

Some other things to note:

• Hyvor Talk loads unique threads for each page (identified by the URL of the page).

• You can only have one comments section on one page.

2. Connecting Bubble login with Hyvor Talk (SSO)

Next, you can connect Bubble login with Hyvor Talk. So far with our setup, visitors will need a Hyvor account to comment. But, our Single Sign-on option allows you to connect Bubble login to Hyvor Talk. The main advantage of this is that users can comment and interact using their account on your application.

Single Sign-on is only available on our business plan. Therefore, you will need a business subscription with Hyvor Talk to connect Bubble login.

Our Bubble plugin comes with actions to set up a workflow to connect Bubble login with Hyvor Talk. Let's see how to do that.

• First, go to the Single Sign-on section of the console and turn it on, and save the changes. Copy the private key for the next steps.

• Next, go to your element options in the Bubble app and turn on the SSO Enabled option - this will make sure the comments section is not loaded until Single Sign-on is configured (SSO is a back-end operation).

• Next, go to Workflow and add a new event for "Page is loaded"

• Next, click on "Click here to add an action..." and choose Plugins -> Hyvor Talk SSO Back-end.

• Next, paste the copied Private Key in the SSO Private Key field.

• Next, add another step to the workflow: Plugins -> Hyvor Talk SSO Front-end

• Now, we want to fill User Data and Hash fields from the output of the first step. See this short video on how to do that.

• Next, set "Login URL" to the URL of the login page of your application (Ex: https://yourapp.com/login). We redirect the users to this login URL when they click the "Login" or "Login to comment" button in the comments section. Currently, it is not possible to open a popup for this case. You'll need a separate URL for login to make this work.

Yay! You have just finished setting up Bubble login for Hyvor Talk. Now, users can log into your application and comment without any hassle. Cool, right?

What's Next?

Hyvor Talk has a lot of options to customize things. You can change the basic community settings, appearance, and language through the console. We also provide powerful tools to moderate your community. You can go through our documentation to learn more about Hyvor Talk.

If you have any questions, issues, or suggestions to make the Bubble integration better, please contact us via live chat or at [email protected]

We are looking forward to seeing how you are integrating Hyvor Talk on Bubble applications.