Setup guide
Every overlay is a web page that your streaming app shows on top of your scene. Here’s how to add one and keep it working.
Add an overlay to OBS
In the editor, click Add to OBS. Then drag the Drag into OBS button onto your OBS preview. OBS creates a browser source with the right name and size.
If dragging doesn’t work on your setup, add it by hand:
- In OBS, click + under Sources and choose Browser.
- Name it and click OK.
- Paste the overlay link into URL.
- Set Width and Height to the size shown in the editor, then click OK.
Streamlabs Desktop, Meld, XSplit and others
Any app with a browser source works. Add a Browser Source, paste the link, and use the width and height shown in the editor.
Change an overlay later
All settings are stored inside the overlay link, so there is no account to log in to. To change an overlay, open it from Your overlays on the home page, or paste its link there. Make your changes, copy the new link, and paste it into the browser source’s URL box in OBS.
Your overlays list is saved in this browser. Keep the editor link somewhere safe if you switch computers.
Connect Twitch chat and alerts
Type your channel name in the overlay’s Twitch setting. Chat, alerts, goals and timers then read your chat directly, with no login and no permissions to approve.
Alerts work for new subs, resubs, gift subs, raids and cheers. Follow alerts need a Twitch login, which isn’t supported yet.
Control overlays from chat
Turn on chat control in a timer or goal, then type these in your Twitch chat. Only you and your mods can use them.
| !timer 5m | Start a 5 minute countdown. Also works with 90s or 1h30m. |
| !timer +2m | Add 2 minutes. Use -1m to take time off. |
| !timer pause | Pause. Use resume to continue and reset to start over. |
| !goal 15 | Set the goal’s progress to 15. |
| !goal +1 | Add 1 to the goal. Use -1 to remove one. |
Troubleshooting
- The overlay has a white or black background.
- The overlay is transparent. Check that the browser source has no Custom CSS that sets a background, and that the width and height match the editor.
- Changes I made don’t show up in OBS.
- The link changes every time you edit. Copy the new link into the browser source. If it still looks old, right-click the source and choose Refresh.
- Chat or alerts are empty.
- Check the channel name in the overlay’s settings. Test it in the editor preview first: with a channel set, the preview shows your real chat.
- My timer restarts when I switch scenes.
- That’s set by OBS. In the browser source’s properties, turn off Refresh browser when scene becomes active to keep it running, or turn it on to restart it each time.
- Alert sounds don’t play.
- In the browser source’s properties, turn on Control audio via OBS and check the source isn’t muted in the audio mixer.