How to Embed a Chatbot in an Angular Application: Complete Tutorial

Angular is the framework of choice for enterprise applications, powering complex dashboards, internal tools, and customer-facing portals at companies from Google to Deutsche Bank. According to the Stack Overflow 2025 Developer Survey, Angular maintains a 17 percent market share among web frameworks, with disproportionate representation in enterprise and large-scale applications where TypeScript-first development, dependency injection, and opinionated architecture patterns are valued.

Embedding a chatbot in an Angular application is fundamentally different from embedding one in a React or vanilla JavaScript project. Angular's architecture -- Zone.js change detection, hierarchical dependency injection, NgModule-based code organization, ahead-of-time compilation, and strict TypeScript typing -- creates specific requirements and opportunities that generic chatbot installation guides ignore.

The most impactful difference is Zone.js. Angular's change detection system uses Zone.js to automatically detect when asynchronous operations complete and trigger view updates. Chatbot widgets create multiple asynchronous operations (WebSocket connections, HTTP polling, animation timers) that Zone.js intercepts by default, causing unnecessary change detection cycles that degrade application performance. A naive chatbot integration can increase change detection frequency by 5 to 10x, introducing perceptible lag in complex Angular applications. This guide shows you how to run chatbot operations outside Angular's zone to eliminate this performance penalty entirely.

This tutorial covers three integration approaches -- angular.json script loading, custom directive, and feature-module encapsulation -- with full TypeScript interfaces, RxJS observable patterns for real-time messaging, lazy-loading strategies for bundle optimization, and Angular Universal (SSR) compatibility. Every code example uses Angular 17+ standalone components (with NgModule equivalents noted), strict TypeScript, and follows the official Angular style guide.

For teams that have not yet selected a chatbot platform, our chatbot technology stack guide covers platform selection criteria. For React integration, see our companion React chatbot embedding guide. For non-framework websites, our general chatbot installation guide covers vanilla HTML, WordPress, Shopify, and other platforms.

The fastest way to add a chatbot to an Angular application is through the angular.json (or project.json for Nx workspaces) scripts array. This approach loads the chatbot script globally, making it available on every page of your application without any component-level code.

Step 1: Add Script to angular.json

Open your angular.json file and add the chatbot script to the scripts array under your project's build configuration:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              {
                "input": "https://app.conferbot.com/widget/YOUR_BOT_ID.js",
                "inject": true,
                "bundleName": "chatbot"
              }
            ]
          }
        }
      }
    }
  }
}

The bundleName property creates a separate chunk for the chatbot script, keeping it isolated from your application bundle. The inject: true setting adds the script tag to your index.html automatically during the build.

Step 2: Declare Global Types

Since the chatbot script adds a global object to window, declare its TypeScript interface to enable type-safe access throughout your Angular application:

// src/types/chatbot.d.ts
interface ChatbotAPI {
  open(): void;
  close(): void;
  toggle(): void;
  sendMessage(message: string): void;
  setUser(user: ChatbotUser): void;
  setContext(context: Record<string, unknown>): void;
  destroy(): void;
  on(event: ChatbotEvent, callback: (data: unknown) => void): void;
  off(event: ChatbotEvent, callback: (data: unknown) => void): void;
}

interface ChatbotUser {
  id: string;
  name?: string;
  email?: string;
  plan?: string;
  [key: string]: unknown;
}

type ChatbotEvent = 'open' | 'close' | 'message' | 'leadCapture' | 'error';

interface Window {
  Conferbot?: ChatbotAPI;
}

Add this file to your tsconfig.app.json includes or reference it with a triple-slash directive. Now window.Conferbot is fully typed throughout your application -- your IDE provides autocomplete and type checking for every chatbot API call.

Step 3: Restart the Dev Server

Changes to angular.json require a dev server restart (ng serve does not hot-reload angular.json changes). After restart, the chatbot widget should appear on your application.

For a broader view of chatbot platform options, see our comparison hub.

Limitations of This Approach

The angular.json method is quick but limited. The chatbot loads on every page regardless of route, cannot be conditionally displayed without additional code, runs inside Angular's zone (performance impact), and offers no lifecycle management. For production applications, the custom directive or feature module approaches described in the following sections provide better control.

