playercards
← Back to setup guideSetup guide

OBS & Streamlabs

One browser source, one link. The widget fits its box by itself – no pixel fiddling.

Add the browser source

  1. Open Widgets in your creator dashboard, pick a layout and copy the widget link.
  2. In OBS, open the scene you stream with. Under Sources click +, then Browser.
  3. Name it (for example “PlayerCard”) and click OK.
  4. Paste the link into the URL field.
  5. Set Width and Height to the size below, then click OK.
  6. Drag the source where you want it and scale it with the corner handles. Leave the custom CSS as it is: the background is transparent on its own.

Size and FPS

Pick the size that matches the shape of your layout. The widget adapts to any shape, so these are starting points, not limits.

The widget has no FPS setting of its own. 30, the OBS default, is plenty. Set 60 only if your stream runs at 60 and you want number rolls and slide changes as smooth as the rest of the scene.

  • Wide – rotation, compact bar800×200
  • Square – mini, last match400×400
  • Tall360×640
  • FPS30

Scale, do not fiddle

Dragging the frame in OBS only scales the widget. Set the size once in the source properties, then scale with the handles.

Using sponsor slides? Keep Width and Height at least as big as the editor says. A source that is too small makes the sponsor too small to read.

Visibility options

Shutdown source when not visible: we recommend leaving it off. The widget keeps its live connection, so the numbers are ready the moment the scene shows. If you switch it on, the widget simply reloads and fetches the current values.

Refresh browser when scene becomes active: not needed. Switch it on only if the widget ever shows old values after a scene change.

Several widgets and scenes

Each widget has its own link. Add one browser source per widget.

To use the same widget in several scenes, add it from the existing sources (Sources → + → Add Existing) instead of pasting the link again.

Streamlabs

  1. In Streamlabs Desktop, open your scene. Under Sources click +, then Browser Source.
  2. Paste the widget link into the URL field and enter the size from above.
  3. Everything else works as in OBS, including the same two visibility options.

Something is off?

Widget is blank: copy the link again from your dashboard and paste it fresh. A link that was regenerated or deleted stops working at once. Then right-click the source, open Properties and click Refresh cache of current page.

Sponsor too small: open the source Properties and set Width and Height to at least the size the editor shows. Dragging the frame only scales it.

Live values missing: the live source needs the match-data file. The widget falls back to FACEIT and Steam numbers without it. See the steps below. Also check that Privacy mode is off: it hides the live values until you switch it off, or after 90 minutes on its own. The widget itself stays visible.

Link leaked: in the dashboard, generate a new link. The old one stops working at once. Paste the new one into OBS.

Live values from CS2

Download the match-data file in Settings, then put it in your CS2 cfg folder. Do not rename it, and do not add it to your autoexec – CS2 reads it by itself when it starts. Restart CS2 afterwards.

Windows may hide file extensions. Check the name is not ending in .cfg.txt.

  • File namegamestate_integration_playercards.cfg
  • Folder…\steamapps\common\Counter-Strike Global Offensive\game\csgo\cfg\
← Back to setup guide