Paste the Conversa embed script in src/index.html before </body> so every route shows the chat bubble.

Embed Conversa in Angular

Angular applications are bootstrapped from src/index.html. That makes embed straightforward: paste the Conversa script just before the closing <code class="rounded bg-muted px-1 py-0.5 text-[0.95em]">&lt;/body&gt;</code> tag in that file. The widget loads on every route without extra Angular modules.

Get the script from Conversa

1. Open Bots in your Conversa dashboard.

2. Choose your bot, process your sources, and set status to ACTIVE.

3. Go to Embed and copy the install snippet.

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

Add your site hostname to allowed domains under widget settings.

Edit src/index.html

At the bottom of src/index.html, paste the tag right before </body>:

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

Run ng serve and open the app locally. Ask a question that exists in your uploaded docs to confirm retrieval works.

Angular CLI production builds

The CLI copies index.html into the build output. No extra angular.json scripts array is required for the standard embed tag. If your team uses a custom builder, keep the script in the HTML shell so it survives minification.

Lazy-loaded modules

Because the script sits in index.html, lazy routes do not need their own embed. The bubble persists across navigations like any global third-party widget.

Avoid component-only injection

Do not inject the raw script only inside a single component template unless you understand Angular’s sanitization rules-index.html before </body> is the supported path and matches how analytics tags are added.

Troubleshooting

Bubble not visible: check ACTIVE status, allowed domains, and that index.html in the deployed dist/ folder contains the tag.
Localhost vs production: allow both hostnames or use separate bots for dev and prod.
Cache: hard-refresh after deploy; purge CDN if you use one.

Angular teams ship Conversa in minutes: Embed → copy → paste before <code class="rounded bg-muted px-1 py-0.5 text-[0.95em]">&lt;/body&gt;</code> in <code class="rounded bg-muted px-1 py-0.5 text-[0.95em]">src/index.html</code>.