Viewer Count Widget

Show your combined live viewer count across platforms.

Quick setup

Open the Synchra Dashboard.
Go to Widgets.
Create a Viewer Count widget.
Choose whether to show platform logos.
Click Widget URL and add it to OBS as a Browser Source.

Custom CSS

CSS order: built-in CSS, Theme CSS, then Widget CSS.

<section class="viewer-count-widget" data-live="true">
  <div class="viewer-count-widget__platforms">
    <span class="viewer-count-widget__platform" data-provider="twitch"></span>
  </div>
  <span class="viewer-count-widget__value">1,234</span>
</section>

Class	Description
`.viewer-count-widget`	Root container.
`.viewer-count-widget__platforms`	Platform logo group.
`.viewer-count-widget__platform`	One platform logo.
`.viewer-count-widget__value`	Combined viewer count.

The root has data-live="true" when at least one platform is live and data-live="false" while offline.

Variable	Controls
`--viewer-count-widget-text-color`	Viewer count color.
`--viewer-count-widget-background-color`	Background color.
`--viewer-count-widget-border-color`	Border color.
`--viewer-count-widget-border-width`	Border width.
`--viewer-count-widget-border-radius`	Corner radius.
`--viewer-count-widget-padding`	Inner spacing.
`--viewer-count-widget-logo-size`	Platform logo height.
`--viewer-count-widget-logo-gap`	Space between platform logos.
`--viewer-count-widget-content-gap`	Space between the logos and count.
`--viewer-count-widget-font-family`	Viewer count font.
`--viewer-count-widget-font-size`	Viewer count size.
`--viewer-count-widget-min-width`	Minimum width.
`--viewer-count-widget-max-width`	Maximum width.