Add the Allinaa chatbot to a React or Next.js app
Written by the Allinaa team · Updated
There is no Allinaa package to install from npm, and none is needed: the assistant is one script tag, and a React or Next.js app has exactly one place that wraps every route. Put the tag there once. This guide explains where that place is in each setup, why the tag keeps working when the framework renders it, and how the assistant follows client-side navigation.
Where the tag goes
| Setup | Where to put the tag |
|---|---|
| React single-page app (Vite, Create React App or similar) | In the app's index.html, just before the closing body tag. |
| Next.js with the app router | In the root layout, inside the body, so every route renders it. |
| Next.js with the pages router | In the custom document, inside the body. |
| Any framework with a single HTML shell | In that shell, before the closing body tag. |
Get your code
You need your own code first. Sign up at bot.allinaa.com/start for the 14-day free trial, confirm your e-mail and follow the setup wizard; step 5, "Install", shows one line:
<script src="https://bot.allinaa.com/widget.js" data-bot-id="your-bot-id" defer></script>Step by step
- Paste the tag into the file from the table, keeping the
src, thedata-bot-idattribute anddeferexactly as they are. - In JSX, write the attributes as they are:
data-bot-idis a plain data attribute and passes through unchanged. If you use Next.js's script component instead of a plain tag, keep thedata-bot-idattribute on it. - Build and deploy, then open a few routes to see the button on each.
Why a framework-rendered tag works
The widget reads its own tag to learn your bot id: the script element being executed, or, when a framework inserted the tag in a way that hides that, the script tag on the page that carries data-bot-id. Either way one tag is enough, and one tag is also the maximum: render it once in the shell, not inside a component that mounts on several routes.
Client-side navigation
The assistant follows route changes in a single-page app, so it knows which page the visitor is viewing and its page-aware answers stay current without a full reload; the page-aware answers page explains what it reads and what it skips. The conversation continues across routes and return visits.
Content Security Policy
If your app sends a CSP header, allow scripts from and requests to https://bot.allinaa.com. The browser console names the rule that blocked the assistant otherwise. The tag itself holds no secret, only the script address and your public bot id.
Check the installation
Open the live site in a private window and look for the button; then click Check my site in your cabinet, which reads the homepage and up to two pages it links to. If the button is there but the check says not found, the pages it read are probably cached or the code sits on pages it did not open; the status turns to installed anyway once the assistant loads on any page of your site.
Static exports of a Next.js site are covered by the GitHub Pages and static sites guide; general causes by the troubleshooting page.
Frequently asked questions
Is there an npm package for Allinaa?
No. The one script tag in the HTML shell is the whole integration.
Where does the tag go in Next.js?
In the root layout (app router) or the custom document (pages router), inside the body.
Does the chatbot follow client-side route changes?
Yes. It knows which page the visitor is on and keeps the conversation across routes.
Can I render the tag with Next.js's script component?
Yes, as long as the data-bot-id attribute stays on it; the widget finds the tag by that attribute.