Add the Allinaa chatbot to an Astro site

In Astro the answer is a one-line addition to the layout every page already uses. Because the widget is a plain external script rather than a component, it needs none of Astro's hydration machinery - which is also the reason it does not affect your island strategy or your build output size.

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>

Where it goes: your base layout

Almost every Astro project has a layout component that wraps the pages - commonly src/layouts/Layout.astro or BaseLayout.astro. Open it, find the closing </body>, and put the line just before it:

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

If your project has more than one layout - a docs layout and a marketing layout, say - add it to each one you want the chat on, or better, have them share a single base layout and add it once there. One place is always easier to keep right than four.

Astro and script processing: why this one is left alone

Astro processes and bundles <script> tags it considers its own. A script with a src pointing at another origin is not bundled or transformed - it is emitted as written and loaded by the browser. That is what you want here: the widget is served from Allinaa with its own caching, so bundling it into your build would only tie it to your deploys. If you have a reason to be explicit about it, Astro's is:inline directive on the tag tells the compiler to leave it exactly as typed.

Excluding pages

If some routes should not carry the chat - a checkout flow, an account area, a landing page built for one action - the simplest approach is a second layout without the line, used by those routes. The alternative is a prop on the base layout:

const { chat = true } = Astro.props;
...
{chat && <script src="https://bot.allinaa.com/widget.js" data-bot-id="your-bot-id" defer />}

Then pass chat={false} from the pages that should not have it. See where to put the chat widget for which pages those usually are.

View transitions and client-side routing

If you use Astro's view transitions, the page does not fully reload between navigations. The widget handles navigation within a site and keeps the conversation going across pages, which is the behaviour you want - a visitor who asks a question on one page and moves to another does not start again. Worth testing on your own site: navigate between two pages mid-conversation and check the thread is still there.

Check it worked

1. Run your production build and preview it, not just the dev server.
2. View source on a built page and confirm the line is in the HTML.
3. Open a deep page and ask the assistant something about that page.
4. Check any route you excluded really has no bubble.

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