Creating a Comment Section

Table of Contents:

Introduction
Using Disqus
Using Commento
Using HyvorTalk
Result

Introduction

A comment section is needed to be added to our page to make it more interactive to user, either to facilitate conversation media to our user or to track the impression of our content. In this page, we will guide you to build a comment section to your page.

There are several third-party comment service provider, such as Disqus, Commento, or Hyvor Talk, that allows us to easily integrate their commenting functionality into our website.

Using Disqus

Follow these steps to adding the Disqus commenting functionality to our website.

After creating a Disqus account, make sure to choose "I want to install Disqus on my site".
Create a new Disqus site by filling up the required fields.
We will be navigated to the CMS platform list that our website use, choose Install with Universal Code as our CMS platform doesn't listed there.
Go to our code, we need to define the comment container element in our page HTML by copy paste code below to the HTML script. The comment section position often at the near bottom of the page, so the container can be placed there.
```
<div id="disqus_thread"></div> 
```
Next we will add the JavaScript code. Copy paste the code in this link here to bottom of the <body> tag in your index.thml.
Change several variables like:
- PAGE_URL needs to be change into the URL of our page website
- PAGE_IDENTIFIER can be filled with the ContentID from Nimvio CMS
- WEBSITE_NAME is the name that we input when creating the Disqus site.

Using Commento

Follow these steps to adding the Commento commenting functionality into the website.

After signing-in to the Commento dashboard, create a new site.
Go to the HTML code and copy paste code below to define the comment section container.
```
<div id="commento"></div>
```
Go to the JavaScript code and copy paste the attribute below into script tag to load the commenting feature and all settings will be automatically loaded.
```
defer src="https://cdn.commento.io/js/commento.js"
```

Using HyvorTalk

Follow these steps to adding the Hyvor Talk commenting functionality to our website

Sign-up first to be able to access their console as we need their generated WebsiteID before we use their comment functionality.
Go to the HTML code and put this attribute of script tag that placed in the <head> or bottom of <body>.
```
async src="https://talk.hyvor.com/embed/embed.js" type="module"
```
As Hyvor Talk already provide web component that ready to be used from their script, the tag <hyvor-talk-comments> can be used to define the comment section in our page. You can add more attribute to the component to config more options.
```
<hyvor-talk-comments
	website-id="YOUR_WEBSITE_ID"  
	page-id="YOUR_PAGE_ID" 
></hyvor-talk-comments>
```
Put value in the attributes to make the component identify your website.
- YOUR_WEBSITE_ID can be retrieved in the Dashboard > Settings > Website.
- YOUR_PAGE_ID is an unique identifier. In this case can be filled with Content ID from our CMS or let it empty as Hyvor Talk will take canonical URL from the page.

Result

Images below are the result of adding comment functionality from the three providers mentioned above in our sample page.

Disqus	Commento	Hyvor Talk

What's Next?

Congratulations! You have finished guide on creating a comment section with Nimvio and integrate it with 3rd party commenting service provider. Keep exploring others below:

Developer