Angular directives are the idiomatic way to manage DOM interactions and third-party widget lifecycles. A custom chatbot directive handles script loading, initialization, cleanup, and Zone.js optimization in a reusable, testable unit.

Creating the Chatbot Directive

// chatbot.directive.ts
import { Directive, Input, OnInit, OnDestroy, NgZone, inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Directive({
  selector: '[appChatbot]',
  standalone: true,
})
export class ChatbotDirective implements OnInit, OnDestroy {
  @Input('appChatbot') botId!: string;
  @Input() chatbotPosition: 'bottom-right' | 'bottom-left' = 'bottom-right';
  @Input() chatbotGreeting?: string;

  private ngZone = inject(NgZone);
  private document = inject(DOCUMENT);
  private scriptElement?: HTMLScriptElement;

  ngOnInit(): void {
    this.ngZone.runOutsideAngular(() => {
      this.loadChatbotScript();
    });
  }

  ngOnDestroy(): void {
    this.cleanup();
  }

  private loadChatbotScript(): void {
    if (this.document.getElementById('cb-widget-script')) return;

    this.scriptElement = this.document.createElement('script');
    this.scriptElement.id = 'cb-widget-script';
    this.scriptElement.src = `https://app.conferbot.com/widget/${this.botId}.js`;
    this.scriptElement.async = true;
    this.document.body.appendChild(this.scriptElement);
  }

  private cleanup(): void {
    window.Conferbot?.destroy();
    this.scriptElement?.remove();
  }
}

The key line is this.ngZone.runOutsideAngular(). This tells Angular to execute the chatbot script loading and all its subsequent asynchronous operations (WebSocket connections, timers, HTTP requests) outside Zone.js monitoring. Without this, every chatbot WebSocket message and animation frame would trigger a full change detection cycle across your entire application.

Using the Directive

Apply the directive to any host element (typically in your root component or layout):

<div [appChatbot]="'YOUR_BOT_ID'" chatbotPosition="bottom-right"></div>

For conditional display based on route or authentication:

<div *ngIf="showChatbot" [appChatbot]="botId"></div>

When showChatbot becomes false, Angular destroys the directive, triggering ngOnDestroy which calls the cleanup method to remove the chatbot widget and script. When it becomes true again, the directive reinitializes. This lifecycle management is automatic and memory-safe.

Extending the Directive With Event Outputs

Add Angular event outputs to bridge chatbot events into the Angular event system:

@Output() chatOpened = new EventEmitter<void>();
@Output() chatClosed = new EventEmitter<void>();
@Output() leadCaptured = new EventEmitter<ChatbotUser>();

private setupEventListeners(): void {
  window.Conferbot?.on('open', () => {
    this.ngZone.run(() => this.chatOpened.emit());
  });
  window.Conferbot?.on('leadCapture', (data) => {
    this.ngZone.run(() => this.leadCaptured.emit(data as ChatbotUser));
  });
}

Notice the this.ngZone.run() wrapper on the event emissions. Since chatbot events fire outside Angular's zone (because we loaded the script outside the zone), we must re-enter the zone when we need Angular to detect the event and update the view. This selective zone re-entry is the optimal pattern: chatbot internal operations run outside the zone (no unnecessary change detection), but application-relevant events re-enter the zone (Angular updates the view correctly).

Angular's dependency injection system and RxJS observables are the natural patterns for managing chatbot state and events across your application. A dedicated ChatbotService encapsulates all chatbot interactions behind a clean, injectable API.

The ChatbotService

// chatbot.service.ts
import { Injectable, NgZone, inject } from '@angular/core';
import { BehaviorSubject, Observable, Subject, fromEvent, filter } from 'rxjs';
import { DOCUMENT } from '@angular/common';

export interface ChatMessage {
  id: string;
  text: string;
  sender: 'user' | 'bot';
  timestamp: Date;
}

@Injectable({ providedIn: 'root' })
export class ChatbotService {
  private ngZone = inject(NgZone);
  private document = inject(DOCUMENT);

  private isOpenSubject = new BehaviorSubject<boolean>(false);
  private messagesSubject = new BehaviorSubject<ChatMessage[]>([]);
  private leadCapturedSubject = new Subject<ChatbotUser>();
  private initialized = false;

  readonly isOpen$: Observable<boolean> = this.isOpenSubject.asObservable();
  readonly messages$: Observable<ChatMessage[]> = this.messagesSubject.asObservable();
  readonly leadCaptured$: Observable<ChatbotUser> = this.leadCapturedSubject.asObservable();

  initialize(botId: string): void {
    if (this.initialized) return;
    this.ngZone.runOutsideAngular(() => {
      this.loadScript(botId);
      this.initialized = true;
    });
  }

  open(): void { window.Conferbot?.open(); }
  close(): void { window.Conferbot?.close(); }
  sendMessage(text: string): void { window.Conferbot?.sendMessage(text); }

  setUser(user: ChatbotUser): void {
    window.Conferbot?.setUser(user);
  }

  setPageContext(context: Record<string, unknown>): void {
    window.Conferbot?.setContext(context);
  }

  private loadScript(botId: string): void {
    if (this.document.getElementById('cb-script')) return;
    const script = this.document.createElement('script');
    script.id = 'cb-script';
    script.src = `https://app.conferbot.com/widget/${botId}.js`;
    script.async = true;
    script.onload = () => this.bindEvents();
    this.document.body.appendChild(script);
  }

  private bindEvents(): void {
    window.Conferbot?.on('open', () => {
      this.ngZone.run(() => this.isOpenSubject.next(true));
    });
    window.Conferbot?.on('close', () => {
      this.ngZone.run(() => this.isOpenSubject.next(false));
    });
    window.Conferbot?.on('leadCapture', (data: unknown) => {
      this.ngZone.run(() => this.leadCapturedSubject.next(data as ChatbotUser));
    });
  }

  destroy(): void {
    window.Conferbot?.destroy();
    this.document.getElementById('cb-script')?.remove();
    this.initialized = false;
  }
}

The service exposes chatbot state as RxJS observables (isOpen$, messages$, leadCaptured$), enabling any component to subscribe to chatbot events using standard Angular patterns like the async pipe in templates.

Consuming the Service in Components

@Component({
  template: `
    <span class="badge" *ngIf="(chatService.isOpen$ | async) === false">
      Chat with us
    </span>
    <button (click)="chatService.open()">Help</button>
  `,
})
export class HeaderComponent {
  chatService = inject(ChatbotService);
}

The async pipe automatically subscribes and unsubscribes from the observable, preventing memory leaks. Any component anywhere in the application can inject ChatbotService and interact with the chatbot through the same typed API.

Integration With Angular Router

Use Angular's Router events observable to update chatbot context on navigation:

// In AppComponent or a dedicated route-watcher service
constructor(
  private router: Router,
  private chatbot: ChatbotService
) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    this.chatbot.setPageContext({ path: event.urlAfterRedirects });
  });
}

