Embed Code

Embed code is a small HTML snippet than is used to embed Hyvor Talk on any web page. Even you use plugins, like our WordPress plugin, the embed code is used under the hood.

fter you sign up at Hyvor Talk, you'll get the embed code from the Console. Your embed code will be very similar to the below code except that YOUR_WEBSITE_ID is replaced with your actual website ID, which is a unique number we give when you add your website to the console.

<div id="hyvor-talk-view"></div>
<script type="text/javascript">
        url: false,
        id: false
<script async type="text/javascript" src="//talk.hyvor.com/web-api/embed"></script>

All you have to do is copying and pasting this code on your website's template in the right place you need comments to load. If you haven't yet, see Installation Guide to learn how to embed Hyvor Talk on your platform.

This code sets some configurations and loads a lightweight JavaScript file (~3kb) from our servers, which renders an iframe on your website that allows users to securely access the comments section.

Javascript Configuration

Code inside the first <script> tags sets the configuration variables of Hyvor Talk.

  • HYVOR_TALK_WEBSITE - This is your website ID. You can get it from the Console. You probably do not want to change this after the initial set up.
  • HYVOR_TALK_CONFIG - This is a Javascript Object that can have several key/value pairs as shown in the following table.


Key Description Applicable Values
url The absolute URL of the page. If kept false, we will use the canonical URL or location.href. string Any absolute URL (with protocol).
id id is used to identify unique pages. We highly recommend you to set it to something unique (Ex: post ID from your database). If kept false, we will use the canonical URL of the page (which is unique in most cases) or location.href. int or string no longer than 400 characters
title Title of the page. document.title is used by default. string
loadMode Configures when to load the iframe. Scroll down to using loading modes for more details. scroll or click
language Set language for each page string Any valid language code
sso Javascript object to configure stateless SSO object
palette An palette object to set custom colors for each page. See dynamic colors object
authorEmail Email of the author of the page. Scroll down to Author Emails string

Page Identifiers

HYVOR_TALK_CONFIG.id sets the identifier for each page. We strongy recommend you using an identifier like post/page ID for this because:

  • it avoids page duplications when canonical URLs change
  • if you have multiple versions of your post in multiple languages, you can load the same comments using this identifier.
  • you will be able to easily change your domain without losing your comments.

If you keep it false, we will use the canonical URL of the page (if you have set up those) as the identifier. Otherwise, we will use location.href. Almost every modern website has canonical URLs set up for SEO purposes and they are unique for each page. However, you will lose the previous comments if you change the URL of the page.

Using Loading Modes

By default, Hyvor Talk loads the comments on the page load. You can configure it to load when the user scrolls down or clicks a button using HYVOR_TALK_CONFIG.loadMode.

Important! We have noticed that using on scroll and on click loading prevents search engines from indexing the comments. Comments can contribute to your content and help you rank for more keywords. If SEO matters on your website, we recommend using default loading.

    // other configs...
    loadMode: 'scroll', // or 'click'

If you use click, you have to add a button with an id to your page by yourself. Then, add the button's id in HYVOR_TALK_CONFIG as clickId.

    loadMode: 'click',
    clickId: 'button-id'

Author Emails

Each page can have an author. Author will receive an email notification when someone comments on a page they authored. To set up author notifications, set HYVOR_TALK_CONFIG.authorEmail to author's email. Alternatively, you can also set it to base64 encoded version of author's email to prevent web crawlers stealing emails from your website's source code.

    authorEmail: '[email protected]'
// or
    authorEmail: 'c29tZW9uZUBleGFtcGxlLmNvbQ=='

Note: This feature is only available for Business Plan users.

Other Concepts


The comments iframe will be inserted into to the <div id="hyvor-talk-view></div> element. This element should appear in your document (DOM) before the init script (https://talk.hyvor.com/web-api/embed) is loaded.

Even you cannot style the content inside the iframe directly because of CORS, you can add CSS rules to #hyvor-talk-view. A common use case is to set the width of the comments section.

#hyvor-talk-view {
    width:700px; /* 650px to 900px works very well */
    margin:auto; /* center the content */