Cute Chat 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 :)
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!
⚙️ Behavior Settings
| Name | Description |
|---|---|
| Horizontal Layout (Right → Left) | Choose to display messages horizontally, moving from right to left. |
| Horizontal Alignment | Adjust the vertical alignment of messages in the horizontal layout. |
| Use Blocklist As Allowlist | Choose whether to block or allow specific usernames. |
| Block / Allow List | List usernames to block or allow, separated by commas. |
| Hide Message After (seconds) | Set the amount of time in seconds before a message fades out (0 = never). |
| Ignore Commands | Skip messages that start with a specific command symbol. |
| Command Symbol | Set the symbol that identifies commands to be ignored. |
✨ Design - General
| Name | Description |
|---|---|
| Show Badges | Choose to show or hide user badges. |
| Floating Card Symbols | Enable or disable the animated deco symbols (stars, hearts, etc.) inside cards. |
| Google Font | Stick with the default or pick a Google Font for all text. |
| Kawaii Accent Color | Set the primary accent color for the widget decorations. |
| Left / Right Padding | Adjust the side padding for the entire widget area. |
| Space Between Messages | Set the vertical/horizontal gap between message bubbles. |
🎨 Design - Color Palette
| Name | Description |
|---|---|
| Slot X — Header | Set the color for the header part of the message card (Palette 1-5). |
| Slot X — Body | Set the color for the main body part of the message card (Palette 1-5). |
📛 Design - Name Header
| Name | Description |
|---|---|
| Font Size | Set the text size for usernames in the header. |
| Font Weight | Choose how bold the usernames should appear. |
| Horizontal Padding | Adjust the left and right space inside the name header. |
| Vertical Padding | Set the top and bottom space inside the name header. |
💬 Design - Message
| Name | Description |
|---|---|
| Font Color | Select the text color for chat messages. |
| Font Size | Set the text size for the message body. |
| Font Weight | Choose the boldness level for message text. |
| Border Color | Select the color for the message bubble border and shadow. |
| Border Size | Adjust the thickness of the message bubble border. |
| Border Roundness | Set how rounded the corners of the message bubbles should be. |
| Shadow Color | Pick the color for the 2D "block" shadow under the bubble. |
| Shadow Size | Adjust the depth of the 2D shadow effect. |
| Horizontal Padding | Set the side padding inside the message body. |
| Vertical Padding | Set the top and bottom padding inside the message body. |
💗 Event Settings
| Name | Description |
|---|---|
| Enable Event Alert | Toggle specific event notifications (Follow, Sub, Tip, etc.) on or off. |
| Event Color | Choose a custom accent color for specific event notifications. |
| Template | Customize the message template (e.g., "{{name}} just followed ♡"). |
⚠️ Take note: Twitch events include Follow, Subscription, Gift, Raid, Cheer, and Tip. Youtube events include Tip, Sponsor, Super Chat, and Gift.
Testing
| Name | Rewritten Description |
|---|---|
| Enable Testing | Toggle on to see sample messages and events while customizing in the editor. |
Size and Opacity
- 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!