Custom Widget
Table of Contents
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
- Open the Sound Alerts Dashboard.
- Select Scenes from the left-hand menu.
- Click Add new Scene.
- Inside the Scene Editor, click Add Widget.
- Select the Element category.
- Choose Custom Widget.
- Enter a title for your widget.
- 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.
- 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:
- Click Add Widget inside the Scene Editor.
- Select Import Widget.
- 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.
FAQ
A Custom Widget is a personalized overlay element created using HTML, CSS, and JavaScript in the Sound Alerts Scene Editor
Yes. Basic knowledge of HTML, CSS, or JavaScript is recommended when creating a widget from scratch.
Yes. You can use the Import Widget option to add a compatible StreamElements widget
Yes. After adding it to your Scene, you can adjust its position, width, height, and opacity using the settings in the Scene Editor.