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 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-widget-message	Widget item wrapper for messages and notices
.chat-widget-message--message	Widget item wrapper for chat messages
.chat-widget-message--notice	Widget item wrapper for notices
.chat-widget-message--subtype-*	Widget item wrapper for a specific subtype
.chat-message-container	Individual message container
.chat-widget-notice-line	Individual notice line
.chat-widget-notice-type	Notice subtype/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	Platform, Badges, Timestamp, username container
.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-username-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-size-scale CSS variable.

View CSS

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

Fixed chat bubble width

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

View CSS

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

Hide a notice subtype

When notices are enabled, every widget item has data-chat-message-type, data-chat-sub-type, and data-chat-provider attributes. You can hide a specific subtype with CSS.

View CSS

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

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: "]";
}