Add an AI chat widget to any website

How to add an AI chat widget to any website

One tag in the layout every page shares and the launcher is on the whole site — a base template, a partial, a layout component, whatever each page inherits. The one rule that matters is where it sits: inside <body>, just before the closing tag. The chat loader attaches the launcher to the body the moment it runs and doesn’t retry, so in the <head>, where there is no body yet, it never appears — and nothing on the page says why.

1. In Sorraia, add the website and verify it — a DNS TXT record, or a meta tag in your homepage’s <head>. Verification is what lets you attach a widget to that site, so it comes before there is anything to paste.

2. Save the agent, then copy the snippet from the Embed code box in the right-hand panel of the chat builder. (Chat has no install wizard — the box is the whole thing.)

3. Copy the snippet from Sorraia.

4. Paste it into the one template every page inherits — the base layout, the shared footer partial, the layout component — immediately before the closing </body> tag.

5. Deploy. Do not paste it into pages one at a time.

6. Load any page and confirm the launcher appears in the corner. Anywhere inside <body> works; where you put it does not change where it lands.

Where these steps come from:¹

Worth knowing for this one

• MDN documents document.body as null when no body element exists yet — the state of the page while the browser is still reading the <head>.²
• A script placed just before </body> runs after the content above it has been parsed, with no load listener needed, which is why Sorraia’s help puts every launcher there, once, site-wide.³¹
• The agent’s crawler reads your pages’ HTML and doesn’t run JavaScript, so content a page renders only in the browser may be missed; press Re-crawl & re-index whenever the site changes.⁴