StreamPet
← Back to blog
How to set up StreamPet Overlay in OBS (step-by-step guide)
Updated Feb 17, 2026 13 min read StreamPet Team

How to set up StreamPet Overlay in OBS (step-by-step guide)

This guide shows exactly how to set up StreamPet in OBS so Bits and Gifts can appear as live pet animations in your stream scene. The workflow is straightforward: connect your account in the StreamPet dashboard, copy your overlay URL, add it as Browser Source in OBS, position and size it correctly, then run pre-live tests. The details matter because clean placement and reliable checks are what turn a cool effect into a dependable interaction system. Follow this guide once, then reuse the same routine before every major stream.

OBS SetupBrowser SourceTwitch BitsTikTok GiftsOverlay TutorialStreamPet Dashboard

Step 1: Configure StreamPet dashboard first

Open https://streampet.net/app and sign in. In Platform Connections, connect your Twitch account so Bits events can be received. If your plan supports it and you want Gifts in the same loop, connect TikTok by entering TikTok ID or profile URL and confirming the account state.

Before opening OBS, verify that platform statuses are healthy. This prevents a common mistake where creators set up Browser Source perfectly but receive no events because platform connection was incomplete. Always solve account state first, then solve scene composition.

In Overlay Controls, make sure the overlay is enabled and copy the Overlay URL. Keep this URL private. It is the live feed endpoint your scene software renders. If you later generate a new overlay link, you must update OBS immediately with the new URL.

Step 2: Add Browser Source in OBS

In OBS, open your target scene and add a new source. Choose Browser Source, then give it a clear name such as "StreamPet Overlay". Clear naming saves time when you troubleshoot quickly or hand over operations to another person.

Paste your StreamPet overlay URL into the Browser Source URL field. Set width and height based on where you want pets to travel. Many creators use a wide lane near the lower third so animations stay visible while avoiding facecam and key game HUD zones.

After adding the source, verify that it appears in the correct layer order. Place it above passive background elements and below elements that should never be covered. Layer order is a reliability decision, not just a design preference.

Step 3: Place and size for readability

Do not optimize for maximum size first. Optimize for clarity first. If pets are too large, dense support moments can clutter your scene. If pets are too small, mobile viewers may miss interaction completely. Start moderate and test against your real stream background.

Reserve a movement lane that avoids subtitles, sponsor bars, minimaps, and facecam edges. The lane should feel intentional, not accidental. Good lane planning is the biggest predictor of whether interaction looks professional during high activity windows.

Once placement is validated, lock the source. Source drift is a common hidden issue in OBS when creators rapidly edit scenes. Locking prevents accidental movement and keeps interaction behavior consistent across sessions.

Step 4: Run pre-live functional tests

Return to the StreamPet dashboard and run Test Twitch Bits. Watch OBS preview and confirm a pet appears, label is readable, and movement completes. If TikTok is connected on your plan, run Test TikTok Gift and verify the same visual quality in the same lane.

When testing, inspect practical details: Did animation start quickly? Did the name overlap background text? Did the pet exit the scene cleanly? These details determine whether viewers perceive the interaction loop as polished or noisy.

If tests fail, troubleshoot in sequence: platform connection, overlay enabled state, overlay URL freshness, then source visibility in OBS. Sequential troubleshooting is faster and safer than random adjustments under time pressure.

Step 5: Build a repeatable pre-live checklist

A short checklist before every stream reduces most incidents. Recommended order: dashboard login, platform status check, overlay enabled check, source URL check, one Twitch test, one TikTok test if used, then final scene glance. This routine takes minutes and protects stream quality.

For channels with moderators or producers, assign ownership clearly. One person verifies dashboard state while another confirms scene behavior in OBS. Explicit ownership prevents duplicated work and missed checks when stream start timing gets tight.

Document your checklist in plain language so anyone can run it. Reliable process matters more than hero troubleshooting. When the routine is simple, teams actually follow it, and the viewer experience remains stable.

Step 6: Improve results over time

After each stream, review moments where interaction density was highest. Did the lane stay readable? Did chat react positively? Were there sections where overlays felt too dense? Use this feedback to adjust scene placement, pet size, and prompts for the next session.

Create scene variants if your content formats differ. Gameplay, IRL, and just-chatting often need different overlay transforms. Scene-specific presets are safer than manually dragging one source each stream.

With this workflow, OBS setup becomes repeatable and low stress. More importantly, your audience gets consistent, visible feedback for support actions, which encourages more participation and helps build a stronger monetization loop.

Key takeaways

  • Set up dashboard connections before configuring OBS sources.
  • Use Browser Source with intentional lane placement and clean layer order.
  • Run Twitch and TikTok tests before going live.
  • Use repeatable checklists to keep overlay behavior reliable across streams.

More StreamPet guides