Live Chat for Static Sites
Chat is the one thing a static site can't do on its own. This is a script tag — no backend, no database, no serverless function.
~15KB, zero cookies, loads deferred. Copy-paste install for Astro, Hugo, Eleventy, Jekyll, Docusaurus, Framer and Carrd.
Why static sites need a different chat widget
You picked a static site generator for speed, and then every chat tool on the market asks you to add 200KB+ of JavaScript to the page. That is the whole trade-off, and it is avoidable.
Nothing to host
No backend, no database, no serverless function, no environment variables. The widget talks to our servers directly — your site stays a folder of HTML.
Does not touch your build
One script tag in your layout. No npm dependency, no build plugin, no config to keep in sync, nothing that breaks on the next major version.
~15KB, deferred
10–20x smaller than typical chat tools and it loads after your content, so your Lighthouse score stays where you worked to get it.
No cookie banner
Zero cookies and no tracking. Static sites often have no consent banner at all — adding chat should not be the thing that changes that.
The snippet
Every install below is this one tag, placed before your closing </body>. Grab your Site ID from the dashboard first — YOUR_SITE_ID is a placeholder, not a real site.
<script src="https://api.ghostchat.dev/widget.js" data-site="YOUR_SITE_ID" defer></script>Live chat for Astro
Add it to your shared layout, just before the closing </body> tag.
<body>
<slot />
<script is:inline src="https://api.ghostchat.dev/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>The is:inline directive matters here — without it Astro tries to bundle and process the script at build time, which breaks a third-party tag. With it, Astro leaves the tag exactly as written.
Live chat for Hugo
Copy your theme’s baseof.html into layouts/_default/ (Hugo will prefer yours), then add the tag before </body>.
{{ block "main" . }}{{ end }}
<script src="https://api.ghostchat.dev/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>Some themes expose a hook partial instead — if yours has layouts/partials/extend_footer.html, drop the script there and leave baseof.html untouched so theme updates keep working.
Live chat for Eleventy (11ty)
Add it to your base layout so every page inherits it.
{{ content | safe }}
<script src="https://api.ghostchat.dev/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>
</html>Works the same in Liquid, Handlebars or plain HTML layouts — it's a literal script tag, so no template syntax is involved and nothing needs escaping.
Live chat for Jekyll (and GitHub Pages)
Add it to your default layout before </body>.
{{ content }}
<script src="https://api.ghostchat.dev/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>
</html>If you're on a remote theme like Minima, create _includes/custom-footer.html (or copy the layout into your repo) so the change survives a theme bump. No plugins needed, which keeps it GitHub Pages compatible.
Live chat for Docusaurus
No layout editing needed — Docusaurus has a config field for third-party scripts.
module.exports = {
// ...
scripts: [
{
src: 'https://api.ghostchat.dev/widget.js',
'data-site': 'YOUR_SITE_ID',
defer: true,
},
],
};Docusaurus injects this on every docs page. Pairs well with the AI assistant — it can answer from your docs and hand off to you when it can't.
Live chat for Framer
Framer has a custom-code panel, so there is no file to edit: Site Settings → General → Custom Code → End of <body> tag.
<script src="https://api.ghostchat.dev/widget.js" data-site="YOUR_SITE_ID" defer></script>Publish the site after saving — custom code only ships on publish, not on preview.
Live chat for Carrd
Add an Embed element (or use Settings → Code) and paste the tag as raw code.
<script src="https://api.ghostchat.dev/widget.js" data-site="YOUR_SITE_ID" defer></script>Custom code on Carrd requires a Pro plan — that's a Carrd limitation, not ours. On the free tier there's no way to inject a third-party script.
Using something else?
If you can put a script tag before the closing </body> tag, it works. That includes Gatsby, SvelteKit, Nuxt, VitePress, Zola, Pelican, Middleman, Publii and plain hand-written HTML. For Next.js specifically we have a dedicated guide: Next.js.
Common Questions
Can you have live chat on a static site without a backend?
Yes. The chat widget is a single script tag that talks to our servers directly — your site stays fully static. There is nothing to host, no database to run, no serverless function to deploy, and no build step to change.
Will a chat widget hurt my static site’s performance?
That is the usual trade-off, and it is why this page exists. Most chat widgets are 200KB+, which undoes the reason you chose a static site generator. GhostChat is ~15KB and loads deferred, so it never blocks render or drags down Core Web Vitals.
Do I need a cookie consent banner?
No. The widget sets zero cookies and does no tracking. If your static site does not need a consent banner today, adding chat keeps it that way.
Where do the messages go?
To your email, threaded like a normal conversation — you can reply straight from Gmail without opening a dashboard. There is also a web dashboard and an AI assistant that can answer common questions for you 24/7.
My generator is not listed. Will it still work?
Almost certainly. If you can add a script tag before the closing body tag of your HTML, the widget works. That covers Gatsby, SvelteKit, Nuxt, VitePress, Zola, Pelican, Middleman, Publii and plain hand-written HTML.
Now with a built-in AI chatbot. GhostChat can auto-answer your visitors’questions 24/7 from your FAQ knowledge base — and hand off to you when it doesn't know. See the AI chatbot →
Add chat to your static site
One script tag, about two minutes. No credit card required.