SuperBot for Custom Website

01

What SuperBot does on Custom Website

Hand-built on Next.js, Astro, Rails, or plain HTML? SuperBot is two script tags in your base layout: a config tag carrying your site ID and an async loader. No npm package, no SDK, no build step, and a small JavaScript API if you want your own buttons to open the chat.

• Framework-agnostic: works with Next.js, Remix, Astro, Hugo, Eleventy, Rails, plain HTML, anything that serves a page.
• No SDK, no npm package, no build-step changes. Just one async <script> tag and a config tag.
• window.SuperBotWidget.open(), close(), and toggle() let your own buttons drive the chat.
• Custom or removable badge branding on Starter and Pro keeps your design fully yours.

02

Before you install

The quality of the first answers depends on what a visitor can already read on your site, so publish your current shipping, returns, and contact information before training the agent. Have your site URL and one test page ready.

• Use the site that should be connected to this SuperBot workspace, not a staging copy.
• Check that your policy and product pages are written for customers rather than internal staff.
• Decide where escalations should land: the SuperBot inbox, Slack, or your existing support process.
• Copy the exact snippet from your SuperBot dashboard so the site ID routes conversations to the right workspace.

03

Install SuperBot on Custom Website

Immediately before </body> in the layout or HTML template every page shares, with the config tag before the async loader.

• Sign up free; your setup page shows the snippet with your site ID already filled in.
• Add the URLs of your docs, pricing, and policy pages, or paste text for anything that is not published.
• Paste the snippet just before </body> in the layout every page shares, keeping the id="superbot-web-script" tag ahead of the loader.
• If you send a Content-Security-Policy, allow superbotapp.ai in script-src and connect-src, then deploy.
• Review the first answers in Training and approve the ones you want reused.

04

Check that it is live

Open your site in a private window rather than the editor or preview, because most platforms only serve custom code on the published site. The launcher should appear in the lower corner within a second or two.

• Load a real published URL, not an editor preview or a password-protected page.
• Open the launcher and send a question you know the answer to, then confirm the reply cites your own content.
• Check one product or interior page as well as the home page, since templates can differ.
• If you run several languages or store views, check one page in each.

05

If the widget does not appear

Almost every failed install is one of four things: the change was never published, a cache is still serving the old page, the snippet carries the wrong site ID, or another script is stripping it.

• A strict Content-Security-Policy needs script-src and connect-src entries for superbotapp.ai.
• In a single-page app, put the snippet in the shell or root layout rather than a route component. The loader starts only once per page load, so a re-render never creates a second widget.
• Keep the config tag's id as superbot-web-script; that id is how the loader finds your site ID.
• The widget waits for DOMContentLoaded, so the snippet also works in <head>. The end of <body> keeps it clear of your own scripts.
• Open your browser console and look for a blocked request to superbotapp.ai, which points at a Content-Security-Policy or an ad blocker.
• Confirm the site ID in the snippet matches the workspace you are looking at in the dashboard.

06

Train and test before you send traffic

Approve a small, representative set of answers before the widget meets real customers. Test the questions that normally create tickets or stop a purchase, and correct the wording once so every later answer inherits it.

• Start with the ten questions your team answers most often.
• Check that policy answers link to the live page that supports them.
• Add a trained answer for anything the agent gets wrong rather than editing the source page twice.
• Decide what should escalate immediately — refunds, complaints, anything account-specific.

Common questions