Add the Conversa script tag to Create React App or Vite by editing index.html-just before the closing body tag.

Embed Conversa in React

React apps still ship as HTML with a <body> element. The Conversa loader is a single script tag you copy from the dashboard-it does not require a React component wrapper. Paste it just before the closing <code class="rounded bg-muted px-1 py-0.5 text-[0.95em]">&lt;/body&gt;</code> tag so your bundle loads first and the chat bubble attaches afterward.

Get your embed code

1. Sign in to Conversa and open Bots.

2. Select your bot (or create one), add sources, and click Process.

3. Set the bot to ACTIVE and open Embed → Copy code.

You will see something like:

<script src="https://conversa.ng/widget.js" data-bot-id="YOUR_BOT_ID"></script>

Replace YOUR_BOT_ID with the id from your dashboard. Add your production domain under Customize → allowed domains.

Create React App

Open public/index.html in your project root. Scroll to the bottom and paste the snippet immediately before </body>:

  <div id="root"></div>
  <!-- Conversa widget -->
  <script src="https://conversa.ng/widget.js" data-bot-id="YOUR_BOT_ID"></script>
</body>

Restart the dev server if it is running, then open the app in a private window and test a FAQ question.

Vite + React

Vite uses the same index.html at the project root (not inside src/). Add the script before </body> there. Vite serves that file as the shell for every route during development and includes it in production builds.

Do not use `<head>` only

The Conversa loader reads data-bot-id from the script tag and appends UI to document.body. Putting the tag only in index.html’s <head> without a body context can fail on some setups. Before <code class="rounded bg-muted px-1 py-0.5 text-[0.95em]">&lt;/body&gt;</code> is the supported placement.

React Router / SPA notes

One script in index.html covers all client routes-the bubble stays mounted as users navigate. You do not need to re-inject the script per page.

Troubleshooting

No bubble: confirm bot is ACTIVE, domain is allowed, and sources are processed.
Works locally but not production: check allowed domains include your live hostname.
Cached build: hard-refresh or clear CDN cache after deploy.

That is the full React path: copy once from Embed, paste before </body>, ship.