Installing

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.

   

3. Add a 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

   

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

   

6. Now, set an attribute:

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

   

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.

   

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

   

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.

   

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>