TikTok LIVE Studio Overlay

Overview

TikTok LIVE Studio can display web pages inside your stream scene, but it enforces a strict requirement: the URL must use HTTPS. Because VMSC serves overlays over HTTP on localhost, you need a secure tunnel to bridge the two. VMSC provides this through its built-in Cloudflare Tunnel integration, available to Premium subscribers.

Step 1 — Get Your HTTPS URL

Open VMSC and navigate to Settings > Stream Overlay. In the tunnel section, click Get HTTPS URL. VMSC will provision a Cloudflare Tunnel and display your unique URL:

https://overlay-<userId>.vryionic.com

This URL is permanent — it will not change between sessions, so you only need to set it up once in TikTok LIVE Studio.

Step 2 — Open TikTok LIVE Studio

Launch TikTok LIVE Studio on your PC. Select or create the scene where you want the overlay to appear. Make sure you are logged in and have access to the scene editor.

Step 3 — Add the Link to Your Scene

In the scene editor:

1. Click the Add link button in the scene toolbar (sometimes labeled "Web Page" or "URL Source" depending on your version).
2. Paste the HTTPS URL you copied from VMSC into the URL field.
3. Click Confirm or Add to insert the source.

The overlay should appear in your scene preview within a few seconds. If TikTok LIVE Studio prompts for a title, enter something like "Stream Overlay".

Step 4 — Set the Resolution

After adding the link source, resize it to fill your entire scene canvas. Most TikTok LIVE Studio setups use 1920×1080. Drag the corners of the source or use the properties panel to set exact dimensions.

Make sure the overlay source sits above your camera or game capture in the layer order so the widgets render on top of your video feed.

Troubleshooting

"Enter correct URL" Error

• TikTok LIVE Studio rejects URLs that do not begin with https://. Make sure you copied the tunnel URL from VMSC and not the local http://localhost address.
• If the tunnel has not finished provisioning, the URL may not resolve yet. Wait a few seconds and try again.
• Check that VMSC is running and the tunnel status shows Connected in Settings.

Mixed Content Warnings

If your overlay loads external resources (custom images, fonts, or scripts) over plain HTTP, the browser inside TikTok LIVE Studio may block them because the page itself is served over HTTPS. This is called a mixed content violation.

• Use HTTPS URLs for all external resources in your overlay widgets.
• For local images, add them through the VMSC Overlay Editor — they are served through the same tunnel automatically.
• Avoid referencing http:// URLs in Custom HTML widgets.

Overlay Not Updating

• The tunnel URL points to your local overlay server. If VMSC is closed or the overlay server is stopped, the tunnel has nothing to serve.
• Make sure VMSC is open and the overlay server is running before going live.
• Try removing and re-adding the link source in TikTok LIVE Studio to force a fresh connection.