Installation

Install Bantico on Angular

Add Bantico to your Angular app from your root app component. Pass your project token through data-token. This example also sets window.__BANTICO_TOKEN__ as a safe fallback.

Add banticoToken to your Angular environment file and only load Bantico when a project token is available.

Environment file

Add your Bantico project token to src/environments/environment.ts.

src/environments/environment.ts

export const environment = {  production: false,  banticoToken: "your_project_token",};

Root app setup

Add Bantico to your root app component. First set the fallback token, then create the Bantico script once and pass the same project token through data-token.

src/app/app.component.ts

import { Component, Inject, OnInit } from "@angular/core";import { DOCUMENT } from "@angular/common";import { environment } from "../environments/environment"; @Component({  selector: "app-root",  templateUrl: "./app.component.html",})export class AppComponent implements OnInit {  constructor(@Inject(DOCUMENT) private document: Document) {}   ngOnInit(): void {    const banticoToken = environment.banticoToken;     if (!banticoToken) return;     const win = this.document.defaultView as      | (Window & { __BANTICO_TOKEN__?: string })      | null;    if (win) win.__BANTICO_TOKEN__ = banticoToken;     const existingScript = this.document.getElementById("bantico-tracker");    if (existingScript) return;     const script = this.document.createElement("script");    script.id = "bantico-tracker";    script.src = "https://app.bantico.com/bantico.js";    script.defer = true;    script.setAttribute("data-token", banticoToken);     this.document.head.appendChild(script);  }}