Cute Hearts 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!
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 | Hide/show badges |
| Hide Right Hearts | Hide hearts on the right of a message |
| Distance Between Messages | Distance between messages |
| Font Name | Font name any google font |
| Username Font Weight | Font thickness of the username |
| Message font weight | Font thickness of the message |
| Font Size | Size of the font |
| Face Heart Color | Color of the hearts with a face |
| Heart Color | Color of the hearts without a face |
| Graphic Outline Color | Color of the hearts outline |
| Message Text Color | Color of the message text |
| Message Background Color | Color of the message background |
| Message Corner Roundness | Roundness of the message text box |
| Message Shadow Size | Size of the message shadow |
| Message Shadow Color | Color of the message shadow |
| Message Outline Size | Size of the message outline |
| Message Outline Color | Color of the message outline |
| Use Twitch Name Color | Use colors of twitch name for username |
| Name Text Color | Color of username text |
| Name Background Color | Color of username background |
| Name Corner Roundness | Roundness of the username text box |
| Name Shadow Size | Size of the username shadow |
| Name Shadow Color | Color of the username shadow |
| Name Outline Size | Size of the username outline |
| Name Outline Color | Color of the username outline |
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 | Description |
|---|---|
| Use Blocklist As Allowlist | Use the blocklist as an allowlist |
| Block/Allow List | List of users to block/allow. Case insensitive, comma seperated |
| Hide Message Time (0 = never) | Hide message after x seconds, 0 = never hide |
| Ignore Commands | Ignore messages starting with command symbol |
| Command Symbol (To Ignore) | Command symbol to check for |
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!