Embed the Recorder widget

As in Make your first API request, POST to /containers to get the container’s urid and its editKey. editKey is only returned at creation, so capture it now — you will need it in a later step.

curl -X POST https://client-api.v5.livstick.com/api/v3/containers \
  -H "Authorization: Bearer {ACCESS_TOKEN}" \
  -H "Content-Type: application/json" \
  -d '{ "crid": "welcome-message" }'

The package ships three ways to mount it: an SSR-safe React component for React apps, a Shadow DOM Custom Element for any other stack, or the classic loader on a fullpage.html page for iframe embeds. Pick the one that matches your context. If you mount it in an iframe, the host page must grant allow="camera; microphone" — without it, the camera and microphone silently fail to start.

import { defineLivstickWidget } from "@livstick/widget-react-v2/element";

defineLivstickWidget();

// then in your markup:
// <livstick-widget-v2 uid="code" domain="example.com"></livstick-widget-v2>

config, editKey, and replyToken are exclusively JavaScript properties on the element — the widget never reads them from HTML attributes. Set them once you hold a reference to the element, using the editKey you captured when you created the container.

const widget = document.querySelector("livstick-widget-v2");
widget.config = { version: 2, behavior: { messageEnabled: true } };
widget.editKey = editKey;

The widget fires four composed events: livstick:ready, livstick:route-change, livstick:recorded, and livstick:error. Listen for livstick:recorded to know a message has been captured, and update your own interface.

widget.addEventListener("livstick:recorded", () => {
  // message captured — update your interface here
});