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

# Session Playback

# Proview Session Playback SDK

The Proview Session Playback SDK publishes a lightweight JavaScript wrapper that wires your application to Talview's hosted player experience. It exposes a single factory, `sessionPlayback()`, and registers that factory on `window.Proview.sessionPlayback` after the loader script runs. The wrapper takes care of initializing the embedded iframe and proxying lifecycle events back to your app. Review the main Proview SDK [getting started guide](../getting-started.mdx) for details on loading the core bundle once per page.

## Accessing `sessionPlayback`

When the Proview SDK loader finishes, it attaches a global called `Proview`. The `sessionPlayback` property on this object is the factory exported by this package:

* `window.Proview.sessionPlayback` for script-tag consumers.

## Quick Start (Script Tag)

```html theme={null}
<div id="playback-root"></div>
<script src="https://sdk.tlv.cx" async crossorigin="anonymous"></script>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    const playback = window.Proview.sessionPlayback({
      dsn: 'dsn',
      uuid: 'uuid',
      container_id: 'playback-root',
    });

    playback.onReady(() => {
      console.log('Playback ready');
    });
  });
</script>
```

## `sessionPlayback` Options

Pass a configuration object when invoking `sessionPlayback()`. Each field is required unless noted otherwise.

* `dsn` – Talview Data Source Name that links the player to your Talview account or environment.
* `uuid` – Identifier of the session (for example, `session-123`) you want to play back.
* `container_id` – DOM element id where the player iframe should mount; the element must exist before you initialize playback.
* `token` *(optional)* – JWT authentication token. When provided, it is used in place of the standard Firebase auth flow and is propagated through all internal navigations so authentication is preserved across view transitions.
* `hide` *(optional)* – Permanently suppress a view. Accepted values:
  * `"report"` – skips the session report and navigates directly to the playback dashboard on mount. The "Back to Report" button is never shown.
  * `"playback"` – shows only the session report; the button that opens the playback dashboard is hidden.
* `focus` *(optional)* – Set the initial view without blocking navigation. Accepted values:
  * `"playback"` – navigates to the playback dashboard on mount while keeping the "Back to Report" button available so the user can return to the report.
  * `"report"` – the session report is shown on mount. This is the default behavior.
* `hide_nav` *(optional, boolean)* – When `true`, hides the console navigation bar (breadcrumb header) inside the session report view. Useful when embedding the player inside your own shell UI.

### View configuration precedence

* `hide` takes precedence over `focus`. Setting both `hide="playback"` and `focus="playback"` results in no auto-redirect.
* While the player is resolving the session before an auto-redirect, a full-screen loader is displayed to prevent a flash of the report.

## Ready Callback

The factory exposes an `onReady` helper so you can attach logic once the iframe player is bootstrapped:

```js theme={null}
const playback = Proview.sessionPlayback(options);

playback.onReady(() => {
  console.log('Playback ready');
});
```

Handle errors through the global `Proview.onError` hook described in the main getting-started guide.

## Examples

### Embed with token auth and no navigation bar

```js theme={null}
const playback = Proview.sessionPlayback({
  dsn: 'dsn',
  uuid: 'uuid',
  container_id: 'playback-root',
  token: 'your-jwt',
  hide_nav: true,
});
```

### Open directly on the playback dashboard

The report remains accessible via the "Back to Report" button.

```js theme={null}
const playback = Proview.sessionPlayback({
  dsn: 'dsn',
  uuid: 'uuid',
  container_id: 'playback-root',
  focus: 'playback',
});
```

### Show report only

Hides the button that navigates to the playback dashboard.

```js theme={null}
const playback = Proview.sessionPlayback({
  dsn: 'dsn',
  uuid: 'uuid',
  container_id: 'playback-root',
  hide: 'playback',
});
```

### Skip the report entirely

Navigates directly to the playback dashboard on mount. The "Back to Report" button is never shown.

```js theme={null}
const playback = Proview.sessionPlayback({
  dsn: 'dsn',
  uuid: 'uuid',
  container_id: 'playback-root',
  hide: 'report',
});
```