Installing

Setting up Hyvor Talk

Visit the Hyvor Talk Console to add your website. You will be asked to create a Hyvor account. After the registration, you'll be redirected to the Add Website section of the console.

Add Website

Now, type a name and domain, and click "Add" (You can add more domain names later). This will generate a new website ID for your website in Hyvor Talk. And, you are now ready to embed Hyvor Talk comments on your website.

Installation Guides

If your platform is not listed here, you can follow the manual installation guide and copy and paste the code to your website's template. If you have trouble integrating Hyvor Talk on your system, don't hestitate to contact us via live chat.

Choose your platform:

Manual Installation
CMS WordPress Wix Squarespace Blogger Shopify Ghost
JS Frameworks Vanilla JS React Vue Angular Svelte
Static Generators Jekyll Hexo

All you have to do is copying and pasting the embed code on your website's source code. Usually, code is pasted after the main content.

Using the Plugin

Our WordPress plugin makes it easier to install Hyvor Talk on WordPress websites.

  1. Log in into your Wordpress admin panel
  2. Go to Plugins > Add New
  3. Type "hyvor talk" in the search box
  4. Find the plugin "Comments by Hyvor Talk"
  5. Click install now and activate the plugin
  6. Go to Hyvor Talk plugin and add your website ID and click Change. (Website ID can be copied from the Install section of the console.)

Or Manually

You can also copy and paste the embed code to your website's source code. You'll need to edit your theme to do that.

  1. Go to the Wix Dahsboard and click "Edit Site".

  2. Choose the page type you want to add comments to.

    Wix Page Type Selection

  3. Add a Custom Element

    Wix Custom Element

  4. Click "Choose Source" and add change the settings.

    • Server URL: https://talk.hyvor.com/web-api/integrations/wix/comments.js
    • Tag Name: wix-hyvor-talk

    Wix Choose Source

  5. Next, click "Set Attributes" and "Set Attributes" again in the popup.

    Wix Attributes

  6. Now, set an attribute:

    • Attribute Name: website-id
    • Value: Your Website ID (Copy from Console -> Install)

    Wix Website Id

The embed should load on your website now. If you want to view the embed in the Wix Editor, you will need to add static.parastorage.com or static.wixstatic.com to allowed domains in Console -> Install, if an error is shown.

To embed Hyvor Talk on Squarespace websites, the Code Injection feature is required, which is only available in Squarespace Business and Commerce plans.

  1. In the Squarespace Dashboard, go to Pages.

    Squarespace Pages

  2. Choose settings (⚙️) of the Page type you want to add comments to.

    Squarespage Page Type

  3. In the settings popup, go to Advanced -> Blog post item code injection, paste the embed code there (copy it at Console -> Install), and save.

    Sqaurespace code injection

Now, you should see the Hyvor Talk comments section in the pages under the posts.

  1. Enter your Website ID here (Copy it from Console -> Install):

  2. After adding the correct website ID above, click the button to open the Blogger Add Page Element window which is customized for Hyvor Talk.

  3. Choose the correct blog and click "Add Widget" button on that page.

  4. You'll see a widget named "Hyvor Talk". Change the position of it as needed.

Adding Hyvor Talk to Shopify requires editing the theme files. Please visit this blog post for a comprehensive step-by-step guide.

To install Hyvor Talk on Ghost, you will need to change the theme template files.

  1. Open the template file of your Ghost theme, which is usually post.hbs in your theme folder.
  2. Then, copy and paste the embed code (take it from the Console) to the place you want comments to load.
  3. Replace id: false with id: "{{comment_id}}" in the installation code. Then, we will use page IDs given by Ghost to identify pages, which works better than canonical URLs.

Note: Some themes may have the following code in the template file. If so, replace the "If you want to..." line with the copied embed code. Then, uncomment the block (remove the lines which contains {{!-- and --}}).

{{!--
    <section classname="post-full-comments">
        If you want to add embed comments, this is a good place to do it!
    </section>
--}}

The default embed code is a HTML code. However, you may sometimes need a JS-only solution for some applications. Even with this method, you'll need to have access to an element in the DOM or add <div id="hyvor-talk-view"></div> to the DOM.

If you haven't added <div id="hyvor-talk-view"></div> to your HTML code, use this code to do that.

var commentsSection = document.getElementById("comments"); // change the ID to whatever element in your HTML page
var hyvorTalkView = document.createElement("div");
hyvorTalkView.id = "hyvor-talk-view";
commentsSection.appendChild(hyvorTalkView);

Then, add the embed script.

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://talk.hyvor.com/web-api/embed.js";
document.body.appendChild(script);

