Add the Allinaa chatbot to a Hugo site

In Hugo the wrong way is to edit a file inside the theme, because a theme update - or a fresh clone of your repository - loses it. The right way takes the same two minutes and survives both: a partial of your own that overrides the theme's.

Before you start: copy your embed code

Create your account at bot.allinaa.com/start using your site's address. The setup wizard reads your own published pages and drafts the knowledge from them so you can edit and approve it. Step 5, "Install", shows your line with a copy button:

<script src="https://bot.allinaa.com/widget.js" data-bot-id="your-bot-id" defer></script>

Override the theme's footer partial

Hugo looks in your project's layouts/ before the theme's, so a file at the same path wins without the theme being touched at all. Most themes include a partial at the end of the body - commonly layouts/partials/footer.html. Copy the theme's version into your own layouts/partials/ directory and add the line just before the end of it.

Check your theme's documentation first, though: many themes define a "custom footer", "extra scripts" or "footer end" partial that exists precisely so you do not have to copy anything. If yours does, that is the cleanest place of all - one new file containing one line, and nothing of the theme's duplicated into your repository to drift out of date.

Why the override matters more in Hugo than elsewhere

Themes are usually pulled in as a Hugo module or a git submodule. When they are, edits inside the theme directory are not part of your repository: they disappear on a clean checkout, they are lost the moment the theme is updated, and they do not exist for your colleague or your build server. Your own layouts/ directory is yours and is committed, which is the whole reason for doing it this way rather than the quick way.

Keeping the id out of the template

If you would rather the id were not written into a layout file, put it in your site configuration as a parameter - something like allinaaBotId under params in hugo.toml - and have the partial read that parameter when it writes the tag. Hugo's with action is the usual way: it emits the tag only when the parameter has a value, so a build configuration without it produces no tag at all rather than a tag with an empty id.

The same technique drives an exclusion. Test a page-level front-matter value - chat: false, say - in an if around the tag, and set it on the pages that should be without the chat: a checkout flow, an account area, or a landing page built for one action. See where to put the chat widget for which pages those usually are.

If your theme has no footer partial

Some minimal themes put everything in the base template instead. Copy that base template into your own layouts/_default/ and add the line there, with the same reasoning: the copy is yours, committed, and unaffected by a theme upgrade. It is slightly more of the theme duplicated, so check the theme's own documentation for a hook before resorting to it.

It is not part of your asset pipeline

The widget is served from Allinaa with its own caching, so there is nothing to bundle, fingerprint or minify, and it should not be run through Hugo Pipes. Loading it from its own origin is also what lets a fix reach your visitors without you rebuilding and redeploying your site.

Check it worked

1. Build for production - hugo rather than hugo server - and serve the public/ output, because some themes include extra scripts in only one of the two modes.
2. View source on a built page and confirm the line is in the HTML with your real id.
3. Open a deep page and ask the assistant something about that page.
4. Pull a fresh clone of the repository, build it, and confirm the line is still there. That is the test that proves you did not edit the theme.

If the tag is in the source but no bubble appears, the browser console and install troubleshooting are the next stop. Then go through the launch checklist.