Bubble Chat

Add a floating chat launcher to your site - the familiar bottom-corner bubble used by Intercom, Drift, and other live chat tools. Users click it to open a chat panel that slides up over your page.

How It Works

The <saytv-chat-bubble> element renders a circular floating button (the "launcher") fixed to a corner of the viewport. When clicked, it opens a chat panel containing the full <saytv-chat> widget. The inner widget is created lazily on first open, keeping initial page load fast.

Key features:

• Lazy loading - The chat widget is only created when the user first opens the panel
• Unread badge - Shows a count of messages received while the panel is closed
• Greeting tooltip - Optional tooltip that appears after a delay to prompt engagement
• Mobile full-screen - The panel automatically goes full-screen on small viewports
• Keyboard support - Press Escape to close the panel
• Outside click - Click outside the panel to dismiss it

Quick Start

Package Manager

import '@saytv/chat-sdk/bubble';

Then place the element anywhere in your HTML:

<saytv-chat-bubble
  app-id="your-app-id"
  auth-token="USER_JWT"
></saytv-chat-bubble>

CDN (Script Tag)

<script type="module">
  import 'https://sdk.saytv.net/@saytv/chat-sdk@latest/dist/bubble.mjs';
</script>

<saytv-chat-bubble
  app-id="your-app-id"
  auth-token="USER_JWT"
></saytv-chat-bubble>

IIFE Bundle

<script src="https://sdk.saytv.net/@saytv/chat-sdk@latest/dist/bubble.iife.js"></script>

<saytv-chat-bubble
  app-id="your-app-id"
  auth-token="USER_JWT"
></saytv-chat-bubble>

Async Loader

The loader also supports a bubble action:

<script type="module" src="https://sdk.saytv.net/@saytv/chat-sdk@latest/dist/loader.mjs"></script>
<script>
  SayTVChat('bubble', {
    appId: 'your-app-id',
    authToken: 'user-jwt-token',
    position: 'bottom-right',
    greeting: 'Need help? Chat with us!',
  });
</script>

Configuration

All <saytv-chat> attributes (like app-id, env, auth-token, theme, mode, page-id) are passed through to the inner widget automatically. The bubble adds its own attributes for positioning and appearance.

<saytv-chat-bubble
  app-id="your-app-id"
  auth-token="USER_JWT"
  theme="dark"
  position="bottom-right"
  bubble-color="#7e171c"
  bubble-size="60"
  greeting="Need help? Chat with us!"
  greeting-delay="3"
  chat-width="350"
  chat-height="600"
></saytv-chat-bubble>

Framework Wrappers

The bubble is a standard web component (<saytv-chat-bubble>) and works in any framework. React and Vue wrapper components for the bubble are planned for a future release. In the meantime, use the custom element directly — it works out of the box in React, Vue, Svelte, Angular, and plain HTML.

Next Steps

• Bubble Attributes - Full attribute reference for positioning, sizing, and appearance
• Bubble API & Events - JavaScript API methods and custom events
• Bubble Customization - Advanced styling, custom launchers, and CSS custom properties