Alerts
A stack of alert toasts. Each new follow, subscription, gift sub, cheer, raid, or donation slides in with the actor name and any amount or message the event carried, then ages out on a timer.Renders live from overlayAlert.Add to OBS
http://127.0.0.1:5598/overlays/alerts.html?broadcasterId=YOUR_TWITCH_ID- In OBS, add a Browser source and paste the URL above.
- Replace YOUR_TWITCH_ID with your Twitch user id. The exact host and port are shown in the app's Overlays panel.
- Set a transparent background and turn off "Shutdown source when not visible".
- Not sure it works yet? Add &preview to replay sample events with no live connection.
Options for this overlay
Query parameters specific to Alerts.
ttl | 8000 | How long each toast stays on screen, in milliseconds. |
max | 3 | How many toasts are visible at once before the oldest drops. |
- Parameter
- ttl
- Default
- 8000
- Purpose
- How long each toast stays on screen, in milliseconds.
- Parameter
- max
- Default
- 3
- Purpose
- How many toasts are visible at once before the oldest drops.
Common parameters
Every overlay understands these.
broadcasterId required | none | Your Twitch user id. The overlay joins this broadcaster's live group and will not connect without it. |
preview | off | Add ?preview (or ?demo) to replay sample events with no live connection. Handy for a first look in OBS. |
scale | off | A size multiplier over the default root sizing, for example scale=1.5. |
log | off | Console verbosity: ?log=silent, error, warn, info, or debug. ?debug is shorthand for ?log=debug. |
base | off | Origin override for advanced cross-origin setups. Defaults to the page origin. |
- Parameter
- broadcasterId required
- Default
- none
- Purpose
- Your Twitch user id. The overlay joins this broadcaster's live group and will not connect without it.
- Parameter
- preview
- Default
- off
- Purpose
- Add ?preview (or ?demo) to replay sample events with no live connection. Handy for a first look in OBS.
- Parameter
- scale
- Default
- off
- Purpose
- A size multiplier over the default root sizing, for example scale=1.5.
- Parameter
- log
- Default
- off
- Purpose
- Console verbosity: ?log=silent, error, warn, info, or debug. ?debug is shorthand for ?log=debug.
- Parameter
- base
- Default
- off
- Purpose
- Origin override for advanced cross-origin setups. Defaults to the page origin.
Theme parameters
Re-skin any overlay from the URL, no rebuild needed. Each maps to a CSS custom property. Write %23 for the # in a color, since # ends the query string.Theme tokens, applied as CSS custom properties.
bg | off | Background color. |
fg | off | Foreground text color. |
accent | off | Accent color. |
font | off | Font family. |
fontSize | off | Base font size. |
weight | off | Font weight. |
radius | off | Corner radius. |
blur | off | Backdrop blur amount. |
padX | off | Horizontal padding. |
padY | off | Vertical padding. |
letterSpacing | off | Letter spacing. |
- Parameter
- bg
- Default
- off
- Purpose
- Background color.
- Parameter
- fg
- Default
- off
- Purpose
- Foreground text color.
- Parameter
- accent
- Default
- off
- Purpose
- Accent color.
- Parameter
- font
- Default
- off
- Purpose
- Font family.
- Parameter
- fontSize
- Default
- off
- Purpose
- Base font size.
- Parameter
- weight
- Default
- off
- Purpose
- Font weight.
- Parameter
- radius
- Default
- off
- Purpose
- Corner radius.
- Parameter
- blur
- Default
- off
- Purpose
- Backdrop blur amount.
- Parameter
- padX
- Default
- off
- Purpose
- Horizontal padding.
- Parameter
- padY
- Default
- off
- Purpose
- Vertical padding.
- Parameter
- letterSpacing
- Default
- off
- Purpose
- Letter spacing.