Async Loader

The async loader is a lightweight script that lets you configure the chat widget before it finishes loading. Commands are queued and applied once the full widget is ready.

Usage

<!-- 1. Include the loader -->
<script type="module" src="https://sdk.saytv.net/@saytv/chat-sdk@latest/dist/loader.mjs"></script>

<!-- 2. Queue commands (runs even before the widget loads) -->
<script>
  SayTVChat('init', {
    appId: 'your-app-id',
    authToken: 'user-jwt-token',
    theme: 'dark',
    height: 700,
    width: '100%',
  });
</script>

How It Works

1. The loader registers a global window.SayTVChat() function
2. Commands are queued until the full widget finishes loading
3. Once ready, all queued configuration is applied to the <saytv-chat> element

SayTVChat Function

SayTVChat(action: string, config?: Record<string, unknown>): void

Actions

Action	Description
'init'	Initialize the widget with the given config

Config Options

The init action accepts a config object. Keys are camelCase and are automatically converted to kebab-case attributes:

Key	Attribute	Type	Description
appId	app-id	string	App identifier
env	env	string	Environment ('production' or 'staging')
apiUrl	apiurl	string	Direct API URL
authToken	auth-token	string	JWT access token
builtInAuth	built-in-auth	boolean	Show login UI
fanzone	fanzone	boolean	Enable fanzone
height	height	number	Height in pixels
width	width	string	CSS width value
theme	theme	string	'light' or 'dark'
mode	mode	string	'page-chat' for page chat mode
pageId	page-id	string	Unique identifier for page chat
pageName	page-name	string	Display name for page chat
customTabUrl	custom-tab-url	string	URL loaded in a custom tab iframe
customTabLabel	custom-tab-label	string	Label shown on the custom tab
customTabIcon	custom-tab-icon	string	Icon name for the custom tab

Auto-Creation

If no <saytv-chat> element exists on the page when init is called, the loader automatically creates one and appends it to document.body.

To control placement, add the element yourself:

<div id="chat-container">
  <saytv-chat></saytv-chat>
</div>

<script type="module" src="loader.mjs"></script>
<script>
  SayTVChat('init', { appId: 'your-app-id', theme: 'dark' });
</script>

When to Use

Use the async loader when:

• You want to minimize initial page load impact
• The chat widget is not immediately visible (e.g., in a tab or modal)
• You need to configure the widget from server-rendered data before it loads
• You're embedding via a third-party script tag

For most cases where the widget is immediately visible, importing @saytv/chat-sdk/widget directly is simpler.