Hyvor Talk Comments + Memberstack SSO Integration

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

This is a simple and quick guide on integrating Hyvor Talk commenting system on Memberstack applications using Single Sign-on (In simple terms, use Hyvor Talk for comments and moderation, and Memberstack for login).

• No coding knowledge required

• This uses Hyvor Talk's Single Sign-on feature, which is only available in the 14-day trial period or the business plan of Hyvor Talk.

1. Setting up Hyvor Talk

First, go to the Hyvor Talk console. You'll be asked to create a Hyvor account. After that, you will see the Add Website section. Here, fill in the data and register your website with Hyvor Talk.

Now, you will see the installation section and your new Website ID. We will need this website ID in the last step.

2. Setting up Single Sign-on

Next, turn on Single Sign-on from the console. Make sure the SSO Type is stateless. You will need the Private Key in the next step.

3. Installing Hyvor Talk and Connecting with Memberstack

Add this code to the place where you need the comments section to load.

 1<div id="hyvor-talk-view"></div>
 2
 3<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
 4<script>
 5    var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID;
 6    var HYVOR_TALK_CONFIG = {
 7            url: false,
 8            id: false
 9        };
10    MemberStack.onReady.then(function(member) {
11        var HYVOR_TALK_PRIVATE_KEY = 'YOUR_PRIVATE_KEY';
12        var userData = member.loggedIn ? {
13            id: member["id"],
14            name: member["name"] || member["email"].replace(/@.+/, ''),
15            email: member["email"]
16        } : {}
17        userData = btoa( JSON.stringify( userData ) )
18        var hash = CryptoJS.HmacSHA1(userData, HYVOR_TALK_PRIVATE_KEY).toString();
19        HYVOR_TALK_CONFIG.sso = {
20            hash: hash,
21            userData: userData,
22            loginURL: "YOUR_LOGIN_URL"
23        }
24        var script = document.createElement("script");
25        script.src = "//talk.hyvor.com/web-api/embed.js";
26        script.async = true;
27        document.body.appendChild(script);
28    });
29</script>

In this code, replace:

• YOUR_WEBSITE_ID with the website ID you got in the first step. (Ex: var HYVOR_TALK_WEBSITE = 1234;

• YOUR_PRIVATE_KEY with the private key you got in the second step (make sure to keep quotes as it is. For example, if your private key is abcd, the code should be var HYVOR_TALK_PRIVATE_KEY = 'abcd';.)

• YOUR_LOGIN_URL with the URL of the login page of your website. (Keep the quotes)

Now, the Hyvor Talk comments section should appear on your website and will use Memberstack login. By default, there will also be a guest commenting option, which you can disable from the console if needed.

Security Note: Our SSO private keys and hashing are designed to be handled on the server-side. However, when you do not have access to a back-end, you will need to handle them in the front-end via Javascript. This way, accounts are secured by user IDs. Therefore, you have to make sure that the user IDs of your users are not shared publicly with anyone.

Conclusion

You have just completed setting up Hyvor Talk comments with Memberstack. Now, you can go through the console and change some appearance and community settings as needed. Hyvor Talk also supports an array of languages. You can also find more details in our documentation about customizing and moderating.

If you have any questions, comment below or feel free to contact us.