Glass 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!
Behaviour Settings
| Name | Description |
|---|---|
| Use Blocklist As Allowlist | Treat the list as an allowlist instead of a blocklist. |
| Block/Allow List | Comma‑separated usernames to block or allow. Default: streamelements. |
| Ignore Commands | Ignore messages starting with a command symbol. |
| Command Symbol (To Ignore) | Command prefix to ignore. Default: ! |
| Hide Message Time (0 = never) | Seconds before messages auto‑hide. 0 disables. Default: 5. |
Design Settings
| Name | Description |
|---|---|
| Box Design | Message box style: Default, Flipped, Rounded, Square. Default: Default. |
| Box Corner Roundness | Corner radius in px. Default: 16. |
| Show Badges | Toggle Twitch/YouTube badges. Default: enabled. |
| Google Font | Select a Google Font for text. |
| Font Size | Base font size in px. Default: 16. |
| Message Spacing | Vertical gap between messages in px. Default: 16. |
| Horizontal Padding | Left/right padding in px. Default: 16. |
| Vertical Padding | Top/bottom padding in px. Default: 8. |
| Message Name Color | Username color. Default: rgb(200, 200, 200). |
| Message Text Color | Message text color. Default: rgb(200, 200, 200). |
Glassmorphism
| Name | Description |
|---|---|
| Enable Glassmorphism | Toggle glass effect (blur, glow). Default: enabled. |
| Message Background Image | Optional image behind message content. |
| Message Image Opacity | Background image opacity (0–1, step 0.01). Default: 1. |
| Message Background Color | Background color used under glass. Default: rgb(200, 200, 200). |
| Blur Intensity | Backdrop blur (0–20, step 0.1). Default: 12. |
| Background Animation Speed (sec) | Animated background cycle duration in seconds (5–60). Default: 20. |
| Glassmorphism Effect Intensity | Additional effect intensity (0–100). Default: 50. |
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!