Inline & launcher

Embedding the panel in your own layout, or driving it from your own button.

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

Inline panel

Pass a target and the panel renders inside it, sized by your layout, with no floating launcher.

TypeScript

await mountWidget({
  projectId: "proj_abc123",
  embedKey: import.meta.env.PUBLIC_OPRAG_EMBED_KEY,
  apiUrl: "https://api.dev.oprag.ai",
  target: document.getElementById("chat-panel")!,
  launcher: false,
});

Your own launcher

Set launcher: false and drive the panel from the handle. This is how you put chat behind an existing help button.

TypeScript

const widget = await mountWidget({
  projectId: "proj_abc123",
  embedKey: import.meta.env.PUBLIC_OPRAG_EMBED_KEY,
  apiUrl: "https://api.dev.oprag.ai",
  launcher: false,
});

document.querySelector("#help")?.addEventListener("click", () => widget.toggle());

// Open with a question already asked — useful from a "still stuck?" prompt.
document.querySelector("#pricing-help")?.addEventListener("click", () => {
  widget.open();
  widget.sendMessage("How does per-seat pricing work?");
});

Ready to ship?

Get started free