Stream Overlays
A stream overlay is a transparent layer that sits on top of your stream. TipLink's overlay system is browser-based — each canvas gets a unique URL that you add to OBS (or any broadcasting software) as a browser source. Overlays can display alert animations, goal progress bars, live chat, variable values, and more — all updated in real time from TipLink.
Creating a Canvas
A canvas is a named screen area at a fixed resolution. You can have multiple canvases — for example, one for your main scene and one for your facecam scene.
- Open the Overlays page in TipLink.
- Click Create New Overlay (top right).
- Give it a name and set the resolution. Use the same resolution as your OBS output for best results (typically 1920 × 1080).
- Click Open Widget Editor to start placing widgets.
Once created, copy the canvas browser source URL from the Overlays page and add it to OBS:
- Width and Height: match your canvas resolution
- FPS: 60 (or match your stream FPS)
- Enable Shutdown source when not visible
- Enable Refresh browser when scene becomes active
Widget Editor
The widget editor is where you arrange widgets on your canvas.
Canvas Controls
These controls appear at the top of the editor:
| Control | Options | What it does |
|---|---|---|
| Scale | 25%, 50%, 75%, 100% | Zooms the editor preview. Widgets are placed at their true size regardless of the zoom level. |
| Snapping | Off, 20px, 40px, 60px, 80px, 100px | Snaps widget edges to a grid when dragging, making precise alignment easier. |
| Live Mode | On / Off | When enabled, the editor preview shows real alert animations as events arrive — so you can see exactly how your overlay looks during a stream without leaving the editor. |
Widget Panel
The widget panel on the left lists every widget on your canvas. Each widget row has controls for:
| Control | What it does |
|---|---|
| Eye icon | Toggle visibility. Hidden widgets are saved but won't appear on your live overlay. |
| Duplicate | Add a copy of the widget offset slightly from the original. Available for most configurable widgets. |
| Up / Down arrows | Change the layer order. Widgets higher in the list appear in front of those below. |
| Gear icon | Open the widget's settings panel to adjust its appearance and behaviour. |
| Remove | Delete the widget from the canvas. |
Placing Widgets
- Move: click and drag the center of a widget.
- Resize: click and drag any corner handle.
- The widget's current size is shown in its bottom-right corner while you drag.
Widget Types
There are two categories of widget:
- Alert widgets — triggered by a Stream Overlay action on an alert. They appear, play out, then disappear automatically.
- Canvas widgets — always visible. Configured directly in the editor via the gear icon. Update live as data changes in TipLink.
Alert Widgets
| Widget | Description |
|---|---|
| Media Alert Box | Shows images, videos, GIFs, and custom text when an alert fires. The primary widget for donation and subscriber alerts. Configured via the Stream Overlay action. |
| Random Wheel | A spinning prize wheel (or carousel) that picks a weighted random winner when an alert fires. See Random Wheel. |
| Wheel Legend | A companion list widget showing all possible wheel outcomes. Highlights the winner after the spin. |
Canvas Widgets
Configure these by clicking the gear icon next to the widget in the panel on the left.
Chat Box
Displays live chat from all connected platforms in a scrolling list.
Layout & Style
| Setting | Options | Description |
|---|---|---|
| Style | Classic, Bubble | Classic shows flat rows; Bubble renders each message in a rounded speech bubble. |
| Direction | Bottom to Top, Top to Bottom | Which end new messages appear at. |
| Scale | 50–200% | Scales the whole widget content. |
| Padding | 0–20px | Inner padding per message row. |
| Bubble Radius | 0–24px | Corner rounding on bubble-style rows. |
| Alternating Rows | On/Off | Alternate background colour between rows. |
| Conversation Mode | On/Off | Aligns messages left/right based on sender, like a chat thread. |
| Opacity | 0–100% | Overall widget transparency. |
Colours
| Setting | Description |
|---|---|
| Background | Row background colour. Supports transparent and rgba() values. |
| Alt Row Background | Second background colour when Alternating Rows is on. |
| Border / Separator | Line colour between rows. |
| Username | Colour for display names. Leave blank to use each platform's default colour. |
| Message Text | Colour for message body text. |
| Timestamp | Colour for the time label. |
| Name Badge BG | Background behind the username badge. |
Animations & Timing
| Setting | Options | Description |
|---|---|---|
| Entry | None, Fade In, Slide Left/Right/Up/Down | How new messages appear. |
| Exit | None, Fade Out, Slide Left/Right/Up/Down | How old messages leave. |
| TTL | 0–120s | Time to live. Messages older than this are removed. 0 = never remove. |
Overflow
| Setting | Description |
|---|---|
| Fade Top | Fades out older messages at the top edge. |
| Fade Bottom | Fades out at the bottom edge. |
| Fade Size | How tall the fade gradient is (10–120px). |
Elements & Visibility
| Setting | Description |
|---|---|
| Platform Icons | Show/hide the small platform logo next to each message. |
| Role Badges | Show/hide subscriber and moderator badges. |
| Generic Badges | When Role Badges is on, show platform-generic badge variants instead of platform-specific ones. |
| Timestamps | Show the time each message was received. |
| 24h Clock | Display timestamps in 24-hour format. |
| Platform Highlight | Tint the username colour by the source platform. |
| Accent Override | Override the platform highlight with a fixed colour. |
| Role Highlight | Colour messages from moderators and subscribers differently. |
| Hide Private Messages | Filter out messages sent as private/direct. |
Emotes & Media
| Setting | Description |
|---|---|
| Native Emotes | Render platform emote images inline. |
| 7TV | Render 7TV emotes. |
| BTTV | Render BetterTTV emotes. |
| FFZ | Render FrankerFaceZ emotes. |
| GIF Embeds | Show animated GIFs linked in messages. |
| GIF Links | Show GIF URL previews. |
Stream Goal
A single progress bar linked to one of your TipLink goals.
Style
| Setting | Range | Description |
|---|---|---|
| Opacity | 0–100% | Widget transparency. |
| Radius | 0–24px | Corner rounding on the card. |
| Bar Height | 3–24px | Thickness of the progress bar track. |
| Font Size | 10–28px | Size of the title and count text. |
Colours
| Setting | Description |
|---|---|
| Background | Card background. |
| Border | Card border. |
| Title | Goal title text colour. |
| Count | Current/target count text colour. |
| Track | The unfilled portion of the bar. |
| Fill Start | Progress bar colour at the left end. |
| Fill End | Progress bar gradient colour at the right end. |
| Complete Fill | Bar colour when the goal is reached. |
| Complete Border | Card border colour when the goal is reached. |
Goals (Progression)
Displays multiple goals at once in a compact stacked panel.
Goals
| Setting | Description |
|---|---|
| Goals to show | Choose which of your goals appear in this widget. |
| Max Goals | Maximum number of goal rows to display at once (1–10). |
| Value Suffix | Text appended after each value, e.g. "Subs". |
| Show Header | Show/hide the panel heading. |
| Header Text | The heading label (default: "Goals"). |
| Show Countdown | Show a countdown timer for timed goals. |
| Countdown Label | Label before the timer, e.g. "Ends in". |
| Show Current Value | Display the current progress number. |
| Show Progress Bar | Display the progress bar/indicator. |
| Progress Style | Bar, Circle, or Icon Fill (when progress bar is on). |
Style — Opacity, Radius, Padding, Row Gap, Font Size, Active Font Size (same controls as Stream Goal above).
Colours — Background, Border, Text, Muted Text, Active Text, Complete Text, Track, Fill Start, Fill End, Celebrate Accent.
Text
A text block that updates live with content from TipLink or a local file.
Content
| Setting | Options | Description |
|---|---|---|
| Source | Manual Text, File | Manual: type or paste text directly. File: reads a .txt or other text file from your PC and refreshes automatically. |
| Text | — | The text to display. Supports {{ var.name }} and {{ goal.Title }} placeholders (use the Insert button to pick from your variables and goals). |
| Text File | — | Path to a local file (when Source is File). Accepts .txt, .log, .md, .csv, .srt. |
| Polling Rate | 100–10000ms | How often to re-read the file for changes (when Source is File). |
Font
| Setting | Description |
|---|---|
| Font Family | Choose any Google Font from the dropdown (50+ options included). |
| Size | 8–200px. |
| Weight | Thin through Black (100–900). |
| Align | Left, Center, Right. |
Colours
| Setting | Description |
|---|---|
| Text Colour | Main text colour. |
| Text Stroke | Enable an outline around the text. |
| Stroke Colour | Outline colour (when stroke is on). |
| Stroke Width | Outline thickness in pixels (1–10px). |
| Background | Background behind the text. Supports transparent. |
Style — Opacity, Line Height (80–300%), Letter Spacing, Padding, Border Radius.
Animation
| Option | Description |
|---|---|
| None | Static text. |
| Typewriter | Text types itself out character by character. |
| Fade In | Fades from invisible to visible. |
| Scroll Left / Right | Text scrolls continuously across the widget. |
| Bounce | Text bounces up and down. |
| Pulse | Text pulses in opacity. |
Animation Speed sets how long one cycle takes (1–30s).
Image
Displays a static or animated image file on the canvas.
| Setting | Options | Description |
|---|---|---|
| Image File | .png, .jpg, .jpeg, .gif, .webp, .svg, .bmp, .ico | The image to show. |
| Opacity | 0–100% | Widget transparency. |
| Fit | Contain, Cover, Fill, None | How the image fills its widget bounds. |
| Radius | 0–50px | Corner rounding. |
Video
Plays a looping video file on the canvas.
| Setting | Options | Description |
|---|---|---|
| Video File | .mp4, .webm, .mov, .mkv, .avi, .ogv | The video to play. |
| Muted | On/Off | Mute the audio track. |
| Loop | On/Off | Restart when the video ends. |
| Volume | 0–100% | Playback volume (when not muted). |
| Opacity | 0–100% | Widget transparency. |
| Fit | Contain, Cover, Fill, None | How the video fills its widget bounds. |
| Radius | 0–50px | Corner rounding. |
Browser Source
Embeds a live webpage directly on your canvas.
| Setting | Description |
|---|---|
| URL | The web address to load. |
| Opacity | 0–100% widget transparency. |
| Radius | 0–50px corner rounding. |
| Auto-Refresh | How often to automatically reload the page (0 = never, up to 3600s). Set to 0 if the page manages its own updates. |
| Force Refresh | A button in the settings panel that immediately clears the page cache and reloads. |
Tipping Menu
A live on-screen panel showing your tip price list, what's currently playing, an incoming tip queue, and a top tippers leaderboard.
Visible Sections
Toggle any section on or off: Price Menu, Now Playing, Tip Queue, Top Tippers.
Menu Items
Add up to 20 rows. Each row has:
| Field | Description |
|---|---|
| Enabled | Show or hide this row. |
| Icon | An emoji or symbol shown alongside the row. |
| Label | The name of the tip item, e.g. "Song Request". |
| Format | Currency ($), Percentage (%), Tokens (tk), or Custom. |
| Min / Max Value | The price range. Leave Max blank for no upper limit. |
| Custom Suffix | Shown after the value when Format is Custom (e.g. "coins"). |
| Duration | How long this item takes to fulfil, in seconds. |
Menu Pagination — Rows Per Page (1–20), Page Duration (2–30s). The menu automatically cycles through pages if there are more rows than fit.
Now Playing — shows what's currently active from the tip queue.
| Setting | Options |
|---|---|
| Progress Style | Bar Sweep, Spinner, Bolt Fill, Pulse Ring, Wave Dots, Centered Circle |
| Animation Speed | Slow, Normal, Fast |
Queue — Max Visible (1–20 items), Anonymous Label (text shown when the sender is anonymous).
Top Tippers — choose which leaderboard places to show (1st–5th), toggle trophy icons and value display, and reset the leaderboard with a button in the settings panel.
New Tip Ping — an optional flash effect and sound that fires each time a new tip enters the queue.
| Setting | Description |
|---|---|
| Enable Ping | On/Off. |
| Ping Colour | Colour of the flash ring. |
| Ping Sound | None, a local audio file, or a URL to an audio file. |
Style — Opacity, Radius, Font, Accent, Text, Background colours.
Accepted Event Types — choose which platform event types feed into the tipping menu (tips, donations, bits, Super Chat, gift subs, subscriptions, follows, raids, etc.).
Testing Your Overlay
Stream overlays are activated by Stream Overlay actions on your alerts. To test without waiting for a real event:
Manual test: Open any alert, click Edit, then click Test Actions. This fires all actions on that alert immediately, including the Stream Overlay action.
.png)
Replay: Go to the Activity page, find a past event that matches your alert, and click Replay. TipLink re-processes the event as if it just happened.
.png)