Getting Started

The SayTV Chat SDK is a web component (<saytv-chat>) that embeds a full chat widget into any page. It provides complete style isolation, so it won't conflict with your existing CSS.

Quick Start

1. Install

npm install @saytv/chat-sdk

2. Add to Your Page

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

<script type="module">
  import '@saytv/chat-sdk/widget';
</script>

That's it. The widget handles authentication, real-time messaging, and theming out of the box.

Try the Playground

The SDK ships with an interactive playground where you can configure widget attributes, switch themes, and test features live. See the playground documentation for setup instructions.

How It Works

The SDK has two main entry points:

Import	Purpose
@saytv/chat-sdk/widget	Registers the <saytv-chat> custom element
@saytv/chat-sdk/loader	Lightweight async loader with command queue

Widget (most common)

Import @saytv/chat-sdk/widget and place a <saytv-chat> element in your HTML. The widget auto-registers and renders immediately.

Async Loader (deferred loading)

For pages where performance is critical, use the loader. It queues your commands and applies them once the full widget loads:

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

Framework Wrappers

First-class wrappers are available for React and Vue:

• React - @saytv/chat-react (docs)
• Vue - @saytv/chat-vue (docs)

Both provide typed components, hooks/composables, and event bindings.

Next Steps

• Installation - All install methods (npm, CDN, async loader)
• Authentication - Built-in auth, JWT tokens, and guest mode
• Theming - Customize colors, fonts, and spacing
• Attributes Reference - All configuration options