This is a custom widget for Stream Elements which displays a visual shout-out when a moderator or the broadcaster invokes the command which includes the target's Twitch avatar.
- Log into StreamElements
- Click
Streaming Tools
>My Overlays
in the side menu - Open your existing overlay, or create a new one
- Click the + symbol at the bottom of the page
- Choose
Static / Custom
>Custom Widget
- In the side bar that pops up, click
Open Editor
- In the HTML tab, replace everything in there with the contents of the html file here.
- In the CSS tab, replace everything in there with the contents of the css file here.
- In the JS tab, replace everything in there with the contents of the js file here.
- In the Fields tab, replace everything in there with the contents of the fields file here.
- Click Done
- Configure the shout out on the newly updated side bar.
- Remember, as with any widget, edit the
Position, size and style
options to your liking.
- Incorporates a queue in case multiple shoutouts are made in quick succession.
- You can use the
[name]
placeholder to indicate the streamer's name. - The
[random]
placeholder picks from a list of random sayings (editable in the JS tab).
A lot of credit to René Chiquete for creating the Shout Out widget that this is heavily based on: https://www.youtube.com/watch?v=zGFhhFit9WQ