Chat

Chat shows your combined Twitch, YouTube, TikTok and Kick chat in OBS and other tools that support browser sources. Use it when you want one chat overlay for every connected platform.

Quick setup

1. Open the Synchra Dashboard.
2. Go to Widgets.
3. Create a Chat widget.
4. Choose the platforms, message types, notices and display settings you want.
5. Click Widget URL and copy the URL.
6. Add it to OBS as a Browser Source.

Customization

You can customize platform icons, badges, timestamps, usernames, message text, emotes, notices, themes, colors, background, border, spacing and size settings.

Custom CSS

Chat can be styled using custom CSS. Start with the built-in settings first. Use custom CSS when you need a specific chat bubble layout, badge treatment, message width, notice filter or theme detail.

CSS order: built-in CSS, Theme CSS, then Widget CSS. Later rules win at equal specificity.

HTML structure

Simplified generated markup for a chat message:

<div class="chat-container chat-size-md">
  <div class="chat-messages-container">
    <div
      class="chat-widget-message chat-widget-message--message"
      data-chat-message-type="message"
      data-chat-sub-type="first_message"
      data-chat-provider="twitch"
    >
      <div class="chat-message-container" data-badges="subscriber moderator">
        <span class="chat-message-meta-container">
          <span class="chat-message-icons-container">
            <span class="chat-message-provider-logo">...</span>
            <span class="chat-message-badges-container">
              <img class="chat-message-badge" alt="" />
            </span>
          </span>
          <span>
            <span class="chat-message-username">Viewer name</span>
            <span class="chat-message-username-separator">:</span>
          </span>
        </span>
        <span class="chat-message-text">
          Message text, <span class="chat-message-mention">@mention</span>,
          <a class="chat-message-link">link</a> or
          <img class="chat-message-emote" alt="emote" />
        </span>
      </div>
    </div>
    <!-- More .chat-widget-message elements -->
  </div>
</div>

A notice uses this content inside the same outer item wrapper:

<div
  class="chat-widget-message chat-widget-message--notice chat-widget-message--subtype-sub"
  data-chat-message-type="notice"
  data-chat-sub-type="sub"
  data-chat-provider="twitch"
>
  <div class="chat-message-container chat-widget-notice-line">
    <span class="chat-widget-notice-header">
      <span class="chat-widget-notice-type">Subscription</span>
      <span class="chat-widget-notice-user">Viewer name</span>
      <span class="chat-message-text chat-widget-notice-text">subscribed</span>
    </span>
    <span class="chat-widget-notice-body"> <!-- Optional -->
      <span class="chat-message-text chat-widget-notice-message">User message</span>
    </span>
  </div>
</div>

Layout: vertical item list; .chat-widget-message is the repeated state wrapper and .chat-message-container is the visible content. Grouped items add .chat-widget-message--group and data-chat-grouped="true".

CSS classes

Class	Description
.chat-container	Full-height root. It owns the widget variables and a size class such as .chat-size-md.
.chat-messages-container	Vertical list of all rendered items. Message order and left/right alignment come from widget settings.
.chat-widget-message	Repeated outer item wrapper used for transitions, filtering and item-level attributes.
.chat-widget-message--message	Added to a normal chat message item.
.chat-widget-message--notice	Added to an activity notice item.
.chat-widget-message--group	Added when consecutive messages are grouped.
.chat-widget-message--subtype-*	Added for a subtype. The suffix is lowercased and non-CSS-safe characters become -.
.chat-message-container	Visible message or notice container inside an item wrapper.
.chat-widget-group-providers	Provider-icon wrapper shown at the start of a grouped message.
.chat-widget-notice-line	Added to .chat-message-container for a notice.
.chat-widget-notice-header	Notice header containing the platform, type, user and notice text.
.chat-widget-notice-body	Notice body containing the user message attached to a notice.
.chat-widget-notice-type	Notice subtype or type label.
.chat-widget-notice-user	User who triggered the notice.
.chat-widget-notice-text	Notice text content.
.chat-widget-notice-message	User message attached to a notice.
.chat-message-meta-container	Inline wrapper for platform, badges and username metadata.
.chat-message-icons-container	Container for platform and badge icons.
.chat-message-provider-logo	Platform logo, such as Twitch or YouTube.
.chat-message-badges-container	User badges, such as subscriber or moderator.
.chat-message-badge	User badge.
.chat-message-username	Username display. Its provider color is set inline, so a forced custom color needs !important.
.chat-message-username-separator	Separator between username and message.
.chat-message-text	Message text content.
.chat-message-mention	Mentions inside messages.
.chat-message-link	Links inside messages.
.chat-message-emote	Emotes inside messages.
.chat-message-gift-count	Gift count display, such as bits.

