Overlay Widgets are persistent visual displays you can add to your stream. Each Overlay Widget type serves a different purpose and multiple Overlay Widgets of the same type can be created to serve different purposes (EX: A Chat Overlay Widget for regular streams and another one for Halloween streams).
While you are editing an Overlay Widget, updates will appear in real-time as you change values in the widget editor. For the HTML / CSS / JavaScript editors, the preview refreshes on every keystroke (debounced by a short 100ms delay to avoid excessive refresh calls), rather than waiting until you move focus away from the field.
Below are a list of all the current Overlay Widget types:
- Chat
- Custom
- End Credits
- Event List
- Game Queue
- Goal
- HTML
- Image
- Label
- Leaderboard
- Persistent Emote Effect
- Persistent Timer
- Poll
- Stream Boss
- Text
- Video
- Wheel
- YouTube
Single Widget URLs
Overlay Widgets can be assigned to either a specific Overlay Endpoint or can have a dedicated URL assigned to them. This dedicated URL will only show that Overlay Widget. This is useful for Overlay Widgets that you want to have on multiple scenes for your stream without having to set up a dedicated Overlay Endpoint just for a single Overlay Widget.
This option can be used by editing your Overlay Widget and selecting the “Single Widget URL” option under the “Display Option” drop-down at the top of the editor window:
After saving the Overlay Widget, you can access the dedicated URL for the widget by clicking on the link icon for the widget:
Troubleshooting Overlay Widget Changes
When making complex changes to an Overlay, especially involving changes to the HTML, CSS, and Javascript, sometimes it can be difficult to diagnose why something isn’t working the way you expect it to. Below are some recommended ideas:
- Open the Overlay in your regular web browser (Edge, Chrome, Firefox) and press the F12 key to open the Developer Console. In here, you can check for any errors that might be occurring:
- When editing Javascript, you can add console logging to your code to see what might be happening or what a specific value may be. You can see the output of console logging in the Developer Console by clicking on the Console tab. A simple example of doing console logging would be:
console.log("Hello World");
Upgraded Overlay Widgets
Overlay Widgets that were created prior to the Overlay v3 changes (IE, earlier than version 1.2.0.0) still have access to the old HTML formatting that was used for them. This can be useful if you need to reference how you did something prior to the upgrade. If you wish to access the old HTML, you can click on the following button when editing the Overlay Widget, which will copy the old HTML to your clipboard for pasting into a text editor: