Comments for Ghost Blogs with Hyvor Talk

If you are looking to add comments to your Ghost blog, Hyvor Talk may be a good option, because it

  • is lightweight and fast
  • has real-time commenting, voting, reactions, and ratings
  • fully-customizable
  • provides best moderation tools
  • and, trusted by thousands of websites

You can also connect Ghost members with Hyvor Talk to give your members a native commenting experience. Let’s see how.

Setting up Hyvor Talk

First, go to the Hyvor Talk Console. You will be asked to create a Hyvor account. After that, you will see the Add Website section in the console. Fill in the website name and domain and click Add.

Adding website to the Hyvor Talk console before Firebase configuration
Add Website to Hyvor Talk

Then, your website will be registered with Hyvor Talk, and you will get a website ID and the embed code. Next, you have to add this embed code to your template file in Ghost.

Changing the Theme Files

To install Hyvor Talk, you have to change theme files in Ghost. If you are on Ghost (Pro), you will need to download your current theme and make changes.

The process of installation differs significantly based on whether you are going to connect Ghost members or not. Jump on to the correct section:

  1. Hyvor Login
  2. Ghost Members Login

1. Hyvor Login

This process is fairly easy. And, it is the same as we have explained in our documentation.

  • Open the template file of your Ghost theme, which is usually post.hbs in your theme folder.
  • Then, copy and paste the embed code (take it from Console -> Install) to the place where you want comments to load.
  • Replace id: false with id: "{{comment_id}}" in the installation code. Then, Hyvor Talk will use page IDs given by Ghost to identify pages, which works better than the default identifiers.

2. Ghost Members Login

First, turn on the Single Sign-on option for your website in the console. Make sure the SSO Type is Stateless. Then, save changes. You will need to use the Private Key in the next step.

Please note that Single Sign-on is a business plan feature, and you can test it out in the trial period.

Setting up Single Sign-on for membestack comments

Open the template file of your Ghost theme, which is usually post.hbs in your theme folder. Then, paste the following code in the place where you need to load comments.

<div id="hyvor-talk-view"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script>
    var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID,
        HYVOR_TALK_PRIVATE_KEY = 'YOUR_PRIVATE_KEY',
        HYVOR_TALK_CONFIG = {
            url: false,
            id: "{{comment_id}}"
        };
    {{#if @member}}
        var userData = {
            id: "{{ @member.uuid }}",
            name: "{{ @member.name}}",
            email: "{{ @member.email}}",
        };
    {{else}}
        var userData = {};
    {{/if}}
    userData = btoa( JSON.stringify( userData ) )
    var hash = CryptoJS.HmacSHA1(userData, HYVOR_TALK_PRIVATE_KEY).toString();
    HYVOR_TALK_CONFIG.sso = {
        hash: hash,
        userData: userData,
        loginURL: location.href + "#/portal/login",
        signupURL: location.href + "#/portal/signup"
    }
    var script = document.createElement("script");
    script.src = "//talk.hyvor.com/web-api/embed.js";
    script.async = true;
    document.body.appendChild(script);
</script>
  • Replace YOUR_WEBSITE_ID with the website ID (number) you see in the Console -> Install section.
  • Replace YOUR_PRIVATE_KEY with the private key you got in the last step (Console -> Single Sign-on -> Private Key). Make sure to keep the quotes.

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 uuids. Therefore, you have to make sure that the uuid of your users are not shared publicly with anyone.

Re-upload Theme Files

Now, you have changed the theme files. Zip them and re-upload them via the Ghost portal. You should see the comments section on your pages.

If you set up SSO, you should be able to log into the comments section by logging into a Ghost member account.

Final Things…

You have now installed Hyvor Talk on your Ghost blog. You can now continue with adjusting the settings of Hyvor Talk. First, head over to the Appearance section of the console and change some colors to make the commenting section blend with your website.

Changing appearance of Hyvor Talk comments section on Ghost blog
Change Appearance

Next, change some community settings such as guest commenting options, voting options, etc. Finally, if you need you can also change the language (We support more than 25 languages).

If you have any questions, issues, or suggestions, you can leave a comment below or contact us via the live chat.