Crystal Ball
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 | Description |
|---|---|
| Visual Style | Choose between the "Cat Ritual" or the "Single Crystal Ball" aesthetic. |
| Ask Command | Command to trigger the widget from chat (e.g., !eightball). |
| Show Command | Command to manually show or hide the widget (Broadcasters and Moderators only). |
| Command Permissions | Choose who has permission to use the ask command. |
| Display Mode | Set the widget to be "Always Visible," "Command Triggered" (hidden until asked a question), or "Automatic Popup" (cycles between being hidden and visible). |
| Hidden Duration (seconds) | If using the Automatic Popup mode, the time the widget stays hidden before popping up again. |
| Visible Duration (seconds) | If using the Automatic Popup mode, the time the widget stays visible during each automatic popup. |
| Response Duration (seconds) | How long the magic answer stays visible inside the ball after a question is asked. |
| Queue Cooldown (Seconds) | If multiple questions are asked, how long the ball rests in its idle state between answering them. |
Custom Responses
| Name | Description |
|---|---|
| Custom Positive Responses | Comma-separated list of positive answers to replace the default ones. |
| Custom Neutral Responses | Comma-separated list of neutral or vague answers to replace the default ones. |
| Custom Negative Responses | Comma-separated list of negative answers to replace the default ones. |
Color Adjustments
| Name | Description |
|---|---|
| Cat Color | Adjust the hue of the cat in the background video. |
| Cat Saturation % | Adjust the color intensity of the cat. |
| Cat Brightness % | Adjust the brightness of the cat. |
| Crystal Ball Color | Adjust the hue of the crystal ball itself. |
| Crystal Ball Saturation % | Adjust the color intensity of the crystal ball. |
| Crystal Ball Brightness % | Adjust the brightness of the crystal ball. |
| Cat Eyes Color | Adjust the hue of the glowing cat eyes. |
| Cat Eyes Saturation % | Adjust the color intensity of the glowing cat eyes. |
| Cat Eyes Brightness % | Adjust the brightness of the glowing cat eyes. |
Typography
| Name | Description |
|---|---|
| Main Font | Select a custom Google Font for the text. |
| Default Text | The text displayed inside the crystal ball when idle (e.g., "Ask a Question"). |
| Default Text Color | Choose the color of the idle text. |
| Default Text Size | Adjust the font size of the idle text. |
| Response Text Color | Choose the color of the magic answer text that appears after a question. |
| Response Text Size | Adjust the font size of the magic answer text. |
| Text Shadow Color | Choose the color of the glowing dropshadow behind the text. |
| Text Shadow Intensity | Adjust the opacity and intensity of the glowing text dropshadow. |
Testing
| Name | Description |
|---|---|
| Endless Loop of Responses | Automatically triggers a continuous, endless loop of randomly selected Magic 8-Ball answers. Perfect for testing your video timing and text styling without needing to repeatedly type commands in chat. |
⚠️ 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!
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!