Recorder — Custom Element

defineLivstickWidget registers the custom element on the document. Call it once, before you render the tag.

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

defineLivstickWidget();

uid is the container’s urid, and domain is the host the widget resolves recording and asset URLs against.

<livstick-widget-v2 uid="code" domain="example.com"></livstick-widget-v2>

config, editKey, and replyToken are exclusively JavaScript properties on the element — they are never reflected as HTML attributes. Setting editKey as an HTML attribute does nothing at all: this is the number one mistake with this mounting mode. Set them once you hold a reference to the element.

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

Everything else the widget reads from markup is a real HTML attribute: lang, api-key, api-url, sender-email, autogenerate-urid, debug, fullscreen-desktop, use-media-recorder-on-mobile, edit, and instance-id, alongside uid and domain from the previous step. style-url is also an attribute, and overrides the stylesheet URL.

<livstick-widget-v2
  uid="code"
  domain="example.com"
  lang="en"
  fullscreen-desktop="true"
></livstick-widget-v2>

The element fires four composed events: livstick:ready, livstick:route-change, livstick:recorded, and livstick:error. It also exposes three methods: record(), reset(), and cancelUpload(). The element is isolated by Shadow DOM, so the host page’s stylesheets do not reach inside it — the widget must be styled through its own stylesheet, not with page-level selectors.

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