Christmas Chat Widget
Thanks for downloading our Christmas 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 “Christmas 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.
| Feature Name | Description |
|---|---|
| Enable Top Fade Out | Turn on or off a fade effect at the top of the widget. |
| Enable Lights/Garland | Add or remove decorative lights below the messages. |
| Name Background Color | Change the background color behind the sender's name. |
| Message Primary Background Color | Set the main background color for messages. |
| Message Secondary Background Color | Set an alternate background color for messages. |
| Sock Color | Customize the sock's color (if used in the design). |
| Even Lights Color | Set the color for even-numbered decorative lights. |
| Uneven Lights Color | Set the color for odd-numbered decorative lights. |
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.
| Feature Name | Description |
|---|---|
| Use Blocklist As Allowlist | Switch the blocklist to work as an allowlist instead, allowing only the specified users. |
| Block/Allow List | Add usernames to block or allow, separated by commas. |
| Hide Message Time (0 = Never) | Automatically hide messages after a set number of seconds (set to 0 to disable). |
| Ignore Commands | Prevent command messages from showing in the widget. |
| Command Symbol (To Ignore) | Specify the symbol used to identify command messages (e.g., ! , / ). |
Font Settings
| Feature Name | Description |
|---|---|
| Font Name | Select a Google Font for text display. |
| Name Font Weight | Adjust how bold the sender's name appears. |
| Name Font Color | Change the color of the sender's name. |
| Name Font Size | Set the text size of the sender's name. |
| Message Font Weight | Adjust how bold the message text appears. |
| Message Font Color | Change the color of the message text. |
| Message Font Size | Set the text size of the message. |
| Alert Name Font Weight | Adjust how bold the name in alerts appears. |
| Alert Name Font Color | Change the color of the name in alerts. |
| Alert Name Font Size | Set the text size of the name in alerts. |
| Alert Message Font Weight | Adjust how bold the alert message text appears. |
| Alert Message Font Color | Change the color of the alert message text. |
| Alert Message Font Size | Set the text size of the alert message. |
Alert Settings
| Feature Name | Description |
|---|---|
| Enable Alert | Turn alerts on or off. |
| Alert Message Template | Customize the alert message format using variables like {{amount}} . |
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!