🅰️Angular Integration Guide

Add an AI chatbot to your Angular app via index.html or programmatic injection with Renderer2.

1Option A: Add to src/index.html (simplest)

Open src/index.html and paste the embed script before the closing </body> tag. This is the fastest approach and works without any Angular-specific code.

2Option B: Programmatic injection with Renderer2

For Angular best practices, inject the script programmatically using Renderer2 in your AppComponent. This avoids direct DOM manipulation and works correctly with server-side rendering.

3Replace YOUR_BOT_ID

Replace the placeholder YOUR_BOT_ID with your actual bot ID from the BotEmbed.ai dashboard.

4Serve your app to verify

Run ng serve and open your app in the browser to confirm the chat widget appears.

Code Examples

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Angular App</title>
  <base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
  <app-root></app-root>

  <!-- BotEmbed.ai Chat Widget -->
  <script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>
</body>
</html>

src/app/app.component.ts

import { Component, OnInit, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent implements OnInit {
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit(): void {
    const script = this.renderer.createElement('script');
    this.renderer.setAttribute(
      script,
      'src',
      'https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID'
    );
    this.renderer.setAttribute(script, 'data-theme', 'light');
    this.renderer.setAttribute(script, 'data-position', 'bottom-right');
    this.renderer.appendChild(this.document.body, script);
  }
}

Tips

Option A (index.html) is simpler and works for most Angular applications.

Option B (Renderer2) follows Angular best practices by avoiding direct DOM access, which is important if you use Angular Universal for server-side rendering.

The Renderer2 approach uses dependency injection for the Document object, making it testable and SSR-compatible.

The widget persists across Angular route changes since it is appended to the body, outside the Angular component tree.

Previous💚 Vue / Nuxt