Your first widget

A Studio widget is a small web page that OBS loads as a browser source. You listen to events from your platforms with the SDK (Widget), draw them with HTML and CSS, and the Studio validates it, keeps it in versions and gives you the URL for OBS.

The four files

• index.html what goes inside <body>
• style.css the styles
• script.js your code, with Widget already available
• manifest.json the events, the texts and the parameter menu

• index.html only holds the content of <body>. The Studio wraps it in a full page: it links style.css, loads widget.js (the SDK) and then your script.js.
• style.css is plain CSS. The widget background must be transparent so OBS blends it with the scene.
• script.js is your code. Nothing to import: Widget exists from the start and connects by itself to your Streamer.bot (or to TikFinity, for TikTok) using the data in the URL.
• manifest.json declares what the widget uses: the events it listens to, the Streamer.bot actions, the texts in each language, your own files and the parameter menu. Everything Widget reads comes from here; the SDK only delivers the events you declare in events.

Note

No-code widgets (like Alerts) also have a design you edit by dragging. That design generates a part of these same files: the visual editor and the code editor are two ways of editing the same thing.

From the editor to OBS

1. Test. The editor preview is connected to a Streamer.bot simulator: you fire an event from “Test” and your widget receives it as if it came from your channel. With “Test in OBS” you paste a temporary URL in OBS and the same event shows up there, with no Streamer.bot needed.
2. Save version. It validates the draft. Errors block publishing; warnings do not. The last 40 versions are kept and you can restore any of them to the draft.
3. Publish. You choose which version your OBS URL serves (for now, privately: only you, with your URL).
4. Configure. Your URL lives here, along with the parameters saved with it and what the widget needs from Streamer.bot. Changing a parameter does not create a version.
5. OBS. In Sources → + → Browser you paste the URL. A new widget is 800 × 600, which is what OBS proposes by default, so you just accept. In Streamer.bot, turn on its WebSocket server (by default, 127.0.0.1:8080).

Next steps

• See the templates you can start from.
• Read the Widget reference and the one for each event.