Notice: TikRift is an independent tool. It is not affiliated with, sponsored by or endorsed by TikTok or ByteDance. "TikTok" and "TikTok LIVE Studio" are trademarks of their respective owners and are mentioned only to describe compatibility.
TikTok LIVE Overlay Size and Layout: Safe Zones for Portrait Streams
By Matías González (MattsinLife) · Live streaming content creator
Updated
Most people watch TikTok LIVE on their phones, in portrait. A landscape overlay built for Twitch or YouTube either ends up tiny or hidden under the comments. Here's the right size, which parts of the screen to keep clear and where each element works best.
What size should a TikTok LIVE overlay be?
- Portrait: 1080 × 1920 pixels (9:16 aspect ratio). This is the format for a mobile-first stream.
- Landscape: 1920 × 1080 (16:9), useful if you stream a full-screen game and accept letterboxing on phones.
- Transparent background: the overlay must let your camera or game show through. If you use a static frame (say, a Canva template), export it as a transparent PNG.
Rule of thumb: build the whole scene at canvas size and place widgets inside it, instead of stacking loose layers with different sizes.
TikTok LIVE safe zones: what the interface covers
On a phone, TikTok draws its own interface on top of your video:
- Top: your profile, viewer count and some notifications.
- Bottom: comments, the comment box and the gift buttons.
- Right side: buttons and indicators that may show up during the stream.
Exact positions change with the device, language and app version, so there are no universal pixel values. What always works: leave the top and bottom strips to TikTok and put the important stuff in the middle and along the left side.
In TikRift, the scene editor includes a "TikTok zones" guide that shows which parts of the screen the interface covers, so you don't have to guess.
Where to place each element
| Element | Where | Why |
|---|---|---|
| Gift alerts | Center, full screen | They last a few seconds and need to be seen |
| Gift goal or counter | Top left, below your profile | Easy to read and clear of comments |
| Top gifters leaderboard | Left side, mid-height | A vertical list that doesn't cover your face |
| Battle scoreboard | Upper center | Viewers watch it for the whole battle |
| Welcome message or news ticker | Narrow strip above the comments | Short text that doesn't fight with chat |
Less is more: with too many elements, nobody looks at any of them. Pick 3 or 4 and move the rest to another scene.
One URL for the whole scene
You can add every widget as its own source, but that gets messy fast. With TikRift's Dynamic LIVE you build the full scene and add it with a single URL:
- 1080 × 1920 (portrait) or 1920 × 1080 (landscape).
- Drag, resize, reorder layers and lock elements.
- Up to 12 visible elements per scene and 2 scenes, each with its own URL.
- Changes save automatically.
- Add your own media files, looped and with a chroma key (green screen) filter.
Reference sizes if you add a single widget instead: most use 500 × 400; the entry message 900 × 300; the news ticker a 1080 × 160 strip.
Adding it in TikTok LIVE Studio or OBS
Click Copy URL (fictional example: https://overlay.tikrift.com/t/d7Kq2mVx9LpR4sNw).
In TikTok LIVE Studio, add a Link source (the exact name can vary by version) and paste the URL at canvas size (1080 × 1920).
Alternatively, in OBS: Browser source → paste the URL → width 1080, height 1920 (or 1920 × 1080 for landscape) → OK. If it's blank, refresh the source.
New to streaming from a computer? Start with how to go LIVE on TikTok from PC.
Common layout mistakes
- Landscape overlay on a portrait LIVE: everything looks tiny. Design at 1080 × 1920.
- Goal bar at the bottom: comments cover it. Move it up.
- Scaling the widget inside your streaming app: it gets blurry. Change the source's width and height instead.
- Too many layers: cluttered and distracting. Use your second scene for what you don't need all the time.
- Never checking on a phone: what looks fine on your monitor may sit under a button. Watch a test stream from another account.
Frequently asked questions
What size is a TikTok LIVE overlay?
For a portrait stream, 1080 × 1920 pixels (9:16). For landscape, 1920 × 1080. Build the whole scene at that size with a transparent background.
What does TikTok's interface cover during a LIVE?
Your profile and viewer count at the top, comments and gift buttons at the bottom, and some buttons on the side. Exact positions vary by device and app version, so keep those strips clear and check the result on a phone.
How do I add a TikRift overlay to my stream?
In TikRift, click Copy URL on the scene or widget. In LIVE Studio, add a Link source and paste the URL; in OBS, add a Browser source, paste the URL and set the width and height to your scene (1080 × 1920 for portrait).
Can I use a Canva overlay template?
Yes, as an image: export it as a transparent PNG and add it as an image source. For elements that change during the stream (alerts, goals, leaderboards) you need a URL-based overlay.