Skip to content

Full widget settings guide

Redo edited this page Dec 29, 2025 · 2 revisions

Setup

Select a font: (fonts.google.com) - What font from google fonts should the widget use?

Global font size: (px) - The font size which controls a lot of things. Use this as a "scale" of the widget.

User currency type: Code (ex. USD) Symbol (ex. $) - How should the currency be displayed on tips/donations?

This will display the currency you have set up on StreamElements

User currency position: Left of amount Right of amount - Which side of the amount to display the currency on?

Chat direction: Ascending Descending - Should the incoming messages go from top to bottom (descending), or bottom to top (ascending)

Message gap: (px) - How many pixels of empty space should be between each message?

Chat padding: (px) - How much empty space should there be around the edges of the widget?

It's good to set it to a decently big number to prevent clipping.

Message width: To 100% of widget width To fit message width - Should the messages stretch to 100% of the width of the widget, or should they conform to the width of the message?

# of messages visible simultaneously: - What's the max amount of messages that should be visible at once?

Any message after that # would cause the oldest message to disappear.

Hide after #s (999 to disable) - How long should each message stay visible?

Smooth scroll duration:(ms, 0 to disable) - How long should the shifting of existing take place?

Ignored users: (separated by comma) - Names of users to ignore. E.g. NightBot, Somebody123

Show pronouns - Should a pronoun be visible next to the user's name?

Pronouns are only visible while the setting is on, and only for users who connected their twitch account on https://pronouns.alejo.io

Show messages starting with "!" - Should messages starting with ! (most likely commands) show up on the widget?

Animations

Animation in: - The animation visible when a new messages comes in.

Animation out: - The animation visible when a message disappears. Either from Hide after, # of messages visible simultaneously, Auto delete messages, or when being removed by a moderator.

Animation duration: (ms) - The duration of the Animation in, and Animation out, as well as some of the osu! Embed animations

Auto Delete Messages

Delete messages before they get cut off - Should messages be automatically deleted before they reach the edge of the widget?

This applies the animation set in Animation out

Auto delete distance: (px) - How many pixels before the edge of the widget should the message be removed?

Usernames

Username font size: (px) - How big should the username be?

Username font weight: - How thick should the username be?

Username letter spacing: - What spacing should the username characters have?

Username text transform: None lowercase Capitalize UPPERCASE - What capitalization should the usernames have?

Username color source: Static color Role color Twitch chat color - What should the color source of the usernames be?

Static color - Color used when Username color source is set to Static color

Regular viewer color - Regular viewer color used when Username color source is set to Role color

Subscriber color - Subscriber color used when Username color source is set to Role color

VIP color - VIP color used when Username color source is set to Role color

Moderator color - Moderator color used when Username color source is set to Role color

Broadcaster color - Broadcaster color used when Username color source is set to Role color

