Messenger Chat
Thanks for downloading our Messenger 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 “Messenger 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 | Rewritten Description |
|---|---|
| Box Design | Pick a box design. Note: "Stroke" doesn't work with "Text Bubble". |
| Box Corner Roundness | Adjust how rounded the corners of the box should be. |
| Show Badges | Choose to show or hide user badges. |
| Font Selection | Stick with the default or pick a Google Font. |
| Google Font | Choose a Google Font if you're not using the default font. |
| Font Size | Set the text size. |
| Message Spacing | Adjust the space between messages in pixels. |
| Horizontal Padding | Set the horizontal space between text and the box's edge. |
| Vertical Padding | Set the vertical space between text and the box's edge. |
Behaviour 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 | Rewritten Description |
|---|---|
| Use Blocklist As Allowlist | Choose whether to block or allow specific usernames. |
| Block/Allow List | List usernames to block or allow, separated by commas. |
| Ignore Commands | Skip messages that start with a specific command symbol. |
| Command Symbol (To Ignore) | Set the symbol that identifies commands to be ignored. |
Message Settings
| Name | Rewritten Description |
|---|---|
| X Message Background ColorX | Choose a background color for messages. |
| X Message Name Color | Select a color for usernames. |
| X Message Text Color | Pick a text color for messages. |
| X Message Stroke Color | Choose a color for the message border/stroke. |
| X Message Stroke Size | Set the border/stroke thickness (0 for invisible). |
Event Settings
| Name | Rewritten Description |
|---|---|
| Background Color | Set the background color for events. |
| Name Text color | Choose a color for event names. |
| Label Text Color | Pick a color for labels. |
| Message Text Color | Select a text color for event messages. |
| Border Color | Choose a color for the event border/stroke. |
| Border Size | Adjust the thickness of the border/stroke (0 for invisible). |
Event X Settings
Extends Event Default settings
| Name | Rewritten Description |
|---|---|
| Enable Event | Choose to display this specific event in the widget. |
| Use Default Colors | Apply the default color settings for this event. |
| Show Event Message (Only on Tips/Donations) | Decide to show the message attached to tips/donations. |
| Label Template | Customize the label template string. |
Testing
This section offers a straightforward option for checking the functionality and appearance of your widget:
| Name | Description |
|---|---|
| Enable Testing | Toggle this to display test messages, allowing you to preview and adjust the widget's behavior and appearance before going live. |
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!