Celestial Mystic 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

  1. Log in to StreamElements with your Youtube or Twitch account
  2. Go to the “2. Widget” folder in the package you’ve downloaded

  3. 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

  1. Pick your widget in your StreamElements dashboard and click “Edit”

  2. Click on “Layers” and go to your widget.

  3. Go to the “Settings” tab

  1. 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!

🧩 Layout

Name Description
Message Spacing Controls vertical spacing between message cards.
Top Fade (%) Percentage of fade effect applied at the top of the chat container.

🎴 Card Design

Name Description
Card Padding Internal padding within each message card.
Card Corner Radius Border radius for rounded card corners.
Card Border Width Thickness of the card border.
Card Blur Backdrop blur effect applied to message cards.
Show Sparkles Toggles animated sparkle effects on message cards.
Show Badges Toggles platform badges beside usernames.
Show Role Label Toggles role labels (e.g., Moderator, Subscriber) on messages.
Show Emotes Enables rendering emotes inside message text.
Show Timestamp Toggles timestamp display on messages.
Timestamp Format Format for timestamps: 24 Hour (14:30) or 12 Hour (2:30 PM).

🔤 Typography

Name Description
Name Font Google Font for the username.
Name Font Weight Font weight for the username (Normal, Medium, Semi Bold, Bold, Extra Bold, Black).
Message Font Google Font for message text.
Message Font Weight Font weight for message text (Normal, Medium, Semi Bold, Bold).
Name Font Size Username font size in pixels.
Message Font Size Message font size in pixels.
Name Letter Spacing Tracking for the username text.
Message Line Height Line height for message text.
Role Font Size Font size for role labels.
Role Padding Y Vertical padding for role labels.
Role Padding X Horizontal padding for role labels.

🎨 Colors

Name Description
Accent Color Primary accent color used for highlights and decorative elements.
Border Color Color of card borders and accent lines.
Text Color Default text color for messages.
Card Background Background color for message cards (supports transparency).
Avatar Background Background color behind avatars.
Glow Color Color of the glow effect applied to cards.
Glow Intensity Strength of the glow effect (0-40).

👤 Avatar

Name Description
Avatar Size Outer size of the avatar container in pixels.
Avatar Inner Size Size of the actual avatar image within the container.
Avatar Grayscale Grayscale amount applied to avatar images (0-1).
Avatar Contrast Contrast adjustment for avatar images (0.5-3).
Avatar Brightness Brightness adjustment for avatar images (0.5-2).
Show Avatars Toggles avatar display.
Avatar Mode Twitch: Twitch Avatar / Initials / Mystic Sigils. YouTube: YouTube Avatar / Initials / Mystic Sigils.
Mystic Sigil Size Size of mystic sigil symbols when using sigil avatar mode (10-24).

✨ Sparkles

Name Description
Sparkle Count Number of sparkles displayed per message card.
Sparkle Min Size Minimum size of sparkles in pixels.
Sparkle Max Size Maximum size of sparkles in pixels.
Sparkle Color Color of the sparkle effects.
Sparkle Opacity Opacity of sparkles (0-1).
Sparkle Duration Base duration of sparkle animations in seconds (0.5-6).
Sparkle Duration Jitter Random variation added to sparkle duration for natural effect (0-2).

⚙️ Behavior

Name Description
Use Twitch Name Color (Twitch only) Uses the Twitch user's chat color for the name.
Use Custom Name Color (YouTube only) Uses custom name colors on YouTube.
Max Messages Maximum number of messages kept on screen.
Hide Message Time (0 = never) Auto-remove messages after N seconds (0 disables).
Ignore Commands Ignores messages starting with the command symbol.
Command Symbol Prefix to treat as a command (e.g. !  ).
Use Blocklist As Allowlist Treats the list as an allowlist instead of a blocklist.
Block/Allow List Comma-separated list of usernames to block/allow.

🧪 Testing

Name Description
Enable Testing Generates test messages locally.
Testing Interval (seconds) Time between test messages (0.5-10).

Size and Opacity

  1. Open “Position, size and style” menu

  1. 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

  1. Copy the URL of your Widget from the StreamElements dashboard
  2. Open OBS Studio
  3. Click “Add Source” (plus icon) in the Sources section.
  4. Add a “Browser” source, give it a name, and press “Ok”
  5. Paste the URL you’ve copied
  6. Set the width to 1920 and the height to 1080
  7. Press “Ok” and we’re done!

Streamlabs Desktop

  1. Copy the URL of your Widget from the StreamElements dashboard
  2. Open Streamlabs Desktop
  3. Click “Add a new Source” (plus icon) in the Sources section.
  4. Choose “Browser Source”, give it a name, and press “Add Source”.
  5. Paste the URL you’ve copied previously
  6. Set the width to 1920 and the height to 1080
  7. Now press “Close” and that’s it! Your widget is ready to use!