How to add comments to a Hostinger Website Builder blog
Add EchoThread comments to a Hostinger Website Builder blog. The Embed code element leaves the post blank — here is the snippet that works.
On this page
Why Hostinger + EchoThread
Hostinger Website Builder publishes a fast static site and a capable blog, but it ships no comment system at all — a published post is a dead end for readers who want to reply.
EchoThread adds threaded replies, emoji reactions, ML spam filtering, and sign-in with Google, GitHub, X, or Facebook. The widget is under 65 KB gzipped and loads asynchronously from a CDN, so it costs your Hostinger site nothing until a reader scrolls to it.
First: why the Embed code element leaves you with a blank space
Dropping an Embed code element onto a post and pasting the EchoThread snippet is the obvious move, and it fails in a way that hides its own cause.
The snippet is two parts: a <div id="echothread"> for the widget to mount into, and a <script> that fills it. Hostinger keeps the script and does not keep the container. The script then runs, looks for #echothread, finds nothing, and stops — silently. Open DevTools on the published post and document.getElementById('echothread') returns null.
This is not an iframe problem, and an iframe embed is not the answer. Hostinger renders the Embed element inline as an ordinary <div class="grid-embed"> in your page — which is exactly what you want. The container is simply missing. Create it in JavaScript instead, and the problem disappears.
Prerequisites
- A Hostinger Website Builder site that is published with a connected domain
- An EchoThread account — create one free
- Your site's API key from the EchoThread dashboard
Register your domain first. In the dashboard, add your domain to the EchoThread site. Comments will display without it, but EchoThread only hands a completed sign-in back to a domain you have registered — so skipping this looks like “reading works, signing in doesn't”.
Step 1 — Add the custom code
In the builder, open the … (three dots) menu and choose Integrations. Paste this into the Custom code field:
<script>
(function () {
var KEY = 'YOUR_API_KEY';
var tries = 0;
function place() {
if (document.getElementById('echothread')) return true;
// Blog posts only — Hostinger renders this header on those pages.
if (!document.querySelector('.block-blog-header')) return true;
var blocks = document.querySelectorAll('section.block');
if (blocks.length < 2) return false;
var mount = document.createElement('div');
mount.id = 'echothread';
mount.setAttribute('data-api-key', KEY);
mount.setAttribute('data-identifier', location.pathname);
mount.style.cssText = 'max-width:1224px;margin:0 auto;padding:32px 16px';
// Sit above the footer block, i.e. directly under the post body.
var footer = blocks[blocks.length - 1];
footer.parentNode.insertBefore(mount, footer);
var s = document.createElement('script');
s.src = 'https://cdn.echothread.io/widget.js';
s.async = true;
document.body.appendChild(s);
return true;
}
(function tick() {
if (place()) return;
if (++tries > 40) return;
setTimeout(tick, 250);
})();
})();
</script>
Replace YOUR_API_KEY with the public API key from your EchoThread dashboard. It is designed to live in page source — it only lets visitors read and post on your registered site.
Then publish the site. Custom code does not run in the builder preview, only on the published site.
What each part is doing
- The container is built in JavaScript rather than pasted as HTML, so there is no markup for Hostinger to drop.
- The
.block-blog-headercheck is the gate. Hostinger renders that element on blog posts and nowhere else, so your homepage, about page, and shop are skipped. Without it every static page would get its own comment thread. - Inserting before the last
section.blockplaces the widget under the post body and above your footer, inside your normal content column. - The retry loop exists because Hostinger renders post content on the client. The script may run before the post exists, so it re-checks for up to ten seconds and then gives up quietly.
data-identifieris the page path, so each post gets its own thread instead of all posts sharing one.
Step 2 — Verify it worked
Open a published blog post — not the preview — and confirm, in order:
- The comment box appears below the post and above the footer.
- In DevTools,
document.getElementById('echothread')returns an element rather thannull. - Two different posts show two different discussions.
- A static page such as your homepage shows no comment box.
- Sign-in completes and your name appears on a test comment.
If step 5 is the only failure, your domain is not registered on the EchoThread site — fix that in the dashboard.
Troubleshooting
Nothing appears, and the container is null
You are almost certainly still relying on a pasted <div id="echothread"> somewhere — in an Embed code element, or in the custom code field alongside the script. Hostinger does not keep it. Remove that leftover, use the snippet above, and let JavaScript build the container.
An old loader is still polling
If you previously added a script that waits for #echothread to appear before loading the widget, delete it. It will poll forever, because nothing ever creates that element. The snippet above replaces it entirely.
The comment box shows up on every page
The .block-blog-header check was removed or your template does not render it. Confirm the element exists on a post, and pick a different post-only selector if it does not.
Every post shows the same comments
The data-identifier line is missing, or it was set to a fixed placeholder value. It must vary per post — location.pathname does that automatically.
Comments load but sign-in does nothing
Your domain is not registered on the EchoThread site. Add it in the dashboard. EchoThread only returns a completed sign-in to a domain you have registered, so this fails closed by design.
The widget is missing after editing a post
Republish. Custom code is applied at publish time, and an unpublished edit still serves the previous build.
Frequently asked questions
Why does the Embed code element leave the widget blank?
Because the EchoThread snippet is two things — a <div id="echothread"> container and a <script> that fills it — and Hostinger does not keep the container. Paste both into the Embed element and the script survives while the div does not, so the widget has nothing to mount into and the page stays blank. The fix is to create the container in JavaScript, where it is part of the script rather than markup Hostinger can drop.
Do I need an iframe embed for Hostinger?
No — and you should not use one. Hostinger’s Embed code element renders as an ordinary <div> in your page, not an iframe, so the widget already runs on your own domain. An iframe would actively break things: the widget could not tell which post it was on, and commenter sign-in would stop working. The recipe below is all you need.
Do I have to repeat this on every blog post?
No. Custom code from Integrations runs site-wide, so one snippet covers every post you have and every post you write later. The snippet checks for Hostinger’s blog-post header before it mounts, so your homepage, about page, and shop never get a comment box.
Will each post get its own discussion?
Yes. The snippet sets data-identifier from the page path, so every post keys to its own thread. That also means renaming a post’s URL starts a fresh thread — settle your slugs before you promote a post.
Ready to add comments to your Hostinger Website Builder site?
Free for your first site. Set up in under 10 min.
Create free account