Installation

Install Bantico on Angular

Angular gives you a couple of straightforward ways to add Bantico. Here are the recommended approaches.

Replace YOUR_TOKEN with your Bantico token.

Simplest approach

The simplest approach is to set window.BANTICO_TOKEN and load the Bantico script directly in your src/index.html file.

src/index.html

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>Angular App</title>  <base href="/">  <meta name="viewport" content="width=device-width, initial-scale=1">  <script>    window.BANTICO_TOKEN = "YOUR_TOKEN";  </script>  <script src="https://app.bantico.com/bantico.js"></script></head><body>  <app-root></app-root></body></html>

Using DOCUMENT service

For more control, you can set window.BANTICO_TOKEN and append the Bantico script programmatically in your app component:

src/app/app.component.ts

import { Component, Inject, OnInit } from '@angular/core';import { DOCUMENT } from '@angular/common'; @Component({  selector: 'app-root',  templateUrl: './app.component.html'})export class AppComponent implements OnInit {  constructor(@Inject(DOCUMENT) private document: Document) {}   ngOnInit(): void {    (window as typeof window & { BANTICO_TOKEN?: string }).BANTICO_TOKEN = 'YOUR_TOKEN';     const script = this.document.createElement('script');    script.src = 'https://app.bantico.com/bantico.js';    script.async = true;    script.defer = true;    this.document.head.appendChild(script);  }}