Night Sky Chat
Thanks for downloading our Night Sky 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 “Night Sky 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!
General 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 ap
| 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 & |
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 at
| 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 |
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!