Setup Guide
OBSに60秒でライブ字幕を追加
StreamTranslate works as a browser source overlay in any streaming software. Pick yours below.
OBS Studio
Free, open-source — most popular streaming software
1
Generate your overlay link
On your StreamTranslate dashboard, sign up and click Generate Overlay Link. This starts your 6-hour free trial and creates a unique URL for your stream.
Your overlay URL will look like:
streamtranslate.live/overlay?room=YOUR-ROOM-ID2
Add a Browser Source in OBS
In OBS Studio, in your Sources panel at the bottom, click the + button and select Browser.
OBS → Sources panel → + button → Browser
3
Paste your overlay link
Name it anything (e.g. "StreamTranslate"), then paste your overlay link into the URL field. Set width to
1920 and height to 1080. Check "Shutdown source when not visible" and click OK.
4
Make it transparent (important)
Right-click the Browser Source → Properties → scroll to Custom CSS and add this line so the background is transparent:
body { background-color: rgba(0, 0, 0, 0) !important; }Browser Source → Properties → Custom CSS
5
Go Live on StreamTranslate
Back on your StreamTranslate dashboard, click Go Live. The subtitles will now appear on your stream in real-time as you speak. Start streaming in OBS and test it.
If your subtitles don't appear, make sure you clicked "Go Live" on the StreamTranslate dashboard AND your Browser Source is visible in your active scene.
Streamlabs
Streamlabs Desktop (formerly SLOBS)
1
Generate your overlay link
On your StreamTranslate dashboard, sign up and click Generate Overlay Link to get your unique URL.
2
Add a Browser Source
In Streamlabs Desktop, click the + icon in your Sources panel and select Browser Source.
Sources panel → + icon → Browser Source
3
Configure the source
Paste your overlay link into the URL field. Set width
Click Done.
1920 and height 1080. In the Custom CSS box, paste:
body { background-color: rgba(0, 0, 0, 0) !important; }4
Position the overlay
Drag the Browser Source to the top of your source list so it sits above your game/camera. Stretch it to fill the full canvas if needed.
5
Go Live on StreamTranslate
Click Go Live on your StreamTranslate dashboard and start streaming in Streamlabs. Subtitles will appear instantly as you speak.
Streamlabs and OBS use the same Browser Source system — setup is nearly identical. The CSS transparency step is required on both.
StreamElements
SE.Live OBS plugin
1
Generate your overlay link
On your StreamTranslate dashboard, sign up and click Generate Overlay Link to get your unique URL.
2
Open SE.Live in OBS
If you use StreamElements, you likely have SE.Live installed in OBS. You can still add a Browser Source directly in OBS alongside SE.Live — they work together.
OBS → Sources → + → Browser
3
Add Browser Source with your link
Add a new Browser Source, paste your overlay link, set 1920×1080, and add the transparency CSS:
body { background-color: rgba(0, 0, 0, 0) !important; }4
Layer it correctly
Place the StreamTranslate Browser Source above your SE.Live overlay layer in the Sources panel. Both overlays will show simultaneously — StreamTranslate subtitles appear on top.
5
Go Live on StreamTranslate
Click Go Live on your StreamTranslate dashboard and start your stream. Subtitles will appear in real-time alongside your existing StreamElements overlays.
StreamElements overlays and StreamTranslate work side by side. You can run your alerts, chatbox, and other SE widgets while StreamTranslate subtitles run at the same time.
XSplit Broadcaster
XSplit Broadcaster and XSplit Gamecaster
1
Generate your overlay link
On your StreamTranslate dashboard, sign up and click Generate Overlay Link to get your unique URL.
2
Add a Webpage source
In XSplit Broadcaster, go to Add Source → Webpage (or "Web Page" in some versions). This is XSplit's equivalent of OBS's Browser Source.
Add Source → Webpage
3
Paste your overlay link
Enter your StreamTranslate overlay URL in the address field. Set the size to
1920 × 1080. Enable Transparent or set background color to transparent in the source settings.4
Position and layer
Drag the Webpage source to the top of your layers panel so subtitles appear above your game and camera sources. Resize to fill the full canvas.
5
Go Live on StreamTranslate
Click Go Live on your StreamTranslate dashboard, then start broadcasting in XSplit. Translated subtitles will appear for your viewers in real-time.
In XSplit, "Webpage" source = OBS's "Browser Source". If you don't see a transparent background option, add
body { background: transparent !important; } in the custom CSS field if available.Twitch, YouTube, X, and TikTok Studio
Twitch, YouTube, X, and TikTok's official free streaming app
1
Generate your overlay link
On your StreamTranslate dashboard, sign up and click Generate Overlay Link to get your unique URL.
2
Edit your scene
In Twitch, YouTube, X, and TikTok Studio, click Edit Scene on your current scene at the bottom of the screen. This opens the scene editor.
Bottom bar → Edit Scene
3
Add a Browser Source layer
Click Add Layer → Browser Source. Paste your StreamTranslate overlay link into the URL field. Set size to
1920 × 1080.
Add Layer → Browser Source
4
Set the layer order
Drag the StreamTranslate browser source layer to the top of your layer list. This ensures subtitles appear on top of your game, camera, and other overlays. Click Done.
5
Go Live on StreamTranslate
Click Go Live on your StreamTranslate dashboard, then go live in Twitch, YouTube, X, and TikTok Studio. Your viewers will see live translated subtitles appear as you speak.
Twitch, YouTube, X, and TikTok Studio is beginner-friendly but has fewer customization options. If you want more control over overlay positioning, consider OBS Studio — it's free and more powerful.