How to add Thunderstream overlay to OBS and TikTok LIVE Studio

Start with the right link

Open the Thunderstream panel, enable the necessary tool and go to the overlay gallery or its configuration. Select, for example, alerts, broadcast chat or viewer counter. Save your settings before copying the address.

Copy the link intended for the overlay source. The address of a regular website, administration panel or local preview will not replace this link. Thunderstream overlays are hosted on Thunderstream.net also when you use the desktop program.

A dictionary without difficult abbreviations

Step by step · 1–4

1. Action

   Open Thunderstream and select Overlays in the left menu.

   ✓ After this step you will see

   You see separate overlays, such as alerts and chat.

2. Action

   Open the selected overlay and enable its tool.

   ✓ After this step you will see

   The preview is not obscured by the disabled message.

3. Action

   Note the width and height of the link, e.g. 1920 and 1080.

   ✓ After this step you will see

   You have two numbers that you will later enter into the source.

4. Action

   Save the settings you just changed.

   ✓ After this step you will see

   When reopened, the fields retain their values.

Enlarge the screenshot ↗

Step by step · 5–8

5. Action

   Click Copy link next to the overlay box.

   ✓ After this step you will see

   Her private address is in the clipboard, not the address of the entire panel.

6. Action

   In OBS, select the target scene from the Scenes list.

   ✓ After this step you will see

   The name of the correct scene is highlighted.

7. Action

   Under the Sources list, click + and then Browser.

   ✓ After this step you will see

   The creation of a web source opens.

8. Action

   Select Create new and enter a name, e.g. Thunderstream Chat.

   ✓ After this step you will see

   You will recognize the source in a later list.

Enlarge the screenshot ↗

Step by step · 9–12

9. Action

   Paste your own URL link; Leave local file disabled.

   ✓ After this step you will see

   The field contains the overlay address, not the login page.

10. Action

    Enter the exact width and height you noted.

    ✓ After this step you will see

    The source area corresponds to the area of ​​the saved overlay.

11. Action

    Click OK and move the source above the game in the Sources list.

    ✓ After this step you will see

    The game does not cover the overlay; the eye icon is on.

12. Action

    Before LIVE, run Test in Thunderstream.

    ✓ After this step you will see

    An example reaction is seen in scene OBS.

Enlarge the screenshot ↗

Step by step · 13–16

13. Action

    In LIVE Studio, select add source, then Link.

    ✓ After this step you will see

    In the supported version, the web address field opens.

14. Action

    Paste your link and set a compatible area and then a layer above the game.

    ✓ After this step you will see

    The same test can be seen in the LIVE Studio preview.

15. Action

    Record 20 seconds locally with one test and microphone.

    ✓ After this step you will see

    The file shows an overlay and hears one sound.

16. Action

    Lock the finished source with a padlock.

    ✓ After this step you will see

    Accidental dragging does not move the overlay.

An example you can reproduce

The horizontal scene and link are 1920×1080. An alert set to the far right may disappear in a source that is only 800 pixels wide. Enlarging the red frame of a source in a scene does not change its internal resolution.

First, choose a layout: horizontal or vertical?

The source resolution is the area in which the overlay draws its elements. The size of this area and the size of the rectangle you are dragging your mouse on the scene are two different things. Shrinking the rectangle will not move an element that was previously outside the source area.

In Thunderstream, select the format corresponding to your scene, save the position and only then enter the dimensions in the broadcast program. When changing the format from landscape to portrait, re-check the position of the alert, top and chat. Do not stretch the overlay unevenly, otherwise you will distort the letters and avatars.

Add the source in OBS Studio

The browser source displays the page, not the recording of your panel. This prevents settings, buttons and private information from getting into the image. Only the contents of the selected overlay should be visible in the scene.

1. Select the scene where the overlay should go. In the Sources panel, click the plus and select Browser.
2. Create a new source and give it a clear name, such as "Thunderstream - Chat."
3. Paste the copied address into the URL field. Leave the local file option disabled.
4. Set the width and height according to the Thunderstream panel. For a 1920 × 1080 configuration, enter these exact values.
5. Confirm source. In the Sources list, move it over your game or camera capture.

Add the source in TikTok LIVE Studio

The item names depend on the language and edition of LIVE Studio. You are looking for a source that displays the page from the URL. If your version does not support this feature, please check LIVE Studio for updates and help; don't choose a random source that captures your entire desktop.

