Multi-chat Widget Styling

With Synchra’s Multi-chat Widget you can very easily display your combined chat in OBS or anything else that supports a browser source. It supports Twitch, YouTube, TikTok and Kick. You can customize it to your liking with simple settings and custom CSS in the Dashboard.

Custom CSS

The Chat Widget can be styled using custom CSS. You can target specific elements using the classes below and customize appearance.

CSS Classes

Class	Description
`.chat-container`	Outer wrapper for chat messages
`.chat-messages-container`	Main container for all chat messages
`.chat-message-container`	Individual message container
`.chat-message-meta-container`	Platform, Badges, Timestamp, username conatiner
`.chat-message-icons-container`	Container for platform and badge icons
`.chat-message-provider-logo`	Platform logo (Twitch, YouTube, etc.)
`.chat-message-badges-container`	User badges (subscriber, moderator, etc.)
`.chat-message-badge`	User badge
`.chat-message-username`	Username display
`.chat-message-separator`	Separator between username and message
`.chat-message-text`	The actual message text content
`.chat-message-mention`	@mentions within messages
`.chat-message-link`	Links within messages
`.chat-message-emote`	Emotes within messages
`.chat-message-gift-count`	Gift count display (e.g., “1.000” for bits)

CSS Variables

Variable	Description	Example
`--text-color`	Text color	`#efeff0`
`--border-radius`	Corner roundness	`8px`
`--border-color`	Border color	`#333`
`--border-width`	Border thickness	`2px`
`--background-opacity`	Background transparency	`0.8`
`--background-color`	Background color	`#1a1a1a`
`--text-shadow-color`	Text shadow color	`rgba(0,0,0,0.5)`
`--chat-size-scale`	Size scaling factor	`1`

Example Usage

.chat-message-container {
  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);
}

Examples

Custom size

If any of the predefined sizes do not fit your needs, you can customize the size of the chat widget using the --chat-widget-size-scale CSS variable.

View CSS

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

Fixed chat buble width

You can set a fixed width for chat bubbles to create a more uniform look.

View CSS

.chat-message-container {
  width: 400px;
}

World of Warcraft like chat

Displays of how to manipulate text depending on what badges the user has.

View CSS

.chat-message-icons-container {
  display: none;
}

.chat-message-container span {
  color: var(--text-color) !important;
  font-weight: 500;
}

.chat-message-username::before {
  content: "[";
}

.chat-message-username::after {
  content: "] says";
}

.chat-message-container[data-badges~="subscriber"] span {
  color: #70c973 !important;
}

.chat-message-container[data-badges~="subscriber"]
  .chat-message-username::before {
  content: "[Guild] [";
}

.chat-message-container[data-badges~="subscriber"]
  .chat-message-username::after {
  content: "]";
}

.chat-message-container[data-badges~="vip"] span {
  color: #b0abe4 !important;
}

.chat-message-container[data-badges~="vip"] .chat-message-username::before {
  content: "[Party] [";
}

.chat-message-container[data-badges~="vip"] .chat-message-username::after {
  content: "]";
}

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

.chat-message-container[data-badges~="moderator"]
  .chat-message-username::before {
  content: "[Raid Leader] [";
}

.chat-message-container[data-badges~="moderator"]
  .chat-message-username::after {
  content: "]";
}