Installation

Package Manager

npm

npm install @saytv/chat-sdk

pnpm

pnpm add @saytv/chat-sdk

yarn

yarn add @saytv/chat-sdk

Then import the widget entry point in your application:

import '@saytv/chat-sdk/widget';

This registers the <saytv-chat> custom element globally. Place it anywhere in your HTML:

<saytv-chat app-id="your-app-id" theme="light"></saytv-chat>

CDN (Script Tag)

ES Module

<saytv-chat app-id="your-app-id" theme="light"></saytv-chat>

<script type="module">
  import 'https://sdk.saytv.net/@saytv/chat-sdk@latest/dist/widget.mjs';
</script>

IIFE Bundle

For environments that don't support ES modules:

<saytv-chat app-id="your-app-id" theme="light"></saytv-chat>

<script src="https://sdk.saytv.net/@saytv/chat-sdk@latest/dist/sdk.iife.js"></script>

The IIFE bundle exposes the SDK on window.SayTV.

Async Loader

The async loader is a lightweight script that queues commands until the full widget is ready. This is ideal for pages where you want to defer the widget load.

<script type="module" src="https://sdk.saytv.net/@saytv/chat-sdk@latest/dist/loader.mjs"></script>
<script>
  SayTVChat('init', {
    appId: 'your-app-id',
    authToken: 'user-jwt-token',
    theme: 'dark',
    height: 700,
    width: '100%',
  });
</script>

The loader:

• Exposes a global SayTVChat() function
• Queues all commands until the widget script finishes loading
• Auto-creates a <saytv-chat> element if one isn't already on the page
• Converts camelCase config keys to kebab-case attributes (authToken → auth-token)

See the Async Loader Reference for full details.

Framework Wrappers

For React and Vue, install the dedicated wrapper packages:

React

npm install @saytv/chat-react

Vue

npm install @saytv/chat-vue

These packages depend on @saytv/chat-sdk as a peer dependency - it will be installed automatically.

• React Integration Guide
• Vue Integration Guide

Package Exports

The SDK exposes multiple entry points:

Import Path	Description
@saytv/chat-sdk	API client (apiRequest, ApiError) and TypeScript types
@saytv/chat-sdk/widget	Registers the <saytv-chat> custom element
@saytv/chat-sdk/bubble	Registers the <saytv-chat-bubble> floating launcher
@saytv/chat-sdk/loader	Async loader with command queue
@saytv/chat-sdk/mobile	Pre-built HTML shell for mobile webviews

TypeScript

The SDK ships with full TypeScript declarations. Types are exported from the main entry point:

import type {
  User,
  Comment,
  Episode,
  Room,
  Quiz,
  Badge,
  Avatar,
  Fanzone,
  EmojiPack,
  FriendRequest,
  PaginatedResponse,
  ApiResponse,
} from '@saytv/chat-sdk';

import { apiRequest, ApiError } from '@saytv/chat-sdk';

Requirements

• Browsers: All modern browsers (Chrome, Firefox, Safari, Edge). Custom Elements v1 and Shadow DOM v1 are required.
• Node.js: 18+ (for build tools and SSR)
• Module format: The SDK supports both ESM and CommonJS imports.