How to add an AI chatbot to any website (HTML, React, and more)

Supportweave is a single, framework-agnostic script, so it drops into any site: static HTML, a templating engine, or a JavaScript framework like React, Vue, or Next.js. Here's the universal approach.

What you'll need

• A Supportweave workspace (set up during your demo)
• Your embed snippet from the Install tab
• Access to your site's HTML or root template

Step 1: Copy your embed snippet

In Supportweave, open your chatbot → Install tab and copy the script:

<script
  src="https://app.supportweave.com/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

Step 2: Paste it before </body>

1. 1Open your site's HTML file, or your framework's root layout/template.
2. 2Paste the snippet just before the closing </body> tag.
3. 3Deploy your site.

Using a JavaScript framework?

For single-page apps (React, Vue, Angular, Svelte, Next.js, etc.), add the snippet once in your root layout or document template so it loads on every route. The script is async, so it won't block rendering, and it injects the floating chat bubble automatically.

Prefer an inline search box?

If you'd rather embed an AI search bar in the page than a floating bubble, copy the inline-search variant from the Install tab and drop its target element where you want it to appear.

One line, any stack, your AI agent is live. See platform-specific guides on our integrations page.