Recorder — React component

API v3 — Current ≈ 10 minutes

LivstickWidget is a React component that renders the Recorder in your own application — server-render safe, with the same edit key and configuration surface as every other mounting option.

Prerequisites

A container you already created, with its urid and editKey — see Make your first API request.

Install the package

The React component, the Custom Element, and the classic loader all ship from the same package.

Shell install @livstick/widget-react-v2

npm install @livstick/widget-react-v2

Import the component and its stylesheet

Importing the module does not touch window, document, navigator, or any storage — the server renders a deterministic shell, and the journey initializes after hydration. There is no SSR guard to write around it.

JS import LivstickWidget

import { LivstickWidget } from "@livstick/widget-react-v2";
import "@livstick/widget-react-v2/style.css";

Mount the component

uid is the container’s urid, and domain is the host the widget resolves recording and asset URLs against. LivstickWidget accepts the rest of its surface as props too: lang, apiKey, edit, replyToken, apiUrl, senderEmail, autogenerateUrid, debug, fullscreenDesktop, useMediaRecorderOnMobile, instanceId, legacyFlagsMode, className, and style, on top of the edit key, configuration, and callback props covered in the next two steps.

JSX render LivstickWidget

<LivstickWidget uid="code" domain="example.com" />

Pass the edit key and your configuration

editKey grants write access to this one container from the browser — the same value the container API returns only at creation. overrides carries your configuration object, and styleOverrides layers CSS variables on top of the stylesheet you imported.

JSX pass editKey & overrides

<LivstickWidget
  uid="code"
  domain="example.com"
  editKey={editKey}
  overrides={{ behavior: { messageEnabled: true } }}
/>

Wire up the callbacks

onReady, onRouteChange, onRecorded, and onError mirror the four composed events the widget fires in every mounting mode. onRecorded is where you react to a captured message.

JSX onRecorded, onError

<LivstickWidget
  uid="code"
  domain="example.com"
  editKey={editKey}
  onRecorded={() => {
    // message captured — update your interface here
  }}
  onError={(error) => {
    // error.source is "client" or "server"
  }}
/>

Next steps

The Custom Element mounts the same widget outside a React tree, with the same edit key and configuration rules — useful when the host page is not React, or when you need a plain DOM reference.