How Overlabels works
Overlabels gives you a web page that fills itself with your live stream data. This is the whole system in the order you will meet it, with a link to the full guide for each part.
On this page
What an overlay is
An overlay is a web page. You load it into OBS as a browser source, and OBS shows it on your stream. You can write the page yourself in HTML and CSS, or build it without code. Either way, the page updates itself while you stream.
You do not have to start from nothing. The Products page is a shelf of free stream upgrades, each one ready in a single click. Chat games like Chat Tower and Chat Emote Bubbles give your chat something to play together, perfect for downtime and BRB scenes. Alerts put every tip from Ko-fi, Streamlabs, Fourthwall, Buy Me a Coffee or Throne on screen the moment it lands. Install one, add it to OBS, and you are live.
If you want to build your own layout without writing code, the Builder lets you place ready-made blocks on a grid. If you do write code, the code editor completes your tags as you type.
Static overlays and alerts
Overlabels has two kinds of overlay.
- A static overlay stays on screen for the whole stream. A follower counter or a goal bar is a static overlay.
- An alert fires once when something happens, such as a follow or a donation. It shows for a few seconds and then goes away.
Alerts look best when they appear inside a static overlay, because they then share its fonts, colours and styling. Two tabs on each alert control this. Triggers decide which event fires the alert. Targeting decides which static overlay it appears in. If you set no target, the alert shows in every static overlay you have. Read Overlays vs Alerts before you set up your first alert.
Tags: putting live data on the page
A tag is a short piece of text in double brackets, such as [[[c:wins]]]. When the page loads,
Overlabels swaps each tag for its current value. When the value changes, the page changes with it,
without a reload.
Tags can also format values and show different content depending on a value. A formatting pipe turns a
number of seconds into a clock, and an [[[if:...]]] block shows one thing or another. See Conditional
and Event Tags and Formatting Pipes.
Overlays cannot run JavaScript. Scripts are removed when you save. Styling, fonts, animations and tags are all you need for almost every overlay. The For Designers page covers the design side.
Live data from Twitch and donation services
Twitch sends Overlabels each event as it happens: follows, subscriptions, raids, cheers and more. Overlabels passes each one on to your overlay, along with the counters built from them.
Donations come from services you connect yourself. Overlabels works with Ko-fi, Streamlabs, Fourthwall, Buy Me a Coffee and Throne. Each connected service adds its own ready-made values to your overlay. The Integration Presets page lists all of them.
Some live data is a list rather than a single value, such as your latest subscribers or a raffle entry queue. Lists are managed from your dashboard or from chat. See Lists.
If you want to see how an event travels from Twitch to a finished alert on screen, read How an overlay renders.
Controls: values you change during the stream
A control is a named value you can change while you stream. Counters, text, numbers, timers and on/off switches are all controls. You change them in the Control Panel on your dashboard, and the overlay updates within a few seconds.
An expression control works out its value from other controls. For example, it can add up donations from several services into one total. Expression controls run on the overlay itself, so they need no extra server calls. Read Controls for every type, and Expression Controls for the formulas.
The bot and chat
The @overlabels bot joins your channel as a moderator. You can then change your controls from chat, and so can your mods, VIPs or viewers if you allow it. You do not need to switch tabs during a stream. The Twitch Chat Bot page explains how it works, and Bot Commands lists every command.
Chat can also appear on your overlay. A single loop puts live chat, with badges and emotes, on screen. See Twitch Chat in an Overlay.
Some chat features are ready to install from the Products page. Chat Checkin lets viewers pin their city on a globe. Chat Tower builds one shared tower that the chat adds blocks to. Chat Emote Bubbles turns each emote in chat into a bubble that floats across your stream.
Your overlay link and its token
Your overlay link ends with a long code after a #. That code is the token, a 64-character key that
belongs to your overlay. The part after the # is never sent to Overlabels' servers as part of the page
request, so it stays out of logs.
Paste the whole link into OBS. If you think the link has been shared by mistake, for example by showing
it on screen, revoke the token and make a new one. Then update only the part after the # in OBS. The
Overlay Access Tokens page explains each step.
Test before you go live
You do not have to wait for a real follower to check an alert. The Testing your alerts page explains how to fire real Twitch events at your own account from a terminal.
Donation integrations have a test mode for the same reason. It lets you send the same test donation as often as you like. When you turn test mode off, the service's controls are reset to their starting values. The test mode page lists exactly what changes.
If something does not appear on screen, check the steps in How an overlay renders in order. That shows you which step to look at first.
Where to start
The quickest way to learn is to build something small. Show chat on screen and Show my latest follower each take a few minutes and end with something you can see on stream. The help home page lists every guide, tutorial and reference entry.