Super Awesome Name Spinner (SANS) for Live Streaming
This Streamer.bot extension allows streamers to spin to select a user at random. All controls can be manage via command or deck button and the spinner itself can be customized to fit nearly all stylings. Inspiration/styling came from this OG Codepen
How-To Incorporate the Super Awesome Name Spinner (SANS) Live Stream Video Tutorial
<< VIDEO COMING SOON >>
Download from Ko-fi
You MUST have the WebSocket server enabled in Streamer.bot for this extension to work.
To enable the WebSocket Server, click on Servers/Clients, then WebSocket Server and ensure Auto Start WebSocket Server is checked (and if not already started, press Start Server).
Adding the Super Awesome Name Spinner to Streaming Software
You can use SANS straight out of the box and it will work just fine. To do so, create a new Browser Source in your streaming software and then paste the following link:
https://mustachedmaniac.com/widgets/Spinning_Names
Customizing SANS to Match your Asthetic
There are several URL parameters that can be added to the end of the link above to customize SANS to your liking.
| Parameter | Example | Description |
|---|---|---|
| host | 192.168.1.1 | Only needed if your Streamer.bot websocket address is NOT on 127.0.0.1 |
| port | 8118 | Only needed if your Streamer.bot websocket port is NOT on 8080 |
| endpoint | "/stuff" | Only needed if your Streamer.bot websocket endpoint is NOT on "/" |
| password | "mYsEcReTp@$$w0rd" | Only needed if you have authentication enabled on your Streamer.bot websocket |
| duration | 30 | Adjust the length of the spin. Can be 5-60 seconds (default is 10) |
| align | left | Set the text to be aligned to the left / center / right of the box (default to center) |
| font | Roboto | Accepts system and Google fonts |
| color | red | Pick a different text color. Accepts names or hex values (defaults to white) |
| bg | #000000 | Pick a different background color. Accepts names or hex values (defaults to no background) |
For the FIRST parameter, add a ? after the URL. All subsequent parameters require &. For example, changing the font to Poppins, the font color to red, the spin duration to 20 seconds, and aligning the spinner to the right would look like this:
https://mustachedmaniac.com/widgets/Spinning_Names?font=Poppins&color=red&duration=20&align=right