Alert

The Alert primitive is a ready-made on-screen alert. When a follow, subscription, cheer, gift or raid happens, it animates in, shows the message and image for that event, then animates out. Add it from Add Widget → Primitives → Alert.

The Alert ships as a self-contained unit: a text element and an image element, pre-wired to the alert's message and graphic. You add it, position it, choose how it animates, and it works.

Settings

The Alert primitive controls the look and motion of the alert.

Animation

Setting	What it does
Animation	How it enters and leaves — Fade, Slide (up/down/left/right), Zoom, Roll or Bloom.
Easing	The acceleration curve of the animation.
In / Out duration	How long the enter and exit animations take.
Hold	How long the alert stays on screen (it waits for any alert audio to finish, too).
Backdrop	An optional background colour behind the alert.

Layout

Setting	What it does
Layout	How the message and the image are arranged — text below the image, above it, to its left, to its right, or over the top of it.
Show text	Turn the message off for an image-only alert.
Show image	Turn the image off for a text-only alert.
Text space	How much of the alert the message gets; the image takes the rest.
Gap between image and text	Space between the two, in pixels.

Switching one of the two off gives the whole alert to the other, with no gap left behind. Layout, Text space and Gap only appear while both are shown, since they have nothing to arrange otherwise, and Text space and Gap also hide on text over image where the two overlap.

note

While you're designing, the image area shows a dashed placeholder box — the real graphic only arrives when an alert actually fires. The placeholder is never shown on your overlay: if a live alert has no image, that area simply stays empty. To reclaim the space instead, turn Show image off.

Message text

Setting	What it does
Font	The typeface the message is set in.
Size	Text size in pixels.
Weight	Light through Black.
Italic	Slants the message.
Colour	A solid colour or a gradient fill.
Highlight	The colour used for any part of the message you wrap in <hl>…</hl>. See Highlighting part of the message.
Outline 1 / size	An outline around the letters. Size 0 turns it off.
Drop shadow	A soft shadow behind the message.
Align	Left, centre or right.
Line height	Spacing between wrapped lines.
Letter spacing	Spacing between characters.

Alert image

Setting	What it does
Fit	How the image fills its box — Contain, Cover, Fill or None.
Scaling	Smooth, or Pixelated to keep pixel art sharp.
Opacity	How solid the image is.

Size

Drag the Alert's handles and the whole alert scales — text, image and outlines grow together, and the aspect ratio is held so the design never stretches. The Scale field in the Widget panel does the same thing by number.

The settings above set the proportions (how big the text is relative to the image); resizing sets the overall size. If you want the alert's parts to move independently, that's the Alert Group.

Highlighting part of the message

Wrap any part of a message in <hl>…</hl> and it is painted in the Highlight colour instead of the main text colour.

New alerts already do this. The messages you start with highlight the name and the amount, so a fresh Alert looks like this out of the box:

<hl>{{name}}</hl> just subscribed!
<hl>{{name}}</hl> gave <hl>{{bits}}</hl>: {{message}}
<hl>{{name}}</hl> raided with <hl>{{viewers}}</hl> viewers!

…rendering the name and the number in the Highlight colour, with the rest in the normal text colour. Change the Highlight colour to restyle every one of them at once.

You can move the tag anywhere, or drop it entirely, by editing the message in Alerts settings. It isn't limited to names and numbers:

{{name}} cheered <hl>{{bits}} bits</hl>!

note

Messages you had before this feature arrived are left exactly as they were — no highlight until you add the tag yourself. Each alert type has its own message, so adding it to New Subs doesn't change Follows.

The tag is ignored by text-to-speech, so a spoken message never reads it out. If you don't use the tag, the Highlight colour does nothing.

tip

The same tag works in an Alert Group and in any Text widget, because it is a feature of the Text element rather than of the Alert.

What the alert says

The Alert widget is the presentation. What each alert says, which sound it plays, and the thresholds (e.g. a bigger alert for a larger cheer) are configured in your Alerts settings, not on the widget. The widget shows the message and image your alert configuration produces.

So the split is:

• Alerts settings → the message templates, sounds and variants.
• Alert widget → where it appears on the overlay and how it animates.

Pre-composed and locked

The Alert's text and image are pre-wired and locked, so you manage it as a single widget. Their arrangement and styling are surfaced in the Alert's own settings (the Layout, Message text and Alert image sections above), but you can't drag the two elements around individually or add anything alongside them.

For anything beyond that — multiple images, extra decorations, a second line in a different style, a layout none of the five presets covers — use the Alert Group instead.

See also

• Alerts — configure what your alerts say and which sounds play.
• Alert Group — compose a custom alert layout yourself.