Skip to main content

Angular Setup

Angular apps use @aithinks/chatbot-widget-element (Web Component).

Custom element name: chatbot-widget

Install​

npm install @aithinks/chatbot-widget-element

Attributes​

AttributeTypeRequiredDescription
appidstringYesWidget application ID (lowercase)

Web Component attributes are lowercase (appid). On the React native component the prop is appId.

1. Enable the Custom Elements schema​

// app.module.ts (NgModule)
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})
export class AppModule {}

Standalone component:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<chatbot-widget [attr.appid]="appId"></chatbot-widget>`,
})
export class AppComponent {
  appId = 'YOUR_APP_ID';
}

2. Import the package at app entry​

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

import '@aithinks/chatbot-widget-element';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

3. Use it in the template​

<!-- app.component.html -->
<chatbot-widget appid="YOUR_APP_ID"></chatbot-widget>

Dynamic binding:

<chatbot-widget [attr.appid]="appId"></chatbot-widget>
export class AppComponent {
  appId = 'YOUR_APP_ID';
}

Common issue​

“X is not a known element” — CUSTOM_ELEMENTS_SCHEMA is missing; add it to the relevant NgModule or standalone component.

Next steps​