Mention color source: Static color Role color Twitch chat color (Sender's) - What should be the color source of the @mentions?

Static mention BG - Background color used when Mention color source is set to Static color

Static mention text - Text color used when Mention color source is set to Static color

Messages

Show messages - Should messages show up in the widget?

Message style: Regular Compact (Inline) Compact (Stacked) - How should the messages look?

Message alignment: Left Center Right - Which side of the widget should the messages be aligned to?

Message content alignment: Left Center Right - Which side of the message should its contents align to?

Message corner radius: - The corner rounding of the chat message

Show replies - Should replies be visible?

Role BG color: - The background color of the role icon area

Message BG color: - The background color of the message

Message text color: - The text color of the message

Message font size: (px) - How big should the message text be?

Message font weight: - How thick should the message text be?

Message letter spacing: - What spacing should the message characters have?

Message word break: - In what what should overflowing words go into another line?

  • Break word - Break in-between words
  • Break all - Break in-between characters

Emote size: (px) - How big should the emotes be?

Emote only size: (px) - How big should the emotes be in messages which contain only emotes?

Emote quality: Low Medium High - What quality (resolution) should be used for emotes?

Emote only quality: Low Medium High - What quality (resolution) should be used for emotes in messages which contain only emotes?

Role Icons

Subscriber icon source: None Avatar Badge Icon - What icon should the widget use for subscriber messages?

VIP icon source: None Avatar Badge Icon - What icon should the widget use for VIP messages?

Moderator icon source: None Avatar Badge Icon - What icon should the widget use for moderator messages?

Broadcaster icon source: None Avatar Badge Icon - What icon should the widget use for broadcaster messages?

Role icon size: (px) - The size of the role icon when the source is set to Role icon

Badge/Avatar size: (px) - The size of the role icon when the source is set to Badge or Avatar

Small badge/avatar size: (px) - The size of the role icon when the source is set to Badge or Avatar and the message style is set to any of the compact ones

Badges

Show all badges next to usernames - Should all of the user's badges be visible next to their name?

Remove sub badge from all badges when it's used as a role icon - Should the sub badge be removed from all badges if it's also set as the subscribers Role icon source?

Badge gap: (px) - How many pixels of empty space should there be between the badges

osu! integration

Show osu! beatmap embeds - Should beatmaps from https://osu.ppy.sh/beatmapsets/* display the map info as an embed in the chat?

Embed style: Type A (osu!web) Type B Type C - The visual style of the embed

Scroll text which is too long to display - Should the text that's too long to fit within the available space be scrolling across?

Scroll time: (s) - How fast should the text scroll (if enabled)

Embed graveyarded / pending / wip beatmaps - Should graveyarded / pending / wip beatmaps be embedded?

This is best kept off. People can embed maps with contents which could get you banned on twitch.

Blacklisted beatmap sets: (IDs) - Which beatmap set IDs should never embed?

Blacklisted difficulties: (IDs) - Which beatmap difficulties should never embed?

Embed alignment: Left Center Right - Which side of the widget should the embeds align to?

Show metadata in original language - Should the songs metadata be displayed in the original language?

e.g. Imperial Circus Dead Decadence - Yomi yori Kikoyu, Koukoku no Tou to Honoo no Shoujo. [Kyouaku] = Imperial Circus Dead Decadence - 黄泉より聴こゆ、皇国の燈と焔の少女。[Kyouaku]

Stat 1 Stat 2 Stat 3 Stat 4 - Which part of beatmap metadata should be displayed in each stat slot?

Stats:

  • AR - Approach Rate
  • BPM - BPM (beats per minute) of the song
  • CS - Circle Size
  • HP - HP Drain
  • OD - Overall Difficulty (not star rating!)
  • SR - Star Rating
  • Length - Length of the song
  • Max combo - Max achievable combo
  • Mapper - Beatmapset owner

Redeems

Show redeems - Should twitch redeems be visible in the chat

Redeem text: - Text format of the redeem message

Options:

  • usernameH - Username with highlight
  • username - Username
  • redeemH - Redeem name with highlight
  • usernameH - Redeem name

Redeem alignment: Left Center Right - Which side of the widget should the redeems align to?

Role BG color: - Background color of the redeem

Redeem text color: - Text color of the redeem

Redeem highlight color: - Text color of the highlighted text

Alerts

Alert style: Type A (Default+ 1.0) Type B (Default+ 2.0) - Visual style of the alerts

Show follows - Should follow alerts be visible?

Show subscriptions - Should first time subscription alerts be visible?

Show Resubscriptions - Should resub alerts be visible?

Show gifted subscriptions (Direct) - Should directly gifted (e.g. Someone gifted a sub to SomeoneElse!) sub alerts be visible?

Show gifted subscriptions (Bulk) - Should bulk gifted (e.g. Someone gifted 10 subs!) sub alerts be visible?

Show donations - Should donation alerts be visible?

Minimum donation amount to display - Threshold of the donation needed for the alert to display

Show cheers (Bits) - Should cheer alerts be visible?

Minimum cheer amount to display - Threshold of the cheer donation needed for the alert to display

Show raids - Should raid alerts be visible?

Alert alignment: Left Center Right - Which side of the widget should the alerts be aligned to?

Alert width: To 100% of widget width To fit alert width - Should the alerts stretch to 100% of the width of the widget, or should they conform to the width of the alert?

Alert direction: Left Right Top Bottom - The gradient direction of the alert

Alert corner radius: - The corner rounding of the alert

Alert Text

Follow: - The text format of the follow alert

The only options for follow alerts:

  • usernameH - Highlighted username
  • username - The username of the user

Sub: - The text format of the sub alert

Resub: - The text format of the resub alert

Gifted sub: - The text format of the gifted sub (direct) alert

Options:

  • senderH - Highlighted sender's username
  • recipientH - Highlighted recipient's username
  • sender - The sender's username
  • recipient - The username of the recipient

Gifted subs: - The text format of the gifted subs (bulk) alert

Tip: - The text format of the tip alert

Cheer: - The text format of the cheer alert

Raid: - The text format of the raid alert

All alerts options:

  • amountH - Highlighted event amount
  • usernameH - Highlighted username
  • amount - The amount of the event
  • username - The username of the user

Alert Type A Settings / Alert Type B Settings

These settings only apply to their respective alert, set in the Alert style: field

Highlight font size: (px) - How big should the alert highlight text be?

Highlight font weight: - How thick should the alert highlight text be?

Highlight text spacing: - What spacing should the alert highlight text characters have?

Highlight text transform: None lowercase Capitalize UPPERCASE - What capitalization should the alert highlight text have?

Username highlight font size: (px) - How big should the alert username highlight text be?

Username highlight font weight: - How thick should the alert username highlight text be?

Username highlight text spacing: - What spacing should the alert username highlight text characters have?

Username highlight text transform: None lowercase Capitalize UPPERCASE - What capitalization should the alert username highlight text have?

Follow color: - Accent color of the follow alert

Follow text color: - Text color of the follow alert

Sub color: - Accent color of the sub alert

Sub text color: - Text color of the sub alert

Tip color: - Accent color of the tip alert

Tip text color: - Text color of the tip alert

Cheer color: - Accent color of the cheer alert

Cheer text color: - Text color of the cheer alert

Raid color: - Accent color of the raid alert

Raid text color: - Text color of the raid alert

Sound

Follow sound Sub sound Tip sound Cheer sound Raid sound - What sound should play when an alert comes?

Follow sound volume Sub sound volume Tip sound volume Tip sound volume Cheer sound volume Raid sound volume - What volume should the sound be played at?

Live Preview

Live preview (disable before use) - Should emulated chat messages be sent to the widget?

Use this only for the purpose of the setup. Disable before going live!

Regular - Send a message from a regular viewer

Subscriber - Send a message from a subscriber

VIP - Send a message from a VIP

Moderator - Send a message from a moderator

Broadcaster - Send a message from a broadcaster

Emote Only - Send a message with only emotes

Reply - Send a message which will get a reply

Check for updates

Check for updates when the widget loads - Should the widget check for available updates when being loaded?

Check for updates - Check for updates on demand

Clone this wiki locally