Streamlabs Widget

Build the DashStats Overlay

The preview below is the actual widget route, isolated from the rest of the site so it behaves like a real browser source. Use a synced DashStats username for live data, or leave it blank to keep the sample layout from the sketch.

DashStats Username

Leaving this blank keeps the sketch preview. Filling it in updates the iframe and also injects the username into the exported JavaScript.

Widget size1500 x 360

RefreshEvery 15s

Browser sourceFull widget route

Actual Preview

PlayerName

Route/streamlabs/widget

ModeSample layout

Setup

Add it without guessing.

Streamlabs supports two workable paths here. The custom-widget path gives you full editable code. The browser-source path just points Streamlabs at the dedicated widget route and is the fastest option if you do not need local edits. Both paths now render the same full-background widget.

Create a new Streamlabs Custom Widget.

Set the widget size to 1500 x 360.

Paste the code from the active tab below into the matching HTML, CSS, or JS field.

If you prefer Browser Source instead, use the direct widget URL instead of the three code tabs.

Copy

Paste-ready values.

Use the browser-source URL as the fastest route, or stay with the Custom Widget path and paste the tabbed code blocks below into Streamlabs.

Width

1500

Height

360

Browser Source URL

https://dashstats.net/streamlabs/widget?username=PlayerName

Custom HTML

<div class="ds-streamlabs-widget" data-state="playing">
  <div class="ds-streamlabs-widget__frame">
    <div class="ds-streamlabs-widget__topbar">
      <div class="ds-streamlabs-widget__toplabel">Now Playing</div>
      <div class="ds-streamlabs-widget__topvalue">
        <span data-ds="now-playing-name">ACU</span>
        <span class="ds-streamlabs-widget__difficulty" data-ds="difficulty-wrap">
          (<span data-ds="now-playing-difficulty">Insane Demon</span>)
        </span>
      </div>
    </div>
    <div class="ds-streamlabs-widget__shell">
      <div class="ds-streamlabs-widget__tail" aria-hidden="true"></div>
      <div class="ds-streamlabs-widget__brand">
        <div class="ds-streamlabs-widget__brand-logo-wrap"><img class="ds-streamlabs-widget__brand-logo" src="https://dashstats.net/icon.png" alt="DashStats" /></div>
        <div class="ds-streamlabs-widget__brand-copy">
          <div class="ds-streamlabs-widget__brand-name">DashStats</div>
        </div>
      </div>
      <div class="ds-streamlabs-widget__content">
        <div class="ds-streamlabs-widget__stats">
          <div class="ds-streamlabs-widget__stat">
            <div class="ds-streamlabs-widget__icon ds-streamlabs-widget__icon--level"><svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="32" r="26" fill="none" stroke="currentColor" stroke-opacity=".24" stroke-width="4"/><path d="M32 10l6.8 13.7 15.2 2.2-11 10.7 2.6 15.2L32 44.4 18.4 51.8 21 36.6 10 25.9l15.2-2.2L32 10z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/></svg></div>
            <div class="ds-streamlabs-widget__stat-copy">
              <div class="ds-streamlabs-widget__stat-label">Level</div>
              <div class="ds-streamlabs-widget__stat-value" data-ds="level">56</div>
            </div>
          </div>
          <div class="ds-streamlabs-widget__stat">
            <div class="ds-streamlabs-widget__icon ds-streamlabs-widget__icon--demons"><img class="ds-streamlabs-widget__icon-image ds-streamlabs-widget__icon-image--demon" src="https://dashstats.net/assets/icons/hard-demon.png" alt="" /></div>
            <div class="ds-streamlabs-widget__stat-copy">
              <div class="ds-streamlabs-widget__stat-label">Demons</div>
              <div class="ds-streamlabs-widget__stat-value" data-ds="total-demons">125</div>
            </div>
          </div>
          <div class="ds-streamlabs-widget__stat">
            <div class="ds-streamlabs-widget__icon ds-streamlabs-widget__icon--levels"><svg viewBox="0 0 64 64" aria-hidden="true"><path d="M32 7l19 19-19 31L13 26 32 7z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M32 18l10 10-10 17-10-17 10-10z" fill="currentColor" fill-opacity=".3"/><path d="M32 7v11M13 26h38" fill="none" stroke="currentColor" stroke-opacity=".6" stroke-width="3"/></svg></div>
            <div class="ds-streamlabs-widget__stat-copy">
              <div class="ds-streamlabs-widget__stat-label">Levels</div>
              <div class="ds-streamlabs-widget__stat-value" data-ds="total-levels">980</div>
            </div>
          </div>
        </div>
        <div class="ds-streamlabs-widget__profile-url" data-ds="profile-url">dashstats.net/u/PlayerName</div>
      </div>
    </div>
    <div class="ds-streamlabs-widget__player-name" data-ds="player-name">PlayerName</div>
  </div>
</div>

`Custom JS` already includes PlayerName. Replace that value in Streamlabs later if you want the widget to follow a different player.

Tutorial

Watch the full setup flow.

This walkthrough shows the exact Streamlabs setup process end to end, using the same widget route and copy blocks from this page.

Open the tutorial video directly