Adding Commenting to 11ty with Hyvor

This is a repost from my personal site

Hyvor is a free commenting system for the web. It's easy to set up and has a stunning UI.

What you need

• 11ty (this is after all an 11ty tutorial)
• A Hyvor account
• Your website

After going on Hyvor you will see a dashboard.

In general you will be given options to enter a web site name and website domain. IF you don't own a domain, that's ok! My website name is Personal Blog and my
web site domain is smolnotes.netlify.app

Now go to your post template (it is generally in _includes/layouts and is listed as post.html, post.njk or some other format) and add this code where you want the comments to go:

🔔 IMPORTAN

Make sure you replace REPLACE WITH YOUR WEBSITE ID with your website id. This can be found in the general tab of the Hyvor dashboard. Make sure that the website code corresponds with the website url.

<div id="hyvor-talk-view"></div>
<script type="text/javascript">
    var HYVOR_TALK_WEBSITE = REPLACE WITH YOUR WEBSITE ID; // DO NOT CHANGE THIS
    var HYVOR_TALK_CONFIG = {
        url:  '{{ post.url | url }}',
        id: '{{page.id}}'
    };
</script>
<script async type="text/javascript" src="//talk.hyvor.com/web-api/embed"></script>

There you have it! Happy commenting :)

I can now cross adding commenting system to my blog.
All images are taken from Hyvor.