Quickstart: Vanilla JavaScript

If you don't use React (or want full programmatic control), use createWidget(). This gives you a widget instance you can call methods on.

Install

npm install @bitpalm/ai-agents

Initialize the widget

import { createWidget } from "@bitpalm/ai-agents";
 
const widget = createWidget({
  slug: "your-agent-slug",
  token: "your-embed-token",
});

That's it — the chat bubble appears, you can open it and chat.

Programmatic control

The returned widget object exposes methods for everything:

// Visibility
widget.open();
widget.close();
widget.toggle();        // open if closed, close if open
widget.isOpen();        // returns boolean
 
// Send a message as the user (opens widget if closed)
widget.send("Tell me about the Enterprise plan");
 
// Identify a logged-in user (links chat to your CRM)
widget.identify({
  externalUserId: "cust_123",
  name: "Max Mustermann",
  email: "[email protected]",
  phone: "+491701234567",
  company: "Example GmbH",
});
 
// Pass business context to the AI (cart, listing, account data)
widget.context({
  cart: { items: [{ name: "Sneakers", price: 99.99 }], total: 99.99 },
});
widget.resetContext();  // clear all custom context
 
// Listen to events
widget.on("lead_captured", (data) => {
  console.log("Lead captured!", data);
});
 
// Tear down (e.g. on logout or unmount)
widget.destroy();

Vue / Svelte / Solid

The vanilla API works in any framework. Just call createWidget() once at the root level:

// Vue 3 example
import { onMounted, onBeforeUnmount } from "vue";
import { createWidget } from "@bitpalm/ai-agents";
 
let widget;
 
onMounted(() => {
  widget = createWidget({ slug: "your-agent-slug" });
});
 
onBeforeUnmount(() => {
  widget?.destroy();
});

Server-side rendering

createWidget() only runs in the browser. Wrap calls in a typeof window !== "undefined" check or call from onMounted / useEffect.

Next steps