@stagewright-ai/react

React components for Stagewright: embed a walkthrough in your app or docs, and reserve a spot for in-app guidance.

npm install @stagewright-ai/react

StagewrightPlayer

import { StagewrightPlayer } from "@stagewright-ai/react";

<StagewrightPlayer id="acmeinvitete" />

A responsive iframe (16:9 video plus its control bar) that always shows the walkthrough's latest approved version. id is the public id from the walkthrough's player link (/p/<id>). The control bar carries its verified stamp: the build it was recorded from and when a run last passed on it.

| Prop | | |---|---| | id | The walkthrough's public id (required) | | title | Accessible title for the iframe (default "Walkthrough") | | viewerToken | Your viewer token, so views join the person's journey in Insights | | theme | "light", "dark" or "system". For walkthroughs recorded in both looks, pass your app's current theme and the player shows the matching video, swapping at the current timestamp when it changes. Default follows the viewer's prefers-color-scheme | | accessToken | For a password or members-only video: the token from an expiring signed link (POST /v1/walkthroughs/:id/share-links, made on your server with an API key). Public and unlisted videos need none | | host | Where the player is served (defaults to the hosted API; your custom domain, e.g. https://help.acme.com, when you have one) | | className, style | Passed to the wrapper |

StagewrightHint

import { StagewrightHint } from "@stagewright-ai/react";

<StagewrightHint feature="sso" />

A reserved slot for in-app guidance: @stagewright-ai/browser renders the nudge for that feature here, inline, instead of floating it over your UI. It renders nothing until the SDK fills it.

Needs React 18 or newer.

License

MIT