This keeps the chatbot informed about which page the user is viewing, enabling context-aware responses (pricing questions on the pricing page, support questions on the docs page) without any manual per-route configuration. For chatbot configuration on specific platforms, see our Squarespace guide and Shopify guide. For more on page-context-aware chatbot strategies, see our conversation design masterclass.

Zone.js is Angular's secret weapon for automatic view updates -- and the primary performance concern when integrating third-party widgets like chatbots. Understanding this mechanism is critical for building performant Angular applications with embedded chatbots.

The Problem: Chatbot Operations Trigger Change Detection

As documented in the Zone.js package documentation, Zone.js patches all browser asynchronous APIs: setTimeout, setInterval, Promise, XMLHttpRequest, fetch, WebSocket, requestAnimationFrame, addEventListener, and more. When any patched operation completes, Zone.js notifies Angular, which runs change detection across your entire component tree.

A typical chatbot widget creates: a WebSocket connection (messages every few seconds for typing indicators and presence), animation frame requests (smooth scroll, message animations), polling intervals (connection health checks), and event listeners (click, scroll, resize). Without optimization, each of these operations triggers Angular's change detection -- potentially hundreds of extra cycles per minute in an active chat session. For complex Angular applications with deep component trees, each unnecessary cycle costs 5 to 50ms of main thread time.

The Solution: runOutsideAngular

The NgZone.runOutsideAngular() method executes code in a child zone that Angular does not monitor. Asynchronous operations initiated inside this zone do not trigger change detection:

