Custom widgets
Build your own TikTok LIVE widgets
A TikTok LIVE widget is a web page that reacts to your live: a gift arrives, the page animates, and TikTok LIVE Studio or OBS shows that page on your stream. You can write one in HTML, CSS and JavaScript, or describe what you want and let AI write it — TokElements runs it with your live events.
How a TikTok LIVE widget works
1 · Your TikTok LIVE
Viewers send gifts, follow, like, share and chat. Each of those is an event.
2 · TokElements
Connects to your live by your public @username — no password — and passes every event to your widgets as it happens.
3 · Your widget
A small web page: HTML for what it shows, CSS for how it looks, JavaScript for what it does when an event arrives.
4 · LIVE Studio or OBS
Your overlay link goes in as a Link source in TikTok LIVE Studio or a browser source in OBS. Every widget on it is on stream.
A gift alert in a few lines
Widgets get events through one function. This one shows who sent which gift, and how many, whenever a gift arrives:
<div id="alert"></div>
<script>
TE.on('gift', function (e) {
var el = document.getElementById('alert');
el.textContent = e.user.name + ' sent ' + e.gift.name + ' ×' + e.gift.repeat;
el.className = 'show'; // your CSS animates it in
setTimeout(function () { el.className = ''; }, 5000);
});
</script>What people build
Gift alerts
A different animation per gift: a small one for a Rose, the whole screen for a Lion.
Goals
A follower, like or gift goal that viewers fill together.
Leaderboards
Top gifters or likers of the stream, updating live.
Games
Viewers play by chat command or gift: wheels, races, quizzes, tower stacks.
Chat on screen
Your chat as part of the stream, styled your way.
Anything else
Timers, polls, now playing, pets that grow with gifts — it is a web page, so it can be anything a page can be.
Or describe it and let AI build it
You do not have to write code. Describe the widget — “a cyberpunk gift alert that shows a lightning lion for 5 seconds when someone sends a Lion” — and the AI builder writes the HTML, CSS and JavaScript, wires it to your live events and shows it on a preview canvas. Change anything by asking, or open the code and edit it yourself.
From idea to stream
1 · Create a free account
Sign up and link your TikTok by your public @username.
2 · Build the widget
Start from a template, write it in the browser editor, or describe it to the AI builder. Test it with simulated gifts and follows.
3 · Add one link to your stream
Copy your overlay link into TikTok LIVE Studio as a Link source, or into OBS as a browser source. Every widget you place is on it.
Questions
Can I make my own widgets for TikTok LIVE Studio?
Yes. TikTok LIVE Studio can show a web page as a Link source, so a widget is a web page that reacts to your live. TokElements gives that page your live events and hosts it, so you only write what it shows — or let AI write it.
Do I need to know how to code?
No. Pick a template or describe the widget to the AI builder. If you do code, the browser editor gives you the HTML, CSS and JavaScript with live events and a preview.
Which events can a widget react to?
Gifts (with the combo count and coin value), follows, likes, shares, subscriptions, chat messages, joins, polls and battles, plus totals like viewers and coins.
Does it work in OBS too?
Yes. The same overlay link works as a browser source in OBS and as a Link source in TikTok LIVE Studio.
Do I need my TikTok password?
No. TokElements finds your live by your public @username. Nothing asks for your TikTok login.
Build your first widget today.
Free account, browser editor, AI builder and live TikTok events — on stream through one link.
TikTok LIVE Studio’s menus and features change over time and vary by country. TokElements is not affiliated with TikTok.