Bubble Attributes

All configuration for the <saytv-chat-bubble> element is done through HTML attributes. Bubble-specific attributes control the launcher appearance and panel behavior. Standard <saytv-chat> attributes are passed through to the inner widget.

Bubble-Specific Attributes

Attribute	Type	Default	Description
position	'bottom-right' | 'bottom-left'	'bottom-right'	Which corner the bubble is anchored to.
bubble-size	number	60	Diameter of the launcher button in pixels.
bubble-color	string	'#7e171c'	Background color of the launcher button. Accepts any CSS color value.
bubble-icon	string	Built-in chat icon	URL to a custom image for the launcher. The image is displayed as a 32px circle.
offset-x	number	24	Horizontal distance from the viewport edge in pixels.
offset-y	number	24	Vertical distance from the viewport edge in pixels.
chat-width	number	350	Width of the chat panel in pixels. Ignored on mobile (panel goes full-screen).
chat-height	number	600	Height of the chat panel in pixels. Capped at available viewport height. Ignored on mobile.
greeting	string	-	Text shown in a tooltip above the launcher after a delay. Leave empty to disable.
greeting-delay	number	3	Seconds to wait before showing the greeting tooltip.
hide-on-mobile	boolean attribute	-	When present, the bubble is hidden on viewports narrower than 768px.
custom-launcher	string	-	CSS selector for an external element to use as the launcher. Hides the built-in button.
z-index	number	999999	z-index of the bubble element.

Pass-Through Attributes

These attributes are forwarded to the inner <saytv-chat> widget. They work exactly the same as on <saytv-chat> - see the Attributes Reference for full details.

Attribute	Description
app-id	App identifier
env	API environment ('production' or 'staging')
apiurl	Direct API base URL
auth-token	JWT access token
built-in-auth	Show built-in login UI
fanzone	Enable fanzone
theme	Color theme ('light' or 'dark')
mode	Widget mode (e.g. 'page-chat')
page-id	Page chat identifier
page-name	Page chat display name
custom-tab-url	Custom tab iframe URL
custom-tab-label	Custom tab label
custom-tab-icon	Custom tab icon

Positioning

The bubble is anchored to a corner of the viewport using position combined with offset-x and offset-y.

Bottom-right (default)

<saytv-chat-bubble
  app-id="your-app-id"
  position="bottom-right"
  offset-x="24"
  offset-y="24"
></saytv-chat-bubble>

Bottom-left

<saytv-chat-bubble
  app-id="your-app-id"
  position="bottom-left"
  offset-x="24"
  offset-y="24"
></saytv-chat-bubble>

Avoid overlapping other elements

If your site has a cookie banner or bottom navigation, increase the vertical offset:

<saytv-chat-bubble
  app-id="your-app-id"
  offset-y="80"
></saytv-chat-bubble>

Panel Sizing

The chat panel opens above the launcher. Its dimensions are controlled by chat-width and chat-height.

<saytv-chat-bubble
  app-id="your-app-id"
  chat-width="400"
  chat-height="700"
></saytv-chat-bubble>

The panel height is automatically capped so it doesn't overflow the viewport. On mobile (below 768px), the panel goes full-screen regardless of these values.

Greeting Tooltip

Show a message above the launcher to prompt users to engage:

<saytv-chat-bubble
  app-id="your-app-id"
  greeting="Have a question? Chat with us!"
  greeting-delay="5"
></saytv-chat-bubble>

The tooltip appears after greeting-delay seconds and includes a close button. It is automatically dismissed when the user opens the chat panel. If no greeting attribute is set, no tooltip is shown.

Changing the greeting attribute to a new value resets the dismissed state, so the updated greeting will appear again after the delay.

Reactive Updates

All observed attributes are reactive. Changing an attribute at runtime updates the bubble immediately:

const bubble = document.querySelector('saytv-chat-bubble');

// Move to the other corner
bubble.setAttribute('position', 'bottom-left');

// Change the color
bubble.setAttribute('bubble-color', '#0066cc');

// Update greeting text
bubble.setAttribute('greeting', 'New deals available!');

Widget pass-through attributes are also reactive. Changing theme or auth-token on the bubble element updates the inner widget:

bubble.setAttribute('theme', 'dark');
bubble.setAttribute('auth-token', newToken);