Lifecycle

The widget handle, and cleaning up properly in a single-page app.

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

Method	Description
`open()`	Opens the panel.
`close()`	Closes the panel.
`toggle()`	Opens when closed, closes when open.
`isOpen()`	True while the panel is open.
`sendMessage(text)`	Sends a message as the visitor, opening the panel if needed.
`abort()`	Cancels the in-flight answer without closing the panel.
`destroy()`	Removes the widget and its listeners. Required before re-mounting.

Mounting a second widget replaces the first. In a SPA that turns a forgotten teardown into a slow leak of listeners, so destroy on unmount.

React TypeScript

import { useEffect } from "react";
import { mountWidget, type WidgetHandle } from "@oprag/sdk/widget";

useEffect(() => {
  let handle: WidgetHandle | undefined;
  let cancelled = false;

  void mountWidget({
    projectId: "proj_abc123",
    embedKey: import.meta.env.PUBLIC_OPRAG_EMBED_KEY,
    apiUrl: "https://api.dev.oprag.ai",
  }).then((widget) => {
    // Strict mode can unmount before the promise settles.
    if (cancelled) return widget.destroy();
    handle = widget;
  });

  return () => {
    cancelled = true;
    handle?.destroy();
  };
}, []);

Ready to ship?

Get started free

Only one widget at a time