Integration guide

Asklify + React

Wrap the widget loader in a tiny component that injects the script on mount and cleans up on unmount. Works with Vite, CRA, Remix — any React app.

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.

Get your project ID

Copy the public project ID (starts with pub_) from Widget → Install in your dashboard.

Add the widget component

Create the component below once, then render it anywhere near the root of your app (it renders nothing visible itself).

Render it once

src/App.tsx

import { AsklifyWidget } from "./AsklifyWidget";

export default function App() {
  return (
    <>
      {/* ...your app... */}
      <AsklifyWidget projectId="pub_YOUR_PROJECT_ID" />
    </>
  );
}

Ready-to-use template

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

src/AsklifyWidget.tsx

import { useEffect } from "react";

const SCRIPT_ID = "asklify-widget-script";

export function AsklifyWidget({ projectId }: { projectId: string }) {
  useEffect(() => {
    if (document.getElementById(SCRIPT_ID)) return;

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

    return () => {
      // Remove widget UI + script on unmount (e.g. logged-out routes).
      script.remove();
      document.getElementById("kb-widget-launcher")?.remove();
      document.getElementById("kb-widget-frame")?.remove();
    };
  }, [projectId]);

  return null;
}

Renders nothing — it only manages the script lifecycle.

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

Render the component in your root layout so the widget survives client-side navigation.
Gate it behind auth state if you only want the assistant for logged-in users.
Keep the project ID in an env var (VITE_ASKLIFY_PROJECT_ID) per environment.

Troubleshooting

Widget appears twice in dev — React 18 StrictMode double-mounts effects; the SCRIPT_ID guard above prevents duplicates.
Widget missing after route change — make sure the component is in a layout that never unmounts, not a page.

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