Widgets and OBS
What widgets are, where to copy widget links in the client, how to add them to OBS, how they get data locally or from the cloud, the preview window, and fixing display problems.
What is a widget
A widget is a web page that overlays scores, leaderboards, effects and other visuals on your stream. You copy the widget link in the client and add it to OBS as a browser source. During the stream, the widget updates in real time with the gifts the client collects.
Common widgets:
- Main widget: one per preset, showing the main screen of that preset's mode.
- Leaderboard widgets: the anchor leaderboard and the user leaderboard.
- Mode add-on widgets: PK Mode's Effect Scene, Sticker Mode's Gameplay Gift Widget, and Solo Mode's Celebration effect link.
- Extras widgets: voting, lucky draw, timer and more — see Extras overview.
Where to copy widget links
- Main widget: select a preset in Team Setup. The link after Widget Link: in the bottom bar is that preset's main widget link. Click Copy Link.
- Other widgets: in the Workbench under Team Setup, click Widget Settings in the navigation at the top (or scroll down to that section). Each widget row has its own Copy Link button.
- Extras: open a feature and the bottom bar shows that feature's widget link. If a feature has several links, you can switch between them in the bottom bar.
The bottom bar on Home and Reports doesn't show a widget link.
After copying, a Link copied message appears with a recommended size (for example, Best at W1000*H600+), which you'll need in OBS. Widget links don't change when you change settings, so there's no need to copy them again after editing.
The leaderboard widget and user leaderboard widget links under Widget Settings follow your current mode: when you go live with another preset, the leaderboard in OBS switches to that session automatically, with no link change. The leaderboard's name, displayed content and display range, however, come from the preset you copied the link from.
Widget links contain an access credential — anyone with the link can see your widget. Don't share links publicly.
Adding a widget to OBS
- In OBS, click
+under Sources and choose Browser to create a new source. - Paste the copied link into URL.
- Set Width and Height from the recommended size in the message: the number after W is the width and the number after H is the height. For
W1000*H600+, enter width 1000 and height 600. - Click OK and drag the widget to where you want it on screen.
Recommended sizes for each mode's main widget and add-on widgets (the message you see when copying always wins):
| Widget | Recommended size |
|---|---|
| Free Mode main widget | W660*H180+ |
| Solo Mode main widget | W850*H350+ |
| Solo Mode Celebration effect link | W1080*H1960; plays a 3s full-screen celebration when the countdown hits zero and the target is reached |
| PK Mode main widget | W1000*H600+ |
| PK Mode Effect Scene | W1080*H1530+; the message also says Fullscreen: stretch to screen |
| Multi PK main widget | W1200*H600+ |
| Sticker Mode main widget | W1200*H700+ |
| Sticker Mode Gameplay Gift Widget | W546*H570 |
As the client's message says, you can drop the link into OBS as a Browser Source, or into Live Studio as a Link Source.
Local or cloud: one link picks its own route
There's only one kind of widget link — no separate "local link" and "cloud link". Once open, the widget decides where to get its data:
- OBS and the client on the same computer, with the client open and signed in to the account that copied the link: the widget gets data from the local client first.
- When the local client isn't available (for example, OBS runs on another computer): the widget switches to getting data from the server and keeps working. In this case the client on the streaming computer must be able to send data to the server. If the bottom bar shows Status: Server unreachable, cloud widgets won't receive new gifts for the time being.
Either way, the computer running OBS needs internet access, because the widget page and its assets load online.
A few extras only work on the same computer: the Label printer only prints in widgets in OBS on this computer, and the Interactive Fountain only sends real likes and gifts to OBS on this computer. See Label printer and Interactive Fountain.
Preview window
Click Preview at the top-right of the Workbench in Team Setup to open a phone-sized preview window that stays on top. It shows the widget with demo data, doesn't affect your stream and isn't sent to OBS.
- PK Mode and Sticker Mode have more than one widget; switch between them at the top of the window.
- The three color swatches at the top-right switch between Transparent, Dark and Light backgrounds. The pause button pauses the demo.
- Click Debug demo to open Widget test. You can Add points to a chosen anchor, Overtake next, jump to Last 30 sec or Last 10 sec, Reset round, Run full demo, End round and more, to see how the widget looks in each situation. Click Exit demo to close it.
- After you change and save settings in the main window, the preview refreshes.
- If you see "Preview isn’t connected to the widget, so the demo is unavailable.", go back to the main window and click Preview again to retry.
When a widget looks wrong
- Parts missing, a state not showing, or it looks blurry: give it a moment. Effect images and fonts download from the internet, and the first load can take several seconds — longer on a slow connection. Check again once loading finishes, or refresh the browser source in OBS.
- The widget is cut off: make the browser source's width and height a bit larger.
- The widget is empty: check that this widget's switch under Widget Settings is on.
- Data isn't changing: make sure the client is collecting. If OBS isn't on the streaming computer, also check whether the bottom bar shows Status: Server unreachable.
- The widget has sound but viewers can't hear it: enable Control audio via OBS in the browser source's properties.