You can use the hyvor-talk-react package to install Hyvor Talk on React applications. Visit the link for more details.

You can use the hyvor-talk-vue package to install Hyvor Talk on Vue applications. Visit the link for more details.

Angular is not yet officially supported. But, you can read the Vanilla JS documentation and create your own custom component for Angular.

Svelte is not yet officially supported. But, you can read the Vanilla JS documentation and create your own custom component for Svelte.

Copy and paste the following code to the layout files you need Hyvor Talk to load (Usually _layouts/post.html for posts). Make sure to replace YOUR_WEBSITE_ID with your actual website ID, which can be found at Console -> Install.

<div id="hyvor-talk-view"></div>
<script type="text/javascript">
    var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID;
    var HYVOR_TALK_CONFIG = {
        url: false,
        id: '{{page.id}}'
    };
</script>
<script async type="text/javascript" src="//talk.hyvor.com/web-api/embed"></script>

Copy and paste the following code to the template files you need Hyvor Talk to load (Usually /themes/{theme_name}/layout/_partial/article.ejs for posts). Make sure to replace YOUR_WEBSITE_ID with your actual website ID, which can be found at Console -> Install.


<div id="hyvor-talk-view"></div>
<script type="text/javascript">
    var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID;
    var HYVOR_TALK_CONFIG = {
        url: '<%= page.permalink %>' || false,
        id: '<%= page.path %>' || false
    }
</script>
<script type="text/javascript" src="//talk.hyvor.com/web-api/embed"></script>

Allowed Domains

For security, we only serve the embed on domains you whitelist the console (Console -> Website -> Install -> Allowed Domains). If you see a warning like this in the comments section, add the shown domain to the allowed domains list.

Allowed Domains Error

  • Adding example.com whitelists both example.com and www.example.com.
  • To allow all subdomains, use *.example.com.
  • You can also allow all domains by adding * (Not recommended unless you have a network of domains)

Changing Configuration

Page-level settings can be customized in the embed code. See embed code for more details.

Website-level settings can be changed from the Console's Appearance and Community sections.

Single Sign-on

By default, commenters will need a Hyvor account to log in and comment. If you already have an authentication system on your website, you can automatically log in users by setting up Single Sign-on. View SSO Docs for more details.

Content Security Policy (CSP)

This section is only for websites that use CSP headers.

Content Security Policy is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks.

If you use CSP headers on your website, make sure to add the following to the header to allow run the initial Javascript and load the iframe on your website.

  • Add https://talk.hyvor.com to script-src (Initial script)
  • Add https://talk.hyvor.com to iframe-src (Embed iframe)

We use inline Javascript to configure Hyvor Talk on each page. Make sure to allow the inline Javascript part in the embed code using one of these methods.

  1. Generate a nonce (random string) in your backend and add nonce-YOUR_NONCE to script-src in the CSP header. Then, add the same nonce to the inline Javascript code.

    <script type="text/javascript" nonce="YOUR_NONCE">
        // HYVOR TALK CONFIGURATION
    </script>
  2. Create a Base64-encoded SHA256 hash of the inline script and add it to script-src as sha256-YOUR_HASH. Browsers (Ex: Chromium-based) show an error in the browser console when inline scripts are used without whitelisting. You can easily get the encoded hash from the console.

    If you prefer generating it by yourself, there are some rules you should follow.

    • Convert \r\n spaces to \n in the script
    • Do not include <script> tags (both starting and ending) when calculating the hash
    • Use SHA256, SHA384, or SHA512 to hash the inline script.
    • Then encode the hashed string in Base64.
    • Replace - with + and _ with / in the encoded string
    • Finally, add it to CSP header in script-src as sha[HASH_TYPE]-[ENCODED HASH] (Ex: sha256-YOUR_HASH)

    Here's the PHP code for generating hashes.

    <?php
    $script = 'var HYVOR_TALK_WEBSITE = 6; // DO NOT CHANGE THIS
    var HYVOR_TALK_CONFIG = {
        url: false,
        id: false
    };';
    $script = preg_replace('/\r\n/', "\n", $script);
    $sha = base64_encode(hash('sha256', $script, true));
    $sha = str_replace('-', '+', $sha);
    $sha = str_replace('_', '/', $sha);
    
    header("Content-Security-Policy: script-src 'self' https://talk.hyvor.com 'sha256-$sha'; frame-src 'self' https://talk.hyvor.com;");
  3. Use unsafe-inline in script-src (Discouraged! This completely removes the security protection provided by CSP when running inline scripts. Do not use it unless you absolutely have to.)