Install

Comments

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 HTML installation.

1. Create a new custom HTML/Javascript using the following steps:
   • Go to your Blogger dashboard
   • Click "Layout" button on the left sidebar
   • Click "Add a Gadget" button
   • Click "HTML/Javascript" button
   • Keep the title empty
2. 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. 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.

Newsletter Form

Follow these steps to add the newsletter form to your Blogger blog.

• Go to your Blogger dashboard
• Click "Layout" button on the left sidebar
• Click "Add a Gadget" button
• Click "HTML/Javascript" button
• Paste the following code into the "Content" field and click the "Save" button.

  <script async src="https://talk.hyvor.com/embed/newsletter.js" type="module"></script>
  <hyvor-talk-newsletter website-id="YOUR_WEBSITE_ID"></hyvor-talk-newsletter>

Memberships

Follow these steps to add Paid Membershipis to your Blogger blog.

1. • Go to your Blogger dashboard
   • Click "Layout" button on the left sidebar
   • Click "Add a Gadget" button
   • Click "HTML/Javascript" button
   • Paste the following code into the "Content" field and click the "Save" button.

     <script async src="https://talk.hyvor.com/embed/memberships.js" type="module"></script>
     <hyvor-talk-memberships
     	website-id="YOUR_WEBSITE_ID"
     ></hyvor-talk-memberships>

2. Then, you can add gated content to your blog posts the same way:

   <hyvor-talk-gated-content
       key="your-key"
   ></hyvor-talk-gated-content>

   If you wish to add gated content to a specific post, switch to the HTML View in the post editor and paste the code where you want the gated content to appear.