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">
    var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID;
    var HYVOR_TALK_CONFIG = {
        url: false,
        id: false
    };
</script>
<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.

HYVOR_TALK_CONFIG Object

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.

var HYVOR_TALK_CONFIG = {
    // 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.

var HYVOR_TALK_CONFIG = {
    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.

var HYVOR_TALK_CONFIG = {
    authorEmail: '[email protected]'
}
// or
var HYVOR_TALK_CONFIG = {
    authorEmail: 'c29tZW9uZUBleGFtcGxlLmNvbQ=='
}

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

Other Concepts

hyvor-talk-view

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 */
    max-width:100%;
    margin:auto; /* center the content */
}