1. In LIVE Studio, select a scene and open add source.
2. In the version that supports web sources, select Link or the corresponding source with a URL field.
3. Paste the same overlay link from Thunderstream and set the correct dimensions.
4. Place the source over the game image and check the position of the elements in the preview.

Arrange sources so that nothing obscures alerts

You can add an existing source to your next scene instead of creating a new independent copy with the same link. Consider this especially for sources that play audio: two active copies may result in double reading. Don't remove a source that is already working properly before checking for a replacement.

1. Place the background or game lowest on your list. Add a camera and decorations above them, and place the Thunderstream sources where you want them to be visible in the final image.
2. Select the overlay source. If it has been accidentally cropped, check its transformation and cropping. In OBS, use the source context menu and the Transform option; the name depends on the program language.
3. Change the location of the alert itself in the configuration of a given alert in Thunderstream. Set X, Y, size and animation, click Save, then test your saved settings.
4. Once you have set the source, lock it with a padlock in the source list. This will prevent you from accidentally moving the entire area with alerts when moving the camera.

Save, test and check the sound

Return to Thunderstream and run the saved configuration test. Do it before starting LIVE: simulations may be limited during a real broadcast. Compare the position and size with the streaming program, not just with the in-panel preview.

If audio supports Thunderstream, capture program or desktop audio. Do not simultaneously run a second TTS reading on another panel or source, as recipients may hear an echo. On the OBS, check the meters and make a short local recording.

Sound: panel, program or browser source?

First, determine where the sound is actually coming from. If Thunderstream is playing it, capture the sound of this application or the appropriate system device in the broadcast program. If a browser source is playing it, check its share in the mixer. The selection depends on the playback method set.

Listening in your own headphones and the sound sent to viewers are separate matters. Just because you hear an alert on your computer doesn't confirm it's been broadcast. Make a short recording with a microphone and one test alert, then play it back.

1. Run one test and watch which sound meter responds. Make sure this source is not muted.
2. Check whether the selected audio path is included in the broadcast output. If you hear two copies, turn off duplicate capture of the same sound.
3. Listening to the public LIVE in the second tab mute or use headphones. Sound from the speakers may return to the microphone.
4. Match the volume of music and TTS to your voice. In the computer program, you can additionally set the volume to mute the music when the microphone is detected.

Scene change, animation refreshment and smoothness

The browser source has separate options for disabling when hidden and refreshing when the scene is activated. Refresh loads the overlay from the beginning. For items that you want to maintain continuity, do not enable automatic reloading unnecessarily. In turn, an unused overlay does not have to function as several independent copies in many scenes.

Don't increase the frame rate of your source just because your computer has a fast monitor. Match it to your broadcast and check the effect on the recording. For framerate issues, start by deleting unnecessary source copies and closing unused previews rather than refreshing everything during LIVE.

After changing the settings, save them to Thunderstream. Refresh one source only when you really need it. You will avoid accidentally interrupting the animation, music or reading.

Empty source? Check these things out in this order

1. Compare the dimensions of the source with the dimensions recorded in Thunderstream. The item may be outside an area that is too small.
2. Check the source's visibility icon, its order in the scene, and whether the tool is enabled.
3. Verify that the entire current link has been copied and that the account is linked to the real LIVE.
4. Remember that an empty top with no participants or an alert waiting for an event may be intentionally invisible. Use the pre-broadcast test.
5. If a link or its parameters have been changed, refresh only that source after saving. Do not disconnect a running LIVE unnecessarily.

What do you see on the screen and how to fix it

Fix one thing at a time and try the same thing again. If you change several options at the same time, it will be difficult to determine what solved the problem. Don't delete a working source or entire configuration just because one widget isn't responding.

If you still need help, write down the program name and version, platform, approximate time of trial, expected result, and what actually happened. Attach a dump without passwords, keys and full private links. This description is much more useful than just the "not working" message.

Last attempt before use on LIVE

1. Save the changes using the button assigned to the edited function. If there are separate forms, check each changed part separately.
2. Open the settings again and compare the most important values. Simply moving the slider does not always mean a permanent save.
3. Check the result outside the editor itself: on the target scene, in the recording, or in the reopened configuration.
4. If the function uses the platform, separately acknowledge the new handled event during the active LIVE. Don't expect the appearance test to confirm account authorization.
5. Save the working values ​​and make a copy before the next major change. Next time you start up, start with a quick check.

Frequently asked questions