Quickstart: npm widget

Mount the widget from your own code, with types and a handle to control it.

Browser Embed key dev · https://api.dev.oprag.ai

Shell

npm install @oprag/sdk

src/chat.ts TypeScript

import { mountWidget } from "@oprag/sdk/widget";

const widget = await mountWidget({
  projectId: "proj_abc123",
  embedKey: import.meta.env.PUBLIC_OPRAG_EMBED_KEY,
  apiUrl: "https://api.dev.oprag.ai",
  theme: { primaryColor: "#0F766E", position: "bottom-right", mode: "auto" },
  onReady: () => console.log("widget ready"),
  onLead: ({ leadId, projectId }) => analytics.track("oprag_lead", { leadId, projectId }),
});

// Open it from your own button instead of the default launcher.
document.querySelector("#help")?.addEventListener("click", () => widget.toggle());

The env var is ${KEY_ENV_VARS.browser} rather than something neutral on purpose: the PUBLIC_ prefix says out loud that this value ships to visitors, so a secret placed here looks wrong at a glance.

What you get over the script tag

Types for every option and every callback.
A handle with open, close, toggle, sendMessage, abort, and destroy.
Lifecycle callbacks — onReady, onOpen, onClose, onLead, onEscalate, onError.
Tree-shaking, so you ship only what you call.

Ready to ship?

Get started free