Halloween Chat Widget
Thanks for downloading our Halloween Chat 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!
Setup Guide
- 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 “Halloween Chat"
- Go to the “Settings” tab
- Woohoo, here you can customize everything to your taste :)
Customization Options
⚠️ 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!
Design Settings
The Design Settings section allows you to personalize various aspects of your widget's appearance. From adjusting text features to modifying graphic details, these settings enable you to create a visually cohesive and appealing chat that fits to your stream aesthetics.
| Name | Description |
|---|---|
| Show Badges | Show or hide badges next to usernames. |
| Hide Left Skull & Bone | Toggle visibility of the left skull and bone graphic. |
| Hide Right Icon | Toggle visibility of the right icon. |
| Distance Between Messages | Adjust the spacing between messages. |
| Font Name | Select a Google font for the text. |
| Username Font Weight | Set the thickness of the username text. |
| Username Font Size | Adjust the size of the username text. |
| Message Font Weight | Set the thickness of the message text. |
| Message Font Size | Adjust the size of the message text. |
| Line Color | Change the color of the left bone or line. |
| Right Icon Select | Choose an icon to display on the right side. |
| Right Icon Color 1 | Set the first color of the right icon's gradient. |
| Right Icon Color 2 | Set the second color of the right icon's gradient. |
| Skull Color | Choose a color for the skull graphic. |
| Skull Background Color | Set the background color behind the skull. |
| Skull Border Color | Change the color of the skull's border. |
| Skull Border Width | Adjust the thickness of the skull's border. |
| Skull Border Padding | Set the space between the skull and its border. |
| Skull Size | Adjust the size of the skull graphic. |
| Message Text Color | Choose a color for the message text. |
| Message Background Color One | Set the first color of the message background gradient. |
| Message Background Color Two | Set the second color of the message background gradient. |
| Message Background Wave Color | Change the color of the wave details in the message background. |
| Message Corner Roundness | Adjust how rounded the message corners are. |
| Message Outline Size | Set the thickness of the message border. |
| Message Outline Color 1 | Choose the first color of the message outline gradient. |
| Message Outline Color 2 | Choose the second color of the message outline gradient. |
| Message Inner Outline Color | Set the color of the inner message outline. |
| Message Inner Outline Size | Adjust the thickness of the inner message outline. |
| Message Inner Outline Padding | Set the space between the inner and outer message outlines. |
| Name Text Color One | Set the first color of the username text gradient. |
| Name Text Color Two | Set the second color of the username text gradient. |
Behavior Settings
The Behavior Settings section provides options to control how your chat widget interacts with user input and manages message visibility. These settings are crucial for maintaining the desired atmosphere in your chat and stream.
| Name | Description |
|---|---|
| Use Blocklist As Allowlist | Use the blocklist as an allowlist instead. |
| Block/Allow List | Enter a list of usernames to block or allow (comma-separated). |
| Hide Message Time (0 = never) | Set how many seconds before messages disappear (0 means they stay visible). |
| Ignore Commands | Ignore messages that start with a command symbol. |
| Command Symbol (To Ignore) | Specify the symbol used for commands to ignore. |
Testing
This section offers a straightforward option for checking the functionality and appearance of your widget:
| Name | Description |
|---|---|
| Enable Testing | Turn testing messages on or off. |
Size and Opacity
This widget is fully responsive - you can change its size however you want to and it will always look nice. To do that simply follow these steps:
- Open “Position, size and style” menu
- Change height, width, and opacity to your liking
⚠️ 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!