Connect your own HTML widget

1. Save the widget on your streaming computer

Use this route when you already have an HTML widget that supports Bloopbot’s widget connection. For a widget designed inside Bloopbot, use its hosted URL instead.

Open Alerts → Custom widget setup. In Find your widget, enter the path to the HTML file on the computer running OBS and press Save path. A file on a different computer will not be available to OBS.

2. Copy the complete URL

1. Copy the Full Browser Source URL generated by the setup page.
2. Create a Browser Source in OBS and paste it into the URL field. Keep the connection parameters attached.
3. Use 1920 × 1080, a transparent background and Shutdown source when not visible as indicated in the setup page.
4. Open the scene and check Test delivery for a connection, then send the matching sample.

Build a widget from the brief

The Build a widget with AI section offers Copy brief. The brief explains the widget contract without including secrets. Give it to your assistant, save the resulting HTML on your streaming computer, then connect that file using the setup steps above.

Avoid duplicate events

If an older widget URL includes an sb= parameter, remove it when following Bloopbot’s setup instructions. Also check for duplicate Browser Sources or multiple enabled flows responding to the same event. Test one source and one event path at a time.