Skip to main content
SuperBot
Start free

custom-coded site

AI chatbot for custom websites

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.

Get started free
See pricing
  • Free forever plan
  • No credit card
  • Every feature on every plan

Install

How to add SuperBot to a custom-coded site

Two tags in the layout every page shares. Your framework never has to know about it.

  1. 01

    Get your snippet

    Sign up free; your setup page shows the snippet with your site ID already filled in.

  2. 02

    Add docs and pages

    Add the URLs of your docs, pricing, and policy pages, or paste text for anything that is not published.

  3. 03

    Paste into the base layout

    Paste the snippet just before </body> in the layout every page shares, keeping the id="superbot-web-script" tag ahead of the loader.

  4. 04

    Allow it in your CSP

    If you send a Content-Security-Policy, allow superbotapp.ai in script-src and connect-src, then deploy.

  5. 05

    Approve the first answers

    Review the first answers in Training and approve the ones you want reused.

Where it goes on your site

  1. Base layout
  2. Before </body>

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

Read the complete Custom Website install and launch guide
Paste before </body>Your account fills in the site ID
<script id="superbot-web-script"
  data-site-id="YOUR_SITE_ID"
  data-api-base="https://superbotapp.ai"></script>
<script src="https://superbotapp.ai/widget/web/superbot-web.js" async></script>

This is the whole install on a custom-coded site — your account gives you the exact snippet with your site ID.

Before you launch on custom websites

What it answers, what it hands off, what to watch.

Answers on its own

  • Product, pricing, and documentation questions from the URLs and text you add.
  • Lead capture, delivered to a webhook, Slack, or a supported CRM.
  • Bookings through a connected Calendly or Cal.com link.

Goes to your team

  • Billing disputes, bug reports, and account changes that need your team.
  • Anything outside the content you added.

Stack gotchas

  • 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.

On custom websites

What it does on a custom-coded site.

No store connection needed for any of this — it runs from the content you add, on every plan.

Every feature

Grounded answers

Answers from your own site content — with the source shown.

Trained answers first, then the pages and pasted text you added. Nothing is scraped behind a login, and the agent says so when your content has no answer.

35 languages

Speaks your visitor's language.

Detects the language and replies in it — from the same approved answers.

Bookings

Meetings, booked in chat.

Offer open times and confirm the booking without sending anyone to another page.

Leads & CRM

Every visitor can become a lead.

Capture contact details mid-conversation and send them to HubSpot, Salesforce, Pipedrive or Slack.

Shared inbox

Humans step in with full context.

Assign, prioritise and reply from one inbox — no customer repeats themselves.

Practical workflows

What the agent handles on a custom-coded site.

Docs and pricing questions

Answer plan, limit, and setup questions from the documentation pages you added, with the source shown under the reply.

Your own help button

Call window.SuperBotWidget.open() from a Contact or Help link so the chat opens where visitors already look for it.

Leads into your own systems

Send captured leads to an HTTPS webhook so they land in whatever CRM or queue your team built.

Why it works on custom websites

Why it drops into any stack.

  • 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.
  • Webhook integrations for any CRM, email tool, or internal system you run.

FAQ

Questions custom-coded site owners ask.

Something else about your setup? Talk to a human — a real person reads every message.

Will SuperBot work on my custom-coded website?

Yes. SuperBot is framework-agnostic — paste the config tag and the async loader into your base layout and it's live. No SDK, no build pipeline changes, no framework assumptions.

Can I open the chat from my own button?

Yes. Once the widget has loaded, window.SuperBotWidget.open(), window.SuperBotWidget.close(), and window.SuperBotWidget.toggle() control it from your own code.

Does it work in a single-page app?

Yes. Put the snippet in the shell or root layout. The loader runs once per page load and the widget stays mounted while your router changes views.

How does SuperBot read my custom site's content?

Add a public URL to fetch its page text, or paste text directly into a knowledge source. Automatic recurring crawls and direct file uploads are not currently offered.

Can I self-host SuperBot?

Not currently. SuperBot is a managed service; the AI infrastructure runs on our side and your site only loads the widget.

Other platforms

Same agent, other platforms.

See every platform

Start answering visitors on your custom site today.

Free forever up to 200 conversations a month. Starter is $25/month for 2,000, Pro is $60/month for unlimited — every feature is on every plan.

Get started free See full pricing