> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orbit.devotel.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Video Room Embed Demo (Developer console)

> Join one of your video rooms through the Web SDK's OrbitVideoRoom widget inside the dashboard, and copy the exact embed snippet once the join succeeds — verify the integration in your tenant before you ship it on your own site.

# Video Room Embed Demo

The **Video Room Embed Demo** page mounts the published `@devotel-orbit/web`
`OrbitVideoRoom` widget against one of your live video rooms, inside the
dashboard. It runs the same code path a visitor's browser runs after you ship
the [embed button](/guides/embed-video-consultation-button): mint a server-side
join token, hand it to the widget, watch the tile grid paint. When the join
succeeds, the page shows the exact snippet a developer pastes into their own
page — so you verify the integration in your tenant before a single snippet
leaves the editor.

Use it as a smoke test. A successful join here proves three things at once:
your room exists and accepts joins, the join-token mint returns both a token
and a media-server URL, and the widget renders the conferencing UI end to end.

## Where the demo lives

Open **Developer → Video Room Embed Demo** in the dashboard, or navigate
directly to `/developer/video-embed-demo`. The page carries two controls
(room picker and display name), the widget stage, and — after a successful
join — the copy-paste embed snippet.

## 1 — Pick a room and mint a join token

The room picker lists the scheduled video rooms in your organization (Rooms →
scheduled rooms). Choose one, optionally set a display name, then click
**Join via SDK widget**:

1. The page asks your backend for a join token with
   `POST /api/v1/video/rooms/:id/join` — the same route the production embed
   uses. The token joins under your dashboard identity; the display name
   becomes the label under your tile.
2. The join response carries both the token and the media-server WebSocket
   endpoint (`livekit_url`, or its `ws_url` alias — either fills the widget).
3. The widget loads only after you click Join, so opening the page costs no
   media bandwidth.

If a join fails, the page surfaces a mapped error ("Couldn't mint a join
token" or "video room connection dropped") rather than a raw transport
string — retry, or pick a different room.

## 2 — Watch the widget paint

On success the widget mounts into the **SDK widget** card and paints its own
tile grid and control bar — mute, camera, screen share, device picker, and
leave. The page badge tracks the widget state (`connecting`, `connected`,
`error`, `disconnected`). This is the same `OrbitVideoRoom` class and the
same admin-free participant path that your website visitors will use.

The page tears the widget down on leave, re-join, or navigation away — no
lingering camera or mic.

## 3 — Copy the generated snippet

Once joined, the **Embed snippet a developer copies** card renders the
assembly verbatim:

```html theme={null}
<div id="orbit-video-embed-demo" style="height: 600px"></div>
<script type="module">
  import { OrbitVideoRoom } from "@devotel-orbit/web";
  const room = OrbitVideoRoom.init({
    container: document.getElementById("orbit-video-embed-demo"),
    token: "<server-minted token>",     // POST /api/v1/video/rooms/:id/join
    serverUrl: "<wss://media.orbit.devotel.io>", // join.livekit_url
    displayName: "<your display name>",
  });
  room.on("state", (s) => console.log("video room:", s));
</script>
```

Copy it and wire the placeholders on your backend: mint a fresh token per
click (never put an API key in the page), pass the join response's
`livekit_url` as `serverUrl`, and give the container any id you like.

## 4 — Before you paste the snippet

Verify these against the demo before shipping:

* The room you will embed against exists and a join returns both
  `token` and `livekit_url`/`ws_url`.
* The widget paints tiles and controls exactly as the demo shows.
* Your backend mints the token server-side and returns only the token +
  endpoint to the browser.
* The display name you pass reads sensibly under the participant tile.

For the full production pattern — waiting room with host admit, recordings on
your storage, and a tenant-controlled retention window — follow the
[embed video consultation button guide](/guides/embed-video-consultation-button).

## Who can reach it

Access matches the **SDK Live Demo** softphone page: the dashboard's
**owner**, **admin**, and **developer** roles can open it — the roles that
already build or embed developer-facing integrations. Every other role sees
an access-denied notice, the same gate the softphone demo enforces.

## See also

* [Embed a video-consultation button](/guides/embed-video-consultation-button) —
  the canonical production embed pattern (waiting room, recordings, retention).
* [Video meetings](/guides/video-meetings) — run scheduled video rooms from the
  dashboard.
* [Video room access tokens](/guides/video-room-access-tokens) — the token and
  permission model behind the join route.
* [Web SDK](/sdks/web) — the `@devotel-orbit/web` package, including the
  `OrbitVideoRoom` config surface and event map.