Viewer widget

API v3 — Current ≈ 10 minutes

The Viewer displays a message that has already been recorded. It mounts one way — a React component — and takes the same urid the Recorder produced.

Prerequisites

An existing message and the container it belongs to. Containers and messages.

Install the package

The Viewer ships as its own npm package, separate from the Recorder.

npm install

npm install @livstick/widget-viewer

Mount the Viewer

Render LivstickViewer with the urid of the message’s container and your public API key.

TSX message page

import { LivstickViewer } from "@livstick/widget-viewer";

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

Check the message is released

The Viewer renders whatever it is given — it does not check the message’s state for you. Confirm state is released on the container before mounting the Viewer, so a recipient never lands on an empty or pending player.

GET /containers/{crid}

curl https://client-api.v5.livstick.com/api/v3/containers/{crid} \
  -H "Authorization: Bearer {ACCESS_TOKEN}"

Handle onLoaded and onError

onLoaded fires once the message has rendered; onError fires when it could not. Use them to drive a loading state or a fallback in the page around the Viewer.

TSX message page

<LivstickViewer
  uid="code"
  domain="example.com"
  onLoaded={() => setLoaded(true)}
  onError={(error) => setFailed(error)}
/>

Next steps

The Viewer’s full prop surface is short by design: uid, lang, apiKey, domain, apiUrl, className, style, styleOverrides, onLoaded, onError. There is no Custom Element, no editKey, and no composed events — that surface belongs to the Recorder only.