Integration guide

Asklify + Angular

Load the widget from a small injectable service so any component (typically AppComponent) can initialize it once.

Prerequisite: an Asklify project with some knowledge added — the quickstart covers that in a couple of minutes. You'll need your public project ID (pub_...) from Widget → Install.

Create the service

The service below injects the loader script exactly once per session.

Initialize from AppComponent

src/app/app.component.ts

import { Component, OnInit, inject } from "@angular/core";
import { AsklifyService } from "./asklify.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  private asklify = inject(AsklifyService);

  ngOnInit() {
    this.asklify.load("pub_YOUR_PROJECT_ID");
  }
}

Environment-specific project IDs

src/environments/environment.ts

export const environment = {
  production: false,
  asklifyProjectId: "pub_YOUR_DEV_PROJECT_ID",
};

Ready-to-use template

Copy, paste, replace the project ID — that's the whole integration:

src/app/asklify.service.ts

import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" })
export class AsklifyService {
  private loaded = false;

  /** Injects the Asklify widget loader once. Safe to call repeatedly. */
  load(projectId: string): void {
    if (this.loaded || document.getElementById("asklify-widget-script")) return;
    this.loaded = true;

    const script = document.createElement("script");
    script.id = "asklify-widget-script";
    script.src = "https://api.asklify.in/widget.js";
    script.defer = true;
    script.setAttribute("data-project-id", projectId);
    document.body.appendChild(script);
  }

  /** Removes the widget (e.g. after logout). */
  destroy(): void {
    document.getElementById("asklify-widget-script")?.remove();
    document.getElementById("kb-widget-launcher")?.remove();
    document.getElementById("kb-widget-frame")?.remove();
    this.loaded = false;
  }
}

All appearance and behavior — name, greeting, colors, theme, position, suggested questions — is configured in your dashboard under Widget settings and applies instantly without redeploying. See the widget configuration reference.

Event handling

To react to what happens in conversations — a chat starting, a customer requesting a human, feedback submitted — subscribe to webhooks. For fully custom experiences, the REST API exposes chat with streaming, knowledge search, and conversation transcripts.

Best practices

Call load() in AppComponent so the widget persists across router navigations.
Use environment files to point dev/staging/production at different projects.

Troubleshooting

Widget missing in production build — confirm the script URL isn't blocked by your Content Security Policy (allow script-src and frame-src for api.asklify.in and app.asklify.in).

Still stuck? Check the error reference or email hello@asklify.in.