Page Chat

Embed a real-time chat tied to any page URL - like Disqus, but for live chat. No backend setup needed; episodes are auto-created based on a unique page identifier.

How It Works

When mode="page-chat" is set, the SDK automatically creates (or reconnects to) an episode tied to the current page. By default, it uses window.location.href as the unique identifier and document.title as the display name.

If an episode with the given identifier already exists, the widget reconnects to it. If not, it creates a new one automatically. This means any two users on the same page will see the same chat - no manual episode setup required.

Stable Page Identifiers

Prefer stable, unique identifiers over raw URLs. URLs can change (query params, trailing slashes, deploys), but an explicit page-id like "match-2026-finals" or a product SKU will always resolve to the same chat.

Configuration

Vanilla JS

<!-- Simplest: auto-uses current page URL + title -->
<saytv-chat
  mode="page-chat"
  app-id="your-app-id"
  auth-token="USER_JWT"
  built-in-auth="false"
></saytv-chat>

<!-- With explicit page identity -->
<saytv-chat
  mode="page-chat"
  page-id="match-2026-team-a-vs-team-b"
  page-name="Team A vs Team B"
  app-id="your-app-id"
  auth-token="USER_JWT"
  built-in-auth="false"
></saytv-chat>

React

<SayTVChat
  mode="page-chat"
  appId="your-app-id"
  authToken={userJwt}
  builtInAuth={false}
  onPageChatReady={(e) => console.log('Chat ready for episode:', e.detail.episode)}
/>

// With explicit page identity
<SayTVChat
  mode="page-chat"
  pageId="match-2026-team-a-vs-team-b"
  pageName="Team A vs Team B"
  appId="your-app-id"
  authToken={userJwt}
  builtInAuth={false}
/>

Vue

<SayTVChat
  mode="page-chat"
  app-id="your-app-id"
  :auth-token="userJwt"
  :built-in-auth="false"
  @page-chat-ready="(e) => console.log('Chat ready:', e.detail.episode)"
/>

Attributes

Attribute	Type	Default	Description
mode	'page-chat'	-	Enables page chat mode.
page-id	string	window.location.href	Unique identifier for this chat. Pages with the same page-id share the same chat.
page-name	string	document.title	Display name shown in the chat header.

Events

When the page chat episode is ready, the widget fires a stv:page-chat-ready event:

const chat = document.querySelector('saytv-chat');

chat.addEventListener('stv:page-chat-ready', (e) => {
  console.log('Episode ready:', e.detail.episode);
  // e.detail.episode.id         - Episode ID (number)
  // e.detail.episode.title      - Episode display name (string)
  // e.detail.episode.externalId - The page-id used to resolve this episode (string)
});

See Events Reference for all available events.

Common Patterns

Sports match pages

Use the match ID as the page-id so every viewer of the same match shares one chat, regardless of the URL they arrived from.

<saytv-chat
  mode="page-chat"
  page-id="match-2026-team-a-vs-team-b"
  page-name="Team A vs Team B - Live"
  app-id="your-app-id"
  auth-token="USER_JWT"
  built-in-auth="false"
></saytv-chat>

Article comments

Let the SDK auto-detect the page URL. Each article gets its own chat with no extra configuration.

<saytv-chat
  mode="page-chat"
  app-id="your-app-id"
  auth-token="USER_JWT"
  built-in-auth="false"
></saytv-chat>

Product discussion

Use the product SKU as the page-id so the same chat appears on every URL that features the product.

<saytv-chat
  mode="page-chat"
  page-id="sku-XYZ-12345"
  page-name="Product Discussion"
  app-id="your-app-id"
  auth-token="USER_JWT"
  built-in-auth="false"
></saytv-chat>

Requirements

WARNING

• The ApiCreatedEpisodes feature must be enabled on your SayTV tenant. Contact your SayTV representative if you are unsure.
• Authentication is required. Page chat requires an authenticated user - pass an auth-token or use built-in auth so the SDK can create and join episodes on the user's behalf.