Magic 8 Ball Widget
Thanks for downloading our widget!
Here you will find instructions on how to set everything up and an in-depth description of its possibilities.
⚠️ Take note: This widget is hosted on StreamElements and works only with StreamElements donations — make sure you have a StreamElements account before setting it up!
Widget Installation
- Log in to StreamElements with your Youtube or Twitch account
- Go to the “2. Widget” folder in the package you’ve downloaded
-
Pick the file that corresponds to your streaming platform (Twitch or YouTube) and double-click to install it.
Voila! Your widget is installed!
Widget Customization
-
Pick your widget in your StreamElements dashboard and click “Edit”
-
Click on “Layers” and go to your widget.
- Go to the “Settings” tab
- Woohoo, here you can customize everything to your taste :)
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
Customization Fields
⚙️ General Settings
| Name | Rewritten Description |
|---|---|
| 8-Ball Command | Command viewers type in chat to trigger the Magic 8-Ball (for example, !eightball ). |
| Command Permissions | Choose who is allowed to use the 8-Ball command (everyone, subs, VIPs, mods, or broadcaster only). |
| Display Mode | Decide how the 8-Ball appears: always visible, only when triggered by the command, or as an automatic popup. |
| Hidden Duration (seconds) | When using automatic popup mode, how long the widget stays hidden before it appears again. |
| Visible Duration (seconds) | When using automatic popup mode, how long the widget stays visible each time it appears. |
| Response Duration (seconds) | How long the 8-Ball answer stays on screen before returning to the idle state. |
💬 Custom Responses
| Name | Rewritten Description |
|---|---|
| Custom Positive Responses | Comma-separated list of custom positive answers the 8-Ball can give (e.g., “It is certain, Yes definitely”). |
| Custom Neutral Responses | Comma-separated list of custom neutral answers (e.g., “Reply hazy try again, Ask again later”). |
| Custom Negative Responses | Comma-separated list of custom negative answers (e.g., “Don’t count on it, My reply is no”). |
🎱 8-Ball Styling
| Name | Rewritten Description |
|---|---|
| Light Color | Main light color of the 8-Ball surface. |
| Dark Color | Main dark color of the 8-Ball surface. |
| Shadow Color | Color of the 8-Ball’s shadow for depth and lighting. |
| Outline Color | Color of the outer outline around the 8-Ball. |
| Outline Weight | Thickness of the 8-Ball outline. Higher values make the outline bolder. |
| Show White Border | Toggle a white border around the 8-Ball on or off. |
| Inner Circle Light Color | Light color used for the inner circle area on the 8-Ball. |
| Inner Circle Dark Color | Dark color used for the inner circle area on the 8-Ball. |
| Number 8 Color | Color of the number “8” on the ball. |
| Particle Color | Color of the particles that appear during the command animation. |
| Use Custom 8 Image | Enable using your own custom image instead of the default number 8. |
| Custom 8 Image | Upload your custom “8” image to be shown when the option above is enabled. |
💭 Speech Bubble
| Name | Rewritten Description |
|---|---|
| Show Speech Bubble | Turn the speech bubble above the 8-Ball on or off. |
| Speech Bubble Text | Text shown inside the speech bubble (for example, the command like !eightball ). |
| Background Color | Background color of the speech bubble. |
❓ Question Panel
| Name | Rewritten Description |
|---|---|
| Default Text | Text shown in the question panel when the widget is idle (e.g., “Ask a Question”). |
| Background Color | Background color of the question panel. |
| Width | Width of the question panel in pixels. |
| Height | Height of the question panel in pixels. |
| Shadow Size | Size (spread) of the question panel’s drop shadow. |
| Shadow Color | Color of the question panel’s drop shadow. |
| Shadow Opacity | Opacity (transparency) of the question panel’s shadow from 0 (invisible) to 1 (fully opaque). |
✏️ Typography
| Name | Rewritten Description |
|---|---|
| Speech Bubble Font | Font used for the text inside the speech bubble. |
| Speech Bubble Text Color | Color of the text inside the speech bubble. |
| Speech Bubble Text Size | Font size of the speech bubble text. |
| Question Panel Font | Font used for the text in the question panel. |
| Question Panel Text Color | Color of the text in the question panel. |
| Question Panel Text Size | Maximum font size for the question panel text (auto-scales down for longer text). |
| Response Text Font | Font used for the 8-Ball’s answer text. |
| Response Text Color | Color of the text used for the 8-Ball’s answers. |
| Response Text Size | Font size of the text used for the 8-Ball’s answers inside the ball. |
How to Add it to the Streaming Software?
OBS Studio
- Copy the URL of your Widget from the StreamElements dashboard
- Open OBS Studio
- Click “Add Source” (plus icon) in the Sources section.
- Add a “Browser” source, give it a name, and press “Ok”
- Paste the URL you’ve copied
- Set the width to 1920 and the height to 1080
- Press “Ok” and we’re done!
Streamlabs Desktop
- Copy the URL of your Widget from the StreamElements dashboard
- Open Streamlabs Desktop
- Click “Add a new Source” (plus icon) in the Sources section.
- Choose “Browser Source”, give it a name, and press “Add Source”.
- Paste the URL you’ve copied previously
- Set the width to 1920 and the height to 1080
- Now press “Close” and that’s it! Your widget is ready to use!