Cute Chat Widget
Thanks for downloading our Cute 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 “Cute/Kawaii 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 | Toggle to display or hide badges next to usernames. |
| Distance Between Messages | Set the spacing between messages, with negative values allowed for closer proximity. |
| Font Name | Choose from a range of Google Fonts. |
| Username Font Weight | Adjust the thickness of the username text. |
| Message Font Weight | Set the thickness of the message text font. |
| Font Size | Determine the size of the font used. |
| Line Color | Customize the color of the line beneath the star. |
| Star Color | Select the color for the star graphic. |
| Moon Color | Choose a color for the moon graphic. |
| Cloud Color | Set the color for the cloud graphics. |
| Graphic Outline Color | Modify the outline color for the star, moon, and clouds. |
| Graphic Outline Size | Adjust the thickness of the outline for these graphics. |
| Message Text Color | Change the color of the message text. |
| Message Background Color | Customize the background color of message boxes. |
| Message Corner Roundness | Alter the roundness of the message box corners. |
| Message Shadow Size | Adjust the shadow size for the message boxes. |
| Message Shadow Color | Choose a shadow color for the message boxes. |
| Message Outline Size | Set the thickness of the message box outline. |
| Message Outline Color | Customize the outline color of the message boxes. |
| Username Text Color | Change the color of the username text. |
| Username Background Color | Set the background color for the username boxes. |
| Username Corner Roundness | Adjust the roundness of the corners on the username boxes. |
| Username Shadow Size | Modify the shadow distance for the username boxes. |
| Username Shadow Color | Choose a color for the shadow under the username boxes. |
| Username Outline Size | Set the thickness of the username box outline. |
| Username Outline Color | Customize the outline color for the username boxes. |
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 Allowlsit | Toggle to use the blocklist as an allowlist, changing its function to exclusively permit listed usernames. |
| Block/Allow List | Enter usernames to block or allow. Separate usernames with commas (,). |
| Hide Message Time (0 = never) | Set the time in seconds after which messages will be automatically hidden or animated out. A value of 0 means messages will never be hidden. |
| Ignore Commands | Choose whether to ignore user commands in the chat. |
| Command Symbol (To Ignore) | Specify a symbol to identify messages as commands, which will then be ignored if 'Ignore Commands' is enabled. |
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!