Custom Widget

Custom Widgets allow you to create personalized stream overlays using HTML, CSS, and JavaScript. You can build your own widget from scratch or import a compatible widget from StreamElements.

How to create a Custom Widget

1. Open the Sound Alerts Dashboard.
2. Select Scenes from the left-hand menu.
3. Click Add new Scene.

4. Inside the Scene Editor, click Add Widget.
5. Select the Element category.
6. Choose Custom Widget.

7. Enter a title for your widget.
8. Use the available tabs to configure it:

• HTML: Add the structure and content of your widget.
• JS: Add JavaScript functionality.
• CSS: Customize the widget’s appearance.
• Fields: Create customizable settings for the widget.

9. Once your code is ready, click Save Custom Widget.

Your Custom Widget will now appear in the Scene Editor. You can use the settings on the right-hand side to adjust its title, position, width, height, opacity, and any custom fields you have added.

Importing a widget

You can also import compatible widgets instead of building one from scratch:

1. Click Add Widget inside the Scene Editor.
2. Select Import Widget.
3. Add your compatible StreamElements widget.

After adding and positioning your widgets, save the Scene and use the Copy Source URL option to add it to your preferred streaming software as a browser source.

Note: Creating a Custom Widget requires knowledge of HTML, CSS, or JavaScript. Incorrect or unsupported code may prevent the widget from working correctly.