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

Experiment with widget attributes, themes, bubble mode, and all customization options in the interactive playground — no setup required.

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/bubble	Registers the <saytv-chat-bubble> floating launcher
@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
• Bubble Chat - Add a floating chat launcher to your site
• Theming - Customize colors, fonts, and spacing
• Attributes Reference - All configuration options