// All chatbot async operations run outside Angular's zone
this.ngZone.runOutsideAngular(() => {
  this.loadChatbotScript(); // Script load: outside zone
  // WebSocket: outside zone
  // Animations: outside zone
  // Timers: outside zone
});

When you need Angular to react to a chatbot event (for example, updating a notification badge when a new message arrives), selectively re-enter the zone:

// Only specific events re-enter Angular's zone
window.Conferbot?.on('message', (msg) => {
  this.ngZone.run(() => {
    this.unreadCount++; // Change detection runs for this update only
  });
});

Measuring the Impact

Use Angular DevTools (browser extension) to measure change detection frequency before and after optimization:

The reduction is dramatic. In the worst case (active chat with animations), unoptimized integration triggers over 1,200 change detection cycles per minute. With runOutsideAngular, this drops to the application's baseline 60 cycles per minute, with additional cycles only when chatbot events that affect the Angular view fire. According to the Angular change detection documentation, minimizing unnecessary change detection cycles is one of the most impactful performance optimizations for Angular applications.

OnPush Change Detection Strategy

Components that display chatbot state should use ChangeDetectionStrategy.OnPush for additional optimization. OnPush components only re-render when their input references change or when an observable emits through the async pipe -- perfect for RxJS-based chatbot state management:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<span>{{ unreadCount$ | async }} new messages</span>`
})
export class ChatBadgeComponent {
  unreadCount$ = inject(ChatbotService).messages$.pipe(
    map(messages => messages.filter(m => !m.read).length)
  );
}

The combination of runOutsideAngular for chatbot initialization and OnPush for consuming components creates the optimal performance profile: zero unnecessary change detection from chatbot operations, with precise, minimal view updates when chatbot state that the user can see actually changes.

Angular's module-based architecture and built-in lazy loading provide powerful tools for deferring chatbot code until it is needed. This reduces initial bundle size, improves Time to Interactive, and ensures the chatbot does not impact your application's critical rendering path.

Approach 1: Lazy-Loaded Feature Module (NgModule)

Encapsulate the chatbot in a dedicated feature module that loads only when navigated to or triggered by user interaction:

// chatbot.module.ts
@NgModule({
  declarations: [ChatbotContainerComponent],
  imports: [CommonModule],
  exports: [ChatbotContainerComponent],
})
export class ChatbotModule {
  static forRoot(config: ChatbotConfig): ModuleWithProviders<ChatbotModule> {
    return {
      ngModule: ChatbotModule,
      providers: [
        { provide: CHATBOT_CONFIG, useValue: config },
        ChatbotService,
      ],
    };
  }
}

Register the lazy route in your app routing:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./chatbot/chatbot.module').then(m => m.ChatbotModule),
  }
];

Approach 2: Standalone Component With @defer (Angular 17+)

Angular 17 introduced the @defer block for fine-grained lazy loading at the template level. This is the modern, preferred approach for lazy-loading chatbot components:

// In your app.component.html
@defer (on idle) {
  <app-chatbot-widget [botId]="botId" />
} @placeholder {
  <!-- Nothing visible until chatbot loads -->
} @loading (minimum 0ms) {
  <!-- Optional: subtle loading indicator -->
}

The on idle trigger tells Angular to load the chatbot component only when the browser is idle (using requestIdleCallback). This ensures the chatbot never competes with critical application rendering for main thread time. Other trigger options include on viewport (load when a placeholder enters the viewport), on interaction (load when the user clicks a trigger element), and on timer(3s) (load after a 3-second delay).

Approach 3: Dynamic Component Loading

For programmatic control over when the chatbot loads (for example, loading it only after user authentication), use Angular's dynamic component creation:

@Component({ ... })
export class AppComponent {
  private viewContainer = inject(ViewContainerRef);

  async loadChatbot(): Promise<void> {
    const { ChatbotWidgetComponent } = await import('./chatbot/chatbot-widget.component');
    this.viewContainer.createComponent(ChatbotWidgetComponent);
  }
}

Call loadChatbot() when authentication completes, after a user interaction, or based on any application-specific condition. The chatbot code is not included in the initial bundle and downloads only when explicitly requested.

Bundle Impact Analysis

For production applications, @defer (on idle) is the recommended strategy. It provides zero initial bundle impact, automatic loading during browser idle time, and no user-visible delay. The chatbot is typically ready within 1 to 3 seconds of page load -- before most users are ready to start a conversation.

Angular's TypeScript-first philosophy means every chatbot interaction should be strongly typed. Well-defined interfaces prevent runtime errors, improve IDE support, and serve as living documentation for your chatbot integration.

Core Interfaces

// models/chatbot.models.ts

export interface ChatbotConfig {
  botId: string;
  position: 'bottom-right' | 'bottom-left';
  theme: 'light' | 'dark' | 'auto';
  greeting?: string;
  language?: string;
  hideOnRoutes?: string[];
  zIndex?: number;
}

export interface ChatMessage {
  id: string;
  text: string;
  sender: 'user' | 'bot' | 'agent';
  timestamp: Date;
  metadata?: MessageMetadata;
}

export interface MessageMetadata {
  confidence?: number;
  source?: string;
  quickReplies?: string[];
  attachments?: Attachment[];
}

export interface Attachment {
  type: 'image' | 'file' | 'link';
  url: string;
  name?: string;
  size?: number;
}

export interface ChatbotUser {
  id: string;
  name?: string;
  email?: string;
  phone?: string;
  plan?: string;
  customAttributes?: Record<string, string | number | boolean>;
}

export interface LeadCaptureEvent {
  user: ChatbotUser;
  source: 'chat' | 'form' | 'proactive';
  conversationId: string;
  capturedAt: Date;
}

export type ChatbotEventMap = {
  open: void;
  close: void;
  message: ChatMessage;
  leadCapture: LeadCaptureEvent;
  error: ChatbotError;
  typing: { isTyping: boolean };
};

export interface ChatbotError {
  code: string;
  message: string;
  timestamp: Date;
}

Typed Event Handling

Use the ChatbotEventMap type to create a strongly-typed event system that prevents mismatched event names and callback signatures:

// In ChatbotService
on<K extends keyof ChatbotEventMap>(event: K, callback: (data: ChatbotEventMap[K]) => void): void {
  window.Conferbot?.on(event, callback as (data: unknown) => void);
}

Now calling chatbotService.on('leadCapture', (data) => { ... }) gives you full type inference on the data parameter -- your IDE shows all properties of LeadCaptureEvent with autocomplete. Calling chatbotService.on('nonExistentEvent', ...) produces a compile-time error. This type safety eliminates an entire class of runtime bugs related to event handling.

Injection Token for Configuration

Use Angular's InjectionToken for providing chatbot configuration through dependency injection:

export const CHATBOT_CONFIG = new InjectionToken<ChatbotConfig>('ChatbotConfig');

// In app.config.ts or module providers
providers: [
  {
    provide: CHATBOT_CONFIG,
    useValue: {
      botId: environment.chatbotId, // From environment file
      position: 'bottom-right',
      theme: 'auto',
      hideOnRoutes: ['/login', '/checkout'],
    } satisfies ChatbotConfig,
  }
]

The satisfies keyword ensures the configuration object matches the ChatbotConfig interface while preserving the literal types for better IDE support. The chatbot ID comes from the environment file, allowing different bots for development, staging, and production environments. For more on environment-specific chatbot configuration, see our chatbot analytics guide.

Angular Universal renders your application on the server for faster initial page loads and SEO benefits. Chatbot widgets depend on browser APIs that do not exist during server rendering. Here is how to ensure compatibility.

Platform Detection With isPlatformBrowser

The standard Angular approach for browser-specific code uses isPlatformBrowser:

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ChatbotService {
  private platformId = inject(PLATFORM_ID);

  initialize(botId: string): void {
    if (!isPlatformBrowser(this.platformId)) return;
    // Browser-only chatbot initialization
    this.ngZone.runOutsideAngular(() => this.loadScript(botId));
  }
}

On the server, isPlatformBrowser returns false, and the chatbot initialization is skipped entirely. On the client, after hydration completes, the chatbot initializes normally. This is the recommended pattern from the Angular SSR documentation.

afterNextRender for Post-Hydration Initialization

Angular 17+ introduced afterNextRender for code that should execute only once after the first client-side render (post-hydration). This is ideal for chatbot initialization:

@Component({ ... })
export class AppComponent {
  private chatbot = inject(ChatbotService);

  constructor() {
    afterNextRender(() => {
      this.chatbot.initialize(environment.chatbotId);
    });
  }
}

afterNextRender is guaranteed to run only in the browser, only after hydration, and only once. It replaces the older pattern of checking isPlatformBrowser in ngOnInit and is the recommended approach for Angular 17+.

Combining SSR With @defer

When using @defer blocks for lazy loading (Section 7), SSR compatibility is automatic. Deferred components do not render on the server -- they load only on the client when their trigger condition is met. This means a @defer (on idle) chatbot block requires no additional SSR handling; it naturally skips server rendering and loads on the client after hydration.

Transfer State for Pre-Configured Chatbot

If your chatbot configuration depends on server-resolved data (for example, a user-specific bot configuration determined by the server), use Angular's TransferState to pass the data from server to client without an additional HTTP request:

// On server (SSR)
const CHATBOT_STATE_KEY = makeStateKey<ChatbotConfig>('chatbotConfig');

// In server-side resolver
transferState.set(CHATBOT_STATE_KEY, resolvedConfig);

// On client
const config = transferState.get(CHATBOT_STATE_KEY, defaultConfig);
chatbotService.initialize(config.botId);

This pattern avoids the "flash" where the chatbot loads with default configuration and then updates to user-specific configuration after a client-side API call.

Angular's testing infrastructure provides excellent support for testing chatbot integration at every level: unit tests, integration tests, and end-to-end tests.

Unit Testing With TestBed

Test the ChatbotService in isolation by mocking the window API:

describe('ChatbotService', () => {
  let service: ChatbotService;
  let ngZone: NgZone;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ChatbotService],
    });
    service = TestBed.inject(ChatbotService);
    ngZone = TestBed.inject(NgZone);

    // Mock global chatbot API
    (window as any).Conferbot = {
      open: jasmine.createSpy('open'),
      close: jasmine.createSpy('close'),
      on: jasmine.createSpy('on'),
      destroy: jasmine.createSpy('destroy'),
    };
  });

  it('should open chatbot', () => {
    service.open();
    expect(window.Conferbot!.open).toHaveBeenCalled();
  });

  it('should emit isOpen$ when chatbot opens', (done) => {
    service.isOpen$.pipe(skip(1)).subscribe(isOpen => {
      expect(isOpen).toBeTrue();
      done();
    });
    // Simulate chatbot open event
    const openCallback = (window.Conferbot!.on as jasmine.Spy).calls.argsFor(0)[1];
    ngZone.run(() => openCallback());
  });
});

E2E Testing With Protractor Replacement (Cypress or Playwright)

Since Angular deprecated Protractor, use Cypress or Playwright for end-to-end chatbot testing:

// Cypress
describe('Chatbot Widget', () => {
  it('loads chatbot after idle period', () => {
    cy.visit('/dashboard');
    cy.get('[data-testid="chatbot-trigger"]', { timeout: 5000 }).should('be.visible');
  });

  it('hides chatbot on checkout route', () => {
    cy.visit('/checkout');
    cy.get('[data-testid="chatbot-trigger"]').should('not.exist');
  });
});

Production Deployment Checklist

• Performance: Change detection cycles measured with Angular DevTools before and after chatbot (should show less than 10 percent increase with NgZone optimization)
• Bundle: Chatbot code is in a separate lazy chunk (verify with ng build --stats-json and webpack-bundle-analyzer)
• SSR: No server-side errors from window or document access (test with ng serve --configuration=ssr)
• TypeScript: All chatbot types compile with strict mode (strict: true in tsconfig)
• Zone.js: Chatbot initialized with runOutsideAngular (verify with Angular DevTools profiler)
• Cleanup: Chatbot destroys cleanly on component unmount (no console errors, no orphaned DOM elements)
• Accessibility: Widget trigger has aria-label, chat window traps focus, Escape key closes chat
• Security: CSP headers allow chatbot domain, bot ID comes from environment variable not hardcoded
• Mobile: Widget displays correctly on mobile viewport, does not block content or navigation
• Routes: Chatbot hidden on excluded routes (login, checkout), context updates on navigation

For additional chatbot deployment best practices, see our 12 chatbot mistakes to avoid and our chatbot security guide for production hardening.