How to Add TikTok LIVE Overlays in OBS Studio
Add interactive leaderboards, gift goals, timers, auction games, and chat overlays to your TikTok LIVE stream using OBS Studio Browser Source. Choose from 300+ themes — free setup in under 2 minutes.
Step-by-Step Setup Guide
Follow these 7 steps to get TikTok LIVE overlays running in OBS Studio. No coding or technical experience required. Not connected to TikTok yet? Start with how to use OBS with TikTok LIVE. Streaming from TikTok LIVE Studio instead? Follow how to add overlays to TikTok LIVE Studio.
Download and install OBS Studio
Download OBS Studio for free from obsproject.com. Install it on Windows, macOS, or Linux. OBS Studio is the industry-standard open-source streaming software that supports Browser Sources for web-based overlays.
Set up your TikTok LIVE stream scene in OBS
Open OBS Studio and create a new Scene for your TikTok LIVE stream. Add your camera (Video Capture Device) or screen capture (Window/Display Capture) as the base source. Arrange your layout before adding overlays.
Sign up for BetterTok and choose an overlay theme
Go to bettertok.app and sign up with Google, Discord or email. Open Overlays in the creator dashboard and pick an overlay: leaderboards, gift goals, timers, live auctions, chat feeds and more, 300+ themes in all. Choose a theme and set its colors, text and position in the overlay editor.
Copy your overlay link from the BetterTok dashboard
In the overlay editor, click 'Copy live link'. The link carries your overlay's private access token, so keep it to yourself: anyone with it can show your overlay.
Add a Browser Source in OBS Studio
In OBS, click the '+' button in the Sources panel, select 'Browser' from the list, and name it (e.g., 'TikTok Leaderboard'). In the properties dialog, paste your BetterTok link and set the width and height to your canvas: 1920 x 1080 for a landscape stream, 1080 x 1920 for a vertical one. Leave 'Shutdown source when not visible' unchecked so the overlay stays connected.
- Width: 1920 (1080 for a vertical stream)
- Height: 1080 (1920 for a vertical stream)
- FPS: 30 (default — sufficient for overlays)
- Custom CSS: Leave default (keeps transparent background)
- Shutdown source when not visible: Unchecked
- Refresh browser when scene becomes active: Checked
Place the overlay in your scene
Keep the Browser source at full canvas size and move the overlay from the BetterTok editor, where most overlays have a position control. For an overlay without one, move or crop the source in OBS (hold Alt while dragging an edge to crop). In the Sources list, keep the overlay above your camera so it draws on top.
Go live on TikTok and test your overlays
Start your TikTok LIVE stream through OBS with the server URL and stream key TikTok gives you (Settings > Stream > Service: Custom). Keep the BetterTok dashboard or desktop app open, then send a test gift or ask a viewer to interact; the overlay updates as events arrive. If it does not appear, open the Browser source's properties and click 'Refresh cache of current page'.
Overlay Types Available for TikTok LIVE
BetterTok has 300+ overlay themes across 30+ overlays: live auctions, mini-games, gift reactions, last-X alerts, entrances, level-ups, leaderboards, song requests and more. Six of them are below; the TikTok LIVE overlays page covers every type.
Gift Goals
Set coin or gift targets visible to viewers. Progress bars fill in real-time as gifts come in — motivating viewers to help you hit milestones.
Leaderboards
Display top gifters ranked by coin value. Encourages competition among viewers and rewards your biggest supporters with on-screen recognition.
Countdown Timers
Animated timers for gift battles, breaks, or timed events. Viewers can extend the timer by sending gifts, keeping your stream going longer.
Auction Games
Run live auction games where viewers bid with TikTok gifts. Perfect for Roblox item auctions, giveaways, and interactive stream events.
Chat Feed
Show live chat messages on screen with customizable styles. Useful when streaming to multiple platforms or for viewers watching fullscreen.
Social Media
Rotate your social media handles on screen, so viewers can find you on your other platforms.
Tips for Best Overlay Performance in OBS
Follow these tips to keep your overlays smooth and your stream running at full quality.
Use hardware encoding (NVENC for NVIDIA, AMF for AMD, or Apple VT for Mac)
Browser Sources use CPU for rendering. Hardware encoding offloads the stream encoding to your GPU, freeing up CPU for overlays and other tasks.
Keep only the Browser sources a scene uses
Each Browser source runs its own page, so every extra one adds memory and CPU use. Remove the ones a scene does not need.
Size every Browser source to your canvas
BetterTok overlays are laid out on a full 1920 x 1080 stage (1080 x 1920 for a vertical stream) and placed in the editor, so a full-canvas source shows them where you put them.
Enable 'Refresh browser when scene becomes active'
This ensures the overlay reconnects if the connection dropped while the scene was inactive.
Keep OBS and your browser sources updated
OBS updates frequently include Browser Source (CEF) updates that improve performance and fix rendering issues.
Test your overlay before going live
Use the OBS preview and BetterTok's built-in test events to verify positioning, sizing, and real-time updates before your audience arrives.
Frequently Asked Questions
What is a Browser Source in OBS and why do I need it for TikTok overlays?
A Browser Source is an OBS Studio source type that renders a web page directly inside your scene. BetterTok overlays are web-based, so you add them as a Browser Source URL. OBS loads the page in a built-in Chromium browser and composites it over your stream with a transparent background.
Do TikTok LIVE overlays in OBS affect stream performance or FPS?
Each overlay is a web page that OBS draws, so each one uses some CPU and memory; how much depends on the overlay and your computer. Keep only the Browser sources a scene uses, close the OBS preview when you do not need it, and use hardware encoding (NVENC or AMF) to keep the CPU free.
Can I customize overlay colors, fonts, and size in OBS?
Yes. In the BetterTok overlay editor you pick a theme and set its colors, text and, for most overlays, its position and size. In OBS, set the Browser source to the size of your canvas: 1920 x 1080 for a landscape stream, 1080 x 1920 for a vertical one. The overlay then shows where you placed it in the editor.
Do I need OBS Studio to use TikTok LIVE overlays, or does TikTok Live Studio work?
You do not need OBS: TikTok LIVE Studio runs overlays on its own. In LIVE Studio, add a Link source and paste your overlay link; in OBS or Streamlabs, the same link goes in a Browser source. Pick OBS when you want Actions & Events to switch scenes for you, because scene switching is an OBS feature.
Why is my overlay showing a white or black background in OBS?
Make sure the "Custom CSS" field in your Browser Source properties is not overriding the transparent background. The default OBS CSS includes `body { background-color: rgba(0, 0, 0, 0); }` which keeps it transparent. Also ensure the BetterTok overlay URL is correct and your internet connection is active. If the page fails to load, OBS will show a blank or white rectangle.
How do BetterTok overlays update in real-time during my stream?
When a viewer sends a gift, follows or chats during your TikTok LIVE, BetterTok receives the event and sends it to your overlay, so you do not need to refresh the Browser source. Keep the BetterTok dashboard or desktop app open while you are live: overlays get events while one of them is connected.
Ready to Add Overlays to Your TikTok LIVE?
Join 40,000+ creators using BetterTok's 300+ overlay themes. Free to set up — go live with professional overlays in under 2 minutes.
Joined by 40,000+ creators