@saytv/chat-vue

Vue wrapper for the SayTV Chat SDK — a fully featured, themeable chat widget.

Installation

npm install @saytv/chat-vue

Usage

<script setup lang="ts">
import { SayTVChat, useSayTVChat } from '@saytv/chat-vue';

const { chatRef, setToken, setTheme } = useSayTVChat();
</script>

<template>
  <SayTVChat
    ref="chatRef"
    app-id="your-app-id"
    theme="light"
    :height="700"
    width="100%"
    @message-sent="(e) => console.log('Sent:', e.detail)"
    @error="(e) => console.error('Error:', e.detail)"
  />
</template>

Props

| Prop | Type | Required | Description | |---|---|---|---| | appId | string | No | App identifier (resolves API URL) | | env | 'production' \| 'staging' | No | Environment (default: 'production') | | apiUrl | string | No | API base URL (overrides appId/env) | | authToken | string | No | User access token | | builtInAuth | boolean | No | Enable built-in login UI (default: true) | | fanzone | boolean | No | Enable fanzone features (default: false) | | height | number | No | Height in pixels (default: 850) | | width | string | No | CSS width (default: '450px') | | theme | 'light' \| 'dark' | No | Color theme (default: 'light') | | mode | 'page-chat' | No | Widget mode | | pageId | string | No | Page identifier (used with mode="page-chat") | | pageName | string | No | Page display name (used with mode="page-chat") |

Props use camelCase in script and kebab-case in templates.

Events

| Event | Description | |---|---| | @ready | Widget initialized and ready | | @user-login | User logged in | | @user-logout | User logged out | | @message-sent | Current user sent a message | | @message-received | New message received from another user | | @navigation | Page changed within the widget | | @episode-changed | User selected an episode | | @room-joined | User entered a chat room | | @theme-changed | Color theme switched | | @page-chat-ready | Page chat episode created or reconnected | | @error | SDK error occurred |

All events receive a CustomEvent with relevant data in event.detail.

Composable

const { chatRef, getElement, setToken, setTheme } = useSayTVChat();

| Return | Description | |---|---| | chatRef | Template ref to bind to <SayTVChat> for imperative access | | getElement() | Returns the underlying <saytv-chat> HTMLElement | | setToken(token) | Update the access token | | setTheme(theme) | Switch between 'light' and 'dark' |

Theming

Override CSS custom properties via inline styles:

<SayTVChat
  app-id="your-app-id"
  :style="{ '--stv-color-primary': '#4f46e5' }"
/>

See the @saytv/chat-sdk docs for the full list of CSS custom properties.

License

Proprietary. All rights reserved.