Custom Overlay Widgets allow you to build brand-new widgets using various events in Mix It Up. These are useful for when a pre-defined Overlay Widget type does not accomplish what you’re looking for. For example, a single Overlay Widget that handles both chat messages and events in a unified display.
These are very advanced Overlay Widgets and not intended for beginner users. It is recommended to start with some of the pre-defined Overlay Widgets and learn how to work with them first before attempting to create a Custom Overlay Widget.
Events
The following events can be enabled for use:
- Chat Messages
- Follows
- Raids
- Twitch Subscriptions
- Twitch Bits
- YouTube Membership
- YouTube Super Chats
- Kick Subscriptions
- Kick Kicks
- Donations
Important: The “YouTube Membership” and “Kick Subscriptions” toggles (and the equivalent Velora Subscriptions toggle) are not functional on their own. All subscription and membership events across Twitch, YouTube, Kick, and Velora are dispatched through the same shared internal events, and those events are only wired up when the Twitch Subscriptions toggle is enabled. Enabling only “YouTube Membership” or “Kick Subscriptions” without also enabling “Twitch Subscriptions” will not receive any subscription/membership events.
When an event is enabled, the corresponding function in the Javascript code will be run every time that event occurs. For example, the ChatMessageReceived() function will be triggered each time a chat message is sent in your stream if that event is enabled.
Each function takes a single parameter called “data” which is a JSON object containing multiple values associated with the event. The default template for the Javascript will automatically log the contents of the “data” parameter out to the Developer Console. You can access this by opening the Overlay Widget in a regular web browser (Edge, Chrome, Firefox) and pressing the F12 key to open the Developer Console.
Custom Properties
Custom properties can be set that can be used within your Overlay Widget. These properties will only be used once when the Overlay Widget is loaded and displayed.
These custom properties can be used just like any other properties in the HTML, CSS, and Javascript by putting { } with the name of the property in-between. For example, if you made a property called “TestProperty”, you can use it in your HTML by putting {TestProperty}.
Running Custom Functions
When building a Custom Overlay Widget, you may often want to implement custom functionality that can be triggered in other areas of Mix It Up. This can be done by using the “Run Widget Function” option on the Overlay Action. This option is usable with all Overlay Widgets, but it becomes particularly useful with Custom Overlay Widgets simply due to the nature of them being custom.
For more information about how to use this, please see the Overlay Action.