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
• Localization - Set the UI language, RTL support, and custom translations
• Attributes Reference - All configuration options