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 63+ 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.
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 in with your Discord account. Navigate to the Overlays section in the creator dashboard. Browse 63+ overlay themes across categories like leaderboards, gift goals, timers, auction games, and chat feeds. Select and customize your chosen overlay.
Copy the Browser Source URL from your BetterTok dashboard
After customizing your overlay in the BetterTok dashboard, click the 'Copy Overlay URL' button. This generates a unique URL containing your overlay configuration and authentication token. Keep this URL private — anyone with it can display 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 overlay URL. Set Width to 800 and Height to 600 (or custom dimensions to fit your layout). Ensure 'Shutdown source when not visible' is unchecked so the overlay stays connected.
- Width: 800px (or match your overlay layout)
- Height: 600px (or match your overlay layout)
- 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
Position and resize the overlay in your scene
Click and drag the overlay in the OBS preview to position it. Use the red handles to resize. Hold Alt while dragging edges to crop. Right-click the source for transform options like 'Fit to screen' or 'Edit Transform' for pixel-perfect placement. Layer it above your camera but below any top-bar elements.
Go live on TikTok and test your overlays
Start your TikTok LIVE stream through OBS using your RTMP stream key (Settings > Stream > Custom RTMP). Once live, send a test gift or ask a viewer to interact. The overlay should update in real-time. If it does not appear, right-click the Browser Source and select 'Refresh cache of current page'.
Overlay Types Available for TikTok LIVE
BetterTok offers 63+ overlay themes across 6 categories. Each type is designed to boost viewer engagement and gifting during your TikTok LIVE streams.
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
Display your social media handles, follow buttons, and profile links. Helps convert stream viewers into followers across all your 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.
Limit Browser Sources to 3-5 per scene
Each Browser Source runs a separate Chromium instance. Too many can spike RAM and CPU usage. Combine related elements into a single overlay when possible.
Set Browser Source dimensions to match your actual overlay size
Avoid using 1920x1080 for a small corner widget. A 400x200 source for a timer uses far less memory than a full-HD source scaled down.
Enable 'Refresh browser when scene becomes active'
This ensures the overlay reconnects if the WebSocket 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?
BetterTok overlays are lightweight HTML/CSS/JS widgets optimized for streaming. A single overlay typically uses less than 2-3% CPU. For best performance, avoid adding more than 4-5 Browser Sources simultaneously, close the OBS preview when not needed, and use hardware encoding (NVENC or AMF) to keep CPU free.
Can I customize overlay colors, fonts, and size in OBS?
Yes. BetterTok's dashboard lets you customize colors, fonts, border styles, and animations before copying the URL. In OBS, you can also resize and crop the Browser Source freely. The recommended base dimensions are 800x600 for most overlays, but you can set custom width and height values to match your layout.
Do I need OBS Studio to use TikTok LIVE overlays, or does TikTok Live Studio work?
OBS Studio is recommended because it fully supports Browser Sources. TikTok Live Studio (the official desktop app) has limited overlay support and does not natively support Browser Sources. If you use TikTok Live Studio, you can stream through OBS using Virtual Camera or use OBS as your primary streaming software with an RTMP key from TikTok.
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?
BetterTok overlays connect to our real-time server via WebSocket. When a viewer sends a gift, follows, or interacts during your TikTok LIVE, the event is processed and pushed to your overlay instantly. You do not need to refresh the Browser Source — updates appear automatically within 1-2 seconds.
Ready to Add Overlays to Your TikTok LIVE?
Join 10,000+ creators using BetterTok's 63+ overlay themes. Free to set up — go live with professional overlays in under 2 minutes.
Trusted by 10,000+ creators · 4.7/5 rating from 284 reviews