Put your assistant on your website.
One line of code adds your knowledge base assistant to any page. Visitors ask a question and get an answer from your sources, without leaving your site.
This page is the example.
The round button in the corner, the Ask button at the top and the frame further down all open the same demo assistant, loaded the way your site would load it. It answers for a made-up energy company. Its data is synthetic.
Three steps to install.
You need to be an admin of your workspace. There is no API key and nothing to build.
- 01 · Publish
Publish your assistant
In Settings, open Knowledge base and pick your assistant. Publish it, and under Share choose “Anyone with the link”.
- 02 · Copy
Copy your line
On the Setup tab, under Share, find “Add to your website” and copy the line. It already carries your assistant’s link name and color.
- 03 · Paste
Paste it into your site
Put it just before the closing body tag of every page that should have the assistant. Reload the page and the button is there.
Your line looks like this, with your own link name in place of your-slug.
<script src="https://app.tinuai.com/embed.js" data-assistant="your-slug" async></script>Or have a coding agent do it.
Paste this prompt into Claude Code, Cursor or another coding agent, in your website’s project. Put your assistant’s link name in place of your-slug first.
Add the Tinu knowledge base assistant to this website.
Assistant link name: your-slug
Replace your-slug everywhere below with the link name from Tinu (Settings > Knowledge > your assistant > Setup > Share).
What to do
1. Find the one layout or template that renders the closing </body> tag for every page (for example app/layout.tsx, pages/_document.tsx, index.html, base.html or the theme's footer template).
2. Add this line just before </body>, once:
<script src="https://app.tinuai.com/embed.js" data-assistant="your-slug" async></script>
If the framework has its own script component, use it, but the rendered <script> element must keep the data-assistant attribute.
3. If the site sends a Content-Security-Policy header or meta tag, add https://app.tinuai.com to script-src and to frame-src.
4. Open a page in the browser and check: a round button shows in the bottom right corner, clicking it opens the assistant in a panel, and the console has no "[Tinu embed]" warning and no Content-Security-Policy error.
Options (only if I ask for one)
- Side panel instead of the corner popup: add data-mode="sidebar" to the script tag.
- Open it from a button that is already on the site: add data-trigger="#the-button-id" (any CSS selector). The floating button is then not shown.
- data-color="#rrggbb" sets the button color, data-position="left" moves it to the left side, data-label="..." sets its accessible name.
- Inside the page instead of a floating panel: <iframe src="https://app.tinuai.com/base/your-slug?embed=1" title="Ask a question" allow="clipboard-write" loading="lazy" style="width: 100%; height: 640px; border: 0;"></iframe>
Rules
- Load embed.js from https://app.tinuai.com. Do not copy it into this repository or bundle it.
- There is no API key, no backend change and no package to install. Do not add any.
- Add the script once, not per page or per component.
- Keep the change to the one layout file (plus the CSP setting if there is one), and tell me which file you changed.
Reference with live examples: https://www.tinuai.com/base-demoThree ways to show it.
Each one is running on this page. The code beside it is all it takes.
Corner popup
- On this page
- The round button in the bottom right corner.
- Good for
- Every page. It stays out of the way until someone has a question.
A round button sits in a corner of the page. A click opens the assistant in a panel above it. A second click or the Esc key closes it, and the conversation is still there when it opens again.
<script src="https://app.tinuai.com/embed.js" data-assistant="your-slug" async></script>This is the line from your Setup tab. Nothing else is needed.
Inline in the page
- On this page
- The frame under the code.
- Good for
- A help or support page where the assistant is the main thing.
The assistant sits in the page like any other block. This one needs no script, only a frame. Set the height to suit your layout.
<iframe
src="https://app.tinuai.com/base/your-slug?embed=1"
title="Ask a question"
allow="clipboard-write"
loading="lazy"
style="width: 100%; height: 640px; border: 0;"
></iframe>Every setting.
They all go on the script tag. Only the first is required.
| Attribute | Values | What it does |
|---|---|---|
data-assistant | The last part of your assistant’s link, such as your-slug | Required. Which assistant to open. |
data-color | #rgb or #rrggbb | The color of the round button. The line from your Setup tab already has your assistant’s color. |
data-position | right (default) or left | The side of the page the button and the panel sit on. |
data-label | Text, up to 80 characters | The name of the button for screen readers, and its tooltip. The default is English, “Ask a question”, so set it if your site is in another language. |
data-mode | popup (default) or sidebar | A panel above the button, or a panel the full height of the page. |
data-trigger | A CSS selector, such as #ask-button | Your own button or buttons open and close the assistant. The round button is not shown. |
Good to know.
What the embed does, and what it does not.
- Public assistants only. The assistant must be published and set to “Anyone with the link”. Until then the panel says the assistant is unavailable.
- Members-only assistants. Visitors see a sign-in link in place of the assistant. The link opens in a new tab.
- Light and dark. The panel follows the visitor’s system setting, not the theme of your site.
- Phones. The popup and the side panel take the whole screen and show a close button at the top.
- What it loads. The script sets no cookies and stores nothing in the browser. With the popup and the side panel, the assistant loads only after a visitor opens it.
- One of each. The same line pasted twice adds one assistant. A popup and a side panel can share a page.
If your site has a content security policy.
Most sites need no change. If yours sends a Content-Security-Policy header, add https://app.tinuai.com to script-src and frame-src. The inline frame needs frame-src only.
script-src 'self' https://app.tinuai.com;
frame-src 'self' https://app.tinuai.com;Stuck on the install?
Send us the address of the page and what you see. We will take a look.