Sizing & Layout

Dimensions

Control the widget size with the height and width attributes:

<saytv-chat
  app-id="your-app-id"
  height="700"
  width="450px"
></saytv-chat>

Attribute	Type	Default	Description
height	number	850	Height in pixels
width	string	'450px'	Width as any CSS value
hide-header	'true' | 'false'	'false'	Hide the top title bar on every page
hide-footer	'true' | 'false'	'false'	Hide the bottom tab-bar navigation

CSS Variables

You can also control dimensions through CSS custom properties:

Property	Default	Description
--stv-widget-width	450px	Widget width
--stv-widget-height	850px	Widget height
--stv-widget-min-height	600px	Minimum height. This is a floor: setting height below it has no effect unless you also lower this variable.
--stv-widget-max-width	1280px	Maximum width
--stv-widget-border-radius	16px	Widget corner radius
--stv-header-height	54px	Header bar height
--stv-footer-height	56px	Footer nav height
--stv-input-height	44px	Input field height

Message spacing & input box

Fine-tune the message list density and the composer (chat input box):

Property	Default	Description
--stv-message-gap	6px	Transparent vertical gap between author groups
--stv-message-gap-grouped	0px	Gap between joined rows within a group (0 = seamless)
--stv-message-padding	4px 12px	Padding inside each message row (vertical horizontal)

Message grouping

Consecutive messages from the same author (sent within a few minutes) are grouped and rendered as a single connected card: only the first row rounds its top corners and only the last rounds its bottom, so a burst of messages reads as one block rather than a stack of separate pills. --stv-message-gap is the space between these groups; --stv-message-gap-grouped is the (usually zero) gap between rows inside a group.

| --stv-input-min-height | 44px | Minimum composer height. This is a floor — the composer grows above it but never shrinks below its inline controls (~44px). | | --stv-input-max-height | 100px | Maximum composer height before it scrolls | | --stv-input-padding | 6px 6px 6px 10px | Padding inside the composer | | --stv-input-font-size | var(--stv-font-size-sm) | Composer text size | | --stv-input-border-radius | var(--stv-border-radius-lg) | Composer corner radius |

<saytv-chat
  app-id="your-app-id"
  style="--stv-message-gap: 12px; --stv-input-min-height: 52px;"
></saytv-chat>

Hiding the Header & Footer

Embed a stripped-down chat by hiding the top title bar, the bottom tab-bar navigation, or both:

<saytv-chat
  app-id="your-app-id"
  hide-header="true"
  hide-footer="true"
></saytv-chat>

• hide-header removes the title bar shown at the top of every page.
• hide-footer removes the bottom tab bar (Chat, Friends, Fanzone, Profile).

Both can be toggled at runtime by setting or removing the attribute.

Getting Back Without a Header

The header normally carries the back button, so hiding it would otherwise strand users on any page they open from within the chat — a hashtag room, another user's profile, the avatar store.

To prevent that, hiding the header automatically brings up a floating back button in the top corner. It appears only when there is somewhere to return to, so the chat itself stays clean, and it disappears again the moment the user is back at the top level. No extra attribute is needed, and you can restyle it with the floating navigation variables.

In page chat, the chat is the top level, so the button never appears on the chat screen itself — only on the hashtag rooms and profiles opened from it.

When you hide the header and the footer, the avatar button floats in the opposite corner on chat pages, keeping avatar customization reachable. It is not shown to guests, who are read-only and cannot change their avatar.

If your site owns the user's avatar, add hide-avatar="true" to remove that button — and every other entry point to the built-in picker. This matters beyond the layout: once a user picks an avatar in the widget, that choice is treated as deliberate and kept in place of the avatar-url you supply, so your own avatars would stop applying for that user.

<saytv-chat
  app-id="your-app-id"
  hide-header="true"
  hide-footer="true"
  hide-avatar="true"
  avatar-url="https://your-site.example/users/42.png"
></saytv-chat>

WARNING

The bottom tab bar is still the only built-in way to reach the Friends, Fanzone, and Profile pages. When you hide it, provide those entry points yourself, or pair it with page chat / a single-episode embed where they aren't needed.

Hiding Features You Have Not Launched

The widget ships the whole product. If part of it is not something you offer yet, five attributes remove it — each on its own, so switching one off leaves the rest alone:

Attribute	What it removes
hide-badges	The Badges card on the profile screen and its page
hide-leaderboard	The Leaderboard card and its page
hide-emoji-store	The Emojis card and the emoji store page
hide-avatar-store	The Avatars card and the avatar store page
hide-user-profiles	Tapping a message author, or a name in the member list, to open their profile

<saytv-chat
  app-id="your-app-id"
  hide-badges="true"
  hide-leaderboard="true"
  hide-user-profiles="true"
></saytv-chat>

Viewers keep their own profile in every case — it is where they set their name and avatar. With hide-user-profiles, names and avatars still appear in the chat; they simply stop being links.

Each attribute also guards its page, not just the link to it. You can set these at runtime and the widget follows immediately, including when someone is already on a page you have just switched off.

Full-Width Layout

To make the widget fill its container:

<saytv-chat
  app-id="your-app-id"
  width="100%"
  height="700"
></saytv-chat>

Responsive Container

Wrap the widget in a responsive container:

<div style="max-width: 500px; margin: 0 auto;">
  <saytv-chat
    app-id="your-app-id"
    width="100%"
    height="700"
  ></saytv-chat>
</div>

Full-Page Chat

For a full-viewport chat experience:

<style>
  html, body { margin: 0; padding: 0; height: 100%; }
  .chat-fullpage { width: 100%; height: 100vh; }
</style>

<div class="chat-fullpage">
  <saytv-chat
    app-id="your-app-id"
    width="100%"
    style="--stv-widget-height: 100vh; --stv-widget-border-radius: 0;"
  ></saytv-chat>
</div>

TIP

When using 100vh, set --stv-widget-border-radius: 0 to remove the widget's corner rounding for a flush full-page look.

Container Queries

The widget automatically adapts its layout based on the available width. You don't need to configure anything - it adjusts its UI at different sizes.

Avatar Sizes

Property	Default	Description
--stv-avatar-size-sm	28px	Small avatars (message list)
--stv-avatar-size-md	36px	Medium avatars (headers)
--stv-avatar-size-lg	56px	Large avatars (profiles)
--stv-avatar-size-xl	80px	Extra large avatars (profile page)