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

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
--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

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)