Add AI chat to static site generators

Installation steps

1. 1

   Prepare

   Choose the shared base template that emits the pages where chat should appear.

2. 2

   Configure

   Add the loader using the framework example below; for Astro preserve the is:inline attribute.

   <script src="https://mivochat.app/widget.js" data-site="YOUR_SITE_KEY" async></script>

   Copy
3. 3

   Publish

   Build and inspect generated HTML for widget.js, deploy, and allow the final production origin in MivoChat.

4. 4

   Verify

   Test two published routes, a question answered from the website, and the team handoff.

Hugo: add a partial to the base template

Put the tag in a reusable partial and call it near the end of layouts/_default/baseof.html or the base template that actually renders your public pages. Confirm the active theme's block structure; an unused base template will not be emitted.

A partial keeps the site key and script in one place. Build the site and search public/ for widget.js before deployment.

<script src="https://mivochat.app/widget.js" data-site="YOUR_SITE_KEY" async></script>

{{ partial "mivochat.html" . }}

Jekyll: include from the default layout

Create _includes/mivochat.html, then include it from _layouts/default.html near the closing body tag. Layout inheritance matters: pages using another layout should ultimately extend the default layout or the loader will be missing.

Rebuild locally and inspect the generated _site output, then deploy the same build configuration you tested.

<script src="https://mivochat.app/widget.js" data-site="YOUR_SITE_KEY" async></script>

{% include mivochat.html %}

Astro: keep the script inline

Add the loader in the shared .astro layout after the page slot. Astro treats script elements as module scripts by default; is:inline preserves this external loader and its data attribute as written.

Avoid placing the snippet in a page component that runs more than once through client navigation. Build the project and inspect a generated HTML file for the expected URL and site key.

---
// src/layouts/Layout.astro
---
<html lang="en">
  <body>
    <slot />
    <script is:inline src="https://mivochat.app/widget.js" data-site="YOUR_SITE_KEY" async></script>
  </body>
</html>

Eleventy: include from the base layout

Create an include in the project's configured includes directory and include it from the Nunjucks or Liquid base layout. Eleventy projects can customize directory names, so use the configured paths rather than assuming _includes is active.

Keep the include in the layout shared by intended pages, run the Eleventy build, and search _site or the configured output directory for the loader before publishing.

<script src="https://mivochat.app/widget.js" data-site="YOUR_SITE_KEY" async></script>

{% include "mivochat.njk" %}

Before you change the setup

Who this is for

a developer publishing pages through Hugo, Jekyll, Astro, or Eleventy

What you need

the source repository, public site key, active layout chain, and final deployment hostname

Where it goes

the shared base layout: Hugo layouts/partials and baseof, Jekyll _includes and _layouts/default.html, Astro layout, or Eleventy base layout

Watch out for

An unused or overridden base template will not emit the loader, so verify generated output

Test the support boundary

• Does every intended output page contain exactly one loader?
• Does Astro preserve the external script with is:inline?
• Do deployed docs and pricing questions resolve from public pages?

Related guidance

For framework-specific app shells see /guides/install-any-framework; for a plain HTML page see /guides/html.

Frequently asked questions