Angular Integration

Integrate Ask0's search and chat into your Angular app. Add the Ask0 widget to Angular projects with TypeScript support.

Integrate Ask0 AI assistant into your Angular application.

Installation

Add to index.html

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
</head>
<body>
  <app-root></app-root>
  <script
    src="https://assets.ask0.ai/scripts/ask.js"
    data-project-id="YOUR_PROJECT_ID"
  ></script>
</body>
</html>

Component Integration

app.component.ts

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

declare global {
  interface Window {
    ask0: any;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    this.loadAsk0();
  }

  loadAsk0() {
    const script = document.createElement('script');
    script.src = 'https://assets.ask0.ai/scripts/ask.js';
    script.async = true;
    script.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
    document.body.appendChild(script);
  }

  openSupport() {
    if (window.ask0) {
      window.ask0.open();
    }
  }
}

Service

services/ask0.service.ts

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class Ask0Service {
  private scriptLoaded = false;

  constructor() {
    this.loadScript();
  }

  private loadScript(): Promise<void> {
    return new Promise((resolve, reject) => {
      if (this.scriptLoaded) {
        resolve();
        return;
      }

      const script = document.createElement('script');
      script.src = 'https://assets.ask0.ai/scripts/ask.js';
      script.async = true;
      script.dataset.projectId = environment.ask0ProjectId;

      script.onload = () => {
        this.scriptLoaded = true;
        resolve();
      };

      script.onerror = () => reject(new Error('Failed to load Ask0 script'));

      document.body.appendChild(script);
    });
  }

  open(): void {
    if ((window as any).ask0) {
      (window as any).ask0.open();
    }
  }

  close(): void {
    if ((window as any).ask0) {
      (window as any).ask0.close();
    }
  }

  identify(user: any): void {
    if ((window as any).ask0) {
      (window as any).ask0.identify(user);
    }
  }
}

Component Usage

support-button.component.ts

import { Component } from '@angular/core';
import { Ask0Service } from '../services/ask0.service';

@Component({
  selector: 'app-support-button',
  template: `
    <button (click)="openSupport()">
      Get Help
    </button>
  `
})
export class SupportButtonComponent {
  constructor(private ask0Service: Ask0Service) {}

  openSupport() {
    this.ask0Service.open();
  }
}

Environment Configuration

environments/environment.ts

export const environment = {
  production: false,
  ask0ProjectId: 'YOUR_PROJECT_ID'
};

User Identification