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 inline widget with the given config
'bubble'	Initialize a floating chat bubble 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

Bubble Config Options

The bubble action accepts all the same config keys as init, plus bubble-specific options:

Key	Attribute	Type	Description
position	position	string	'bottom-right' or 'bottom-left'
bubbleSize	bubble-size	number	Launcher diameter in pixels
bubbleColor	bubble-color	string	Launcher background color
bubbleIcon	bubble-icon	string	Custom launcher icon URL
offsetX	offset-x	number	Horizontal offset from viewport edge
offsetY	offset-y	number	Vertical offset from viewport edge
chatWidth	chat-width	number	Chat panel width
chatHeight	chat-height	number	Chat panel height
greeting	greeting	string	Greeting tooltip text
greetingDelay	greeting-delay	number	Seconds before greeting appears
hideOnMobile	hide-on-mobile	boolean	Hide bubble on mobile viewports
customLauncher	custom-launcher	string	CSS selector for external launcher

See the Bubble Chat guide for full details.

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.