Multi-chat Widget

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.

Available CSS Classes

Class	Description
`.chat-message-container`	Individual message container
`.chat-messages-container`	Main container for all chat messages
`.chat-container`	Outer wrapper for chat messages
`.chat-message-text`	The actual message text content
`.chat-message-username`	Username display
`.chat-message-mention`	@mentions within messages
`.chat-message-link`	Links within messages
`.chat-message-timestamp`	Message timestamp
`.chat-message-provider-logo`	Platform logo (Twitch, YouTube, etc.)
`.chat-message-meta-container`	Platform, Badges, Timestamp, username conatiner

CSS Variables

Variable	Description	Example
`--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-widget-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);
}