Install: Blogger

Hyvor Talk uses Blogger's custom HTML/JavaScript gadget to embed comments. The following code adds both comments and comment counts to your Blogger blog. This works for most Blogger themes. If you have a custom theme, you may need to use the HTML installation.

1. Create a gadget

Go to your Blogger dashboard
Click the "Layout" button on the left sidebar
Click the "Add a Gadget" button
Click the "HTML/JavaScript" button
Keep the title empty

2. Add the code

Copy and paste the following code into the "Content" field and click the "Save" button. Make sure to replace YOUR_WEBSITE_ID in line 3 with your website ID.

<script>
    (function() {
        const WEBSITE_ID = "YOUR_WEBSITE_ID";

        // css
        const style = document.createElement("style");
        style.innerHTML = "#comments {display:none;} .comment-link {visibility: hidden;}";
        document.head.appendChild(style);

        // comments
        const wrap = document.getElementById("comments");
        if (wrap) {
            const script = document.createElement('script');
            script.type = "module";
            script.src = "https://talk.hyvor.com/embed/embed.js";
            document.body.appendChild(script);

            const el = document.createElement("hyvor-talk-comments");
            el.setAttribute("website-id", WEBSITE_ID);
            wrap.appendChild(el);
            wrap.style.display = 'block';
        }

        // comment counts
        const posts = document.querySelectorAll(".post");
        let found = false;

        for (let i = 0; i < posts.length; i++) {
            const post = posts[i];
            const link = post.querySelector(".comment-link");
            if (!link)
                continue;

            const el = document.createElement("hyvor-talk-comment-count");
            el.setAttribute("page-id", link.href);
            link.innerHTML = "";
            link.appendChild(el);

            found = true;
        }

        if (found) {
            const style2 = document.createElement("style");
            style2.innerHTML = ".comment-link {visibility: visible!important;}";
            document.head.appendChild(style);

            const script = document.createElement('script');
            script.src = "https://talk.hyvor.com/embed/comment-counts.js";
            document.body.appendChild(script);

            script.onload = function() {
                hyvorTalkCommentCounts.load({
                    "website-id": WEBSITE_ID
                });
            }
        }
    })()
</script>

3. Place the gadget

Finally, drag the newly created gadget to the bottom of the layout (ex: Footer) and click the "Save" button.

You can hide Blogger's default comments system at Settings → Comments → Comments Location in the Blogger Dashboard.