Skip to content
TIKTOK LIVE → TOKELEMENTS → OBS

TIKTOK LIVE
OVERLAYS
THAT REACT.

Turn gifts, follows, likes and chat into responsive OBS alerts, goals, leaderboards and custom live widgets—in real time.

Create my free overlay Watch live widgets
NO TIKTOK PASSWORDONE OBS LINKFREE TO START
KA@kaicenat LIVE1.2k
COIN GOAL36%
mia.la
sent Lion
MI
mia.la this overlay is wildtobi_zockt GOAL GOAL GOAL
Event receivedgift · 14ms
OBS connectedbrowser source
gift → alert.play()
ALERTSGOALSLEADERBOARDSSUBATHONPOINTSGAMESSCENESGIVEAWAYSALERTSGOALSLEADERBOARDSSUBATHONPOINTSGAMESSCENESGIVEAWAYS

REAL WIDGETS · LIVE SIGNAL

One scene. Four live layers.

01 / 04

Alerts that pop

Every gift, follow and share fires an animated popup with sound — instantly, on stream.

…

02 / 04

Goals your fans fill

Coin and follower goals climb live. Hit the target and the whole overlay celebrates.

36%
Coin goal
1,780 / 5,000
Climbs live as gifts land ↑
03 / 04

Leaderboards that fight back

Top gifters battle for rank one in real time. Nothing drives gifts like competition.

Top gifters
MImia.la
2733
KAkayra99
11,204
TOtobi_zockt
3310
4nachtfalke128
04 / 04

Code your own widgets

Write HTML, CSS and JS right in the editor. Build any overlay you can imagine — live-previewed as you type.

CUSTOM WIDGET STUDIO PREVIEW LIVE
HTMLCSSJS
1TE.on('gift', event => {
2 const alert = createAlert({
3 user: event.user,
4 gift: event.gift
5 });
6 overlay.show(alert);
7});
gift event received 18ms
LIVE PREVIEWAUTO
mia.la
sent Rose10
MI
No errorsAuto-saveTE SDK 1.0
02 / FROM HANDLE TO OBS

SET IT ONCE.
GO LIVE.

STEP 01 / 03

Connect your handle

Enter your public TikTok username. Your TikTok password stays yours.

STEP 01 / 03

Connect your handle

Enter your public TikTok username. Your TikTok password stays yours.

PUBLIC TIKTOK HANDLE
kaicenat FOUND
LISTENING FOR LIVE EVENTS

No TikTok password. Your public handle is enough.

LAYER 01 · Connect your handle
STEP 02 / 03

Make it your own

Pick a widget, tune the look and test every interaction before you go live.

WIDGET EDITORLIVE PREVIEW
mia.la
sent Rose
MI
ACCENTANIMATION · POP
LAYER 02 · Make it your own
STEP 03 / 03

Drop it into OBS

Paste the private browser-source link once. Live events take it from there.

OBS · BROWSER SOURCEREADY
PRIVATE OVERLAY URL
tokelements.app/overlay/••••••••
Signal connectedEvery live event now appears in OBS.
LAYER 03 · Drop it into OBS
03 / BEYOND THE WIDGETS
01 / 06

Overlay editor

Position and layer every live element on one visual canvas.

OVERLAY · MAIN SCENE1920 × 1080
Gift alertSubathon goal
CREATOR TOOL · LIVE PREVIEW
01

Overlay editor

Position and layer every live element on one visual canvas.

OVERLAY · MAIN SCENE1920 × 1080
Gift alertSubathon goal
02

Points economy

Reward viewers with points, balances and redeemable actions.

VIEWER POINTSECONOMY ACTIVE
KAkaicenat12,480 PTS
Highlight my message 500Add 2 minutes 1,200Trigger confetti 2,500
03

Event simulator

Test gifts, follows and goals safely before the audience arrives.

EVENT SIMULATORSAFE TEST MODE
EVENT TYPEGift · Lion ×1
14:32:08 overlay received gift event 200 OK
04

Trigger API

Push events into your widgets from your own bot or tools with a scoped API key.

TRIGGER APICONNECTED
POST /api/v1/trigger{ "event": "gift", "user": "kaicenat", "coins": 2999 }
200 OK · 18ms
05

Spotify requests

Let viewers influence the queue without leaving your LIVE.

SPOTIFY REQUESTSQUEUE · 04
NOW PLAYINGViewer requestAdded by @pokimane
UP NEXTRequested by @xqc03:24
06

Live scenes

Switch full-screen scenes — intro, BRB, live — each with its own background and transition.

SCENESON AIR · INTRO
PROGRAMMIDNIGHT · FADE
STARTING IN4:58
IntroFadeON AIRBe right backSlideIdleLiveCutCamera
04 / BEFORE YOU GO LIVE

EVERYTHING
CLEAR.

Short answers to the questions that matter before your first stream.

FAQ · 01How do I add a TikTok LIVE overlay to OBS?

Create and customize a widget, copy its private browser-source URL, then add that URL as a Browser Source in OBS.

FAQ · 02Do I need to log in with my TikTok account?

No. Connect with your public TikTok username—TokElements never asks for your TikTok password.

FAQ · 03Can I build completely custom widgets?

Yes. Use the built-in HTML, CSS and JavaScript editor with live preview and real TikTok LIVE event data.

FAQ · 04Can I show a "starting soon" or BRB screen?

Yes. Build several scenes on one overlay — intro, BRB, live — each with its own full-screen background (a built-in preset, a color, or your own image) and its own widgets. Switch between them live and they cross-fade with a transition, then reveal your camera.

05 / YOUR NEXT STREAM

MAKE EVERY
MOMENT HIT.

Build your first TikTok LIVE overlay and add it to OBS with one private link.

Create my free overlayNO TIKTOK PASSWORD · FREE TO START