Data attributes

Attribute	Element	Use
data-chat-message-type="message"	.chat-widget-message	Target normal chat messages.
data-chat-message-type="notice"	.chat-widget-message	Target activity notices.
data-chat-sub-type="<subtype>"	.chat-widget-message	Target the raw message or notice subtype. Omitted when no subtype exists.
data-chat-provider="twitch"	.chat-widget-message	Target the lowercase provider, such as twitch, youtube, tiktok, kick, rumble or owncast.
data-chat-grouped="true"	.chat-widget-message	Target an item made from grouped messages. Omitted on ungrouped items.
data-badges="subscriber moderator"	.chat-message-container	Space-separated badge types on normal messages. Use [data-badges~="subscriber"] token matching.

CSS variables

Variable	Value type	Controls
--text-color	CSS color	Built-in message and notice text color.
--text-shadow-color	CSS color	Built-in four-direction text outline/shadow.
--chat-size-scale	Number	Message text, icons, emotes, gaps and padding scale. Size presets range from 0.5 to 2.5.
--chat-font-size	CSS length	Base message font size before the size scale is applied.
--chat-message-inside-spacing	CSS length	Inline spacing between metadata, icons and message parts.
--chat-widget-font-family	Font family list	Font for the entire widget.
--background-color	CSS color token	Resolved background setting available to custom rules.
--background-opacity	Number from 0 to 1	Resolved background-opacity setting available to custom rules.
--border-color	CSS color token	Resolved border setting available to custom rules.
--border-width	Unitless pixel number	Resolved border-width setting available to custom rules.
--border-radius	Unitless pixel number	Resolved border-radius setting available to custom rules.

Text, shadow, size, spacing and font variables affect built-in CSS. For background and border overrides, set the CSS properties directly.

Custom font

Get a font import, then:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

.chat-container {
  --chat-widget-font-family: "Roboto", sans-serif;
}

Chat bubble style

.chat-message-container {
  box-sizing: border-box;
  max-width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: linear-gradient(145deg, #1a0736, #31176a);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 0 12px rgba(190, 150, 255, 0.25),
    inset 0 0 4px rgba(255, 255, 255, 0.1);
}

Custom size

If the predefined sizes do not fit your layout, customize the size with --chat-size-scale.

.chat-container {
  --chat-size-scale: 0.67;
}

Fixed chat bubble width

Set a fixed width for chat bubbles when you want a more uniform look.

.chat-message-container {
  width: min(400px, 100%);
}

Hide a notice subtype

Use data-chat-sub-type to hide one notice subtype.

.chat-widget-message[data-chat-sub-type="sub"] {
  display: none;
}

Badge-based styling

You can style messages differently based on user badges.

.chat-message-container[data-badges~="subscriber"] {
  border-inline-start: 4px solid #70c973;
  padding-inline-start: 0.75rem;
}

.chat-message-container[data-badges~="vip"] {
  border-inline-start: 4px solid #b0abe4;
  padding-inline-start: 0.75rem;
}

.chat-message-container[data-badges~="moderator"] .chat-message-username {
  color: #e39162 !important;
}