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.
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:
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.
- Log in into your Wordpress admin panel
- Go to Plugins > Add New
- Type "hyvor talk" in the search box
- Find the plugin "Comments by Hyvor Talk"
- Click install now and activate the plugin
- 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.
-
Go to the Wix Dahsboard and click "Edit Site".
-
Choose the page type you want to add comments to.
-
Add a Custom Element
-
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
- Server URL:
-
Next, click "Set Attributes" and "Set Attributes" again in the popup.
-
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.
-
In the Squarespace Dashboard, go to Pages.
-
Choose settings (⚙️) of the Page type you want to add comments to.
-
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.
-
Enter your Website ID here (Copy it from Console -> Install):
-
After adding the correct website ID above, click the button to open the Blogger Add Page Element window which is customized for Hyvor Talk.
-
Choose the correct blog and click "Add Widget" button on that page.
-
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.
- 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 the Console) to the place you want comments to load.
- Replace
id: false
withid: "{{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.
- Adding
example.com
whitelists bothexample.com
andwww.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
toscript-src
(Initial script) - Add
https://talk.hyvor.com
toiframe-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.
-
Generate a nonce (random string) in your backend and add
nonce-YOUR_NONCE
toscript-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>
-
Create a Base64-encoded SHA256 hash of the inline script and add it to
script-src
assha256-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
assha[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;");
- Convert
-
Use
unsafe-inline
inscript-src
(Discouraged! This completely removes the security protection provided by CSP when running inline scripts. Do not use it unless you absolutely have to.)