Vanilla JS / HTML
The simplest way to use the SDK - no build tools required.
Basic Setup
html
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
</head>
<body>
<saytv-chat
app-id="your-app-id"
theme="light"
height="700"
width="100%"
></saytv-chat>
<script type="module">
import '@saytv/chat-sdk/widget';
</script>
</body>
</html>With CDN
If you're not using a bundler, load the widget from a CDN:
ES Module
html
<saytv-chat app-id="your-app-id" theme="light"></saytv-chat>
<script type="module">
import 'https://sdk.saytv.net/@saytv/chat-sdk@latest/dist/widget.mjs';
</script>IIFE (Legacy)
html
<saytv-chat app-id="your-app-id" theme="light"></saytv-chat>
<script src="https://sdk.saytv.net/@saytv/chat-sdk@latest/dist/sdk.iife.js"></script>The IIFE bundle exposes the SDK on window.SayTV.
Configuration via Attributes
All configuration is done through HTML attributes:
html
<saytv-chat
app-id="your-app-id"
env="production"
auth-token="eyJhbGci..."
built-in-auth="false"
fanzone="true"
height="700"
width="100%"
theme="dark"
></saytv-chat>See the Attributes Reference for all available options.
Programmatic Control
All attributes are reactive. Update them with setAttribute():
js
const chat = document.querySelector('saytv-chat');
// Switch theme
chat.setAttribute('theme', 'dark');
// Update auth token
chat.setAttribute('auth-token', newToken);
// Resize
chat.setAttribute('height', '600');
chat.setAttribute('width', '100%');Listening to Events
The widget dispatches custom events that you can listen to:
js
const chat = document.querySelector('saytv-chat');
chat.addEventListener('stv:ready', () => {
console.log('Widget is ready');
});
chat.addEventListener('stv:user-login', (e) => {
console.log('User logged in:', e.detail.user);
});
chat.addEventListener('stv:message-sent', (e) => {
console.log('Message sent:', e.detail.message);
});
chat.addEventListener('stv:message-received', (e) => {
console.log('New message:', e.detail.message);
});
chat.addEventListener('stv:episode-changed', (e) => {
console.log('Episode selected:', e.detail.episode);
});
chat.addEventListener('stv:error', (e) => {
console.error('Error:', e.detail.error);
});Custom Theming
Override CSS custom properties via inline styles:
html
<saytv-chat
app-id="your-app-id"
theme="light"
style="
--stv-color-primary: #4f46e5;
--stv-color-accent: #10b981;
--stv-bg-primary: #fafafa;
--stv-border-radius-md: 12px;
--stv-font-primary: 'Inter', sans-serif;
"
></saytv-chat>See Theming for the full list of CSS custom properties.
Dynamic Creation
You can create the widget element programmatically:
js
import '@saytv/chat-sdk/widget';
const chat = document.createElement('saytv-chat');
chat.setAttribute('app-id', 'your-app-id');
chat.setAttribute('theme', 'dark');
chat.setAttribute('height', '700');
chat.setAttribute('width', '100%');
document.getElementById('chat-container').appendChild(chat);Removing the Widget
Remove the element to unmount and clean up:
js
const chat = document.querySelector('saytv-chat');
chat.remove();The widget automatically cleans up all connections and event listeners when removed from the DOM.