Cute Pink Chat
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!
Behaviour Settings
| Name | Description |
|---|---|
| Use Blocklist As Allowlist | Use blocklist as the allowlist |
| Block/Alow List | Comma seperated list of usernames to block/allow |
| Hide Message Time (0 = never) | Time before a messages should fade out, puttin 0 means never fade out messages |
| Ignore Commands | Ignore messages that start with Command Symbol |
| Command Symbol (To Ignore) | Symbol to see if a message is a command |
Design - General
| Name | Description |
|---|---|
| Show Badges | Show/hide badges |
| Show Icon & Dots | Show/hide icon & dots on the right side of the widget |
| Google Font | Select any google font |
| Left Right Spacing | Space between icon & dots and name and message |
| Username Message Spacing | Vertical space between name and message |
| Event Spacing | Spacing between each message and event |
Design - Icon
| Name | Description |
|---|---|
| Icon Size | Size of the icon in pixels |
| Icon Padding | Space between the icon and the outline |
| Icon Border Size | Width of the icon border |
| Icon Border Color | Color of the icon border |
| Icon Color | Color of the icon |
Design - Dot
| Name | Description |
|---|---|
| Dot Size | Size of the dots in pixels |
| Dot Color | Color of the dots |
Design - Star
| Name | Description |
|---|---|
| Star Size | Size of the stars in pixels |
| Star Color | Color of the stars |
Design - Username/Message
| Name | Description |
|---|---|
| Background Color | Color of the background |
| Font Color | Color of the font/text |
| Font Size | Size of the font/text |
| Font Weight | Weight of the font/text |
| Border Color | Color of the border |
| Border Size | Size of the border |
| Border Roundness | Corner roundness |
| Shadow Color | Color of the shadow |
| Shadow Size | Size of the shadow |
| Horizontal Padding | Horizontal space between the text and the bounding box |
| Vertical Padding | Vertical space between the text and the bouding box |
Event - Default (And all other events)
| Name | Description |
|---|---|
| Background Color | Color of the background |
| Font Color | Color of the font/text |
| Font Size | Size of the font/text |
| Font Weight | Weight of the font/text |
| Border Color | Color of the border |
| Border Size | Size of the border |
| Border Roundness | Corner roundness |
| Shadow Color | Color of the shadow |
| Shadow Size | Size of the shadow |
| Horizontal Padding | Horizontal space between the text and the bounding box |
| Vertical Padding | Vertical space between the text and the bouding box |
Event - All events except default
| Name | Description |
|---|---|
| Enable Event | Enable/Disable this event |
| Use Default Colors | Use colors from “Event - Default” instead of custom |
| Template | Template to display information. Includes {{name}} and {{amount}} variables. Also allows the usage of bold, italic, underline & |
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
- 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!