OBS Studio

Add the StreamVox overlay to OBS Studio as a browser source. It takes about two minutes.

Before you start

• OBS Studio installed on your computer.
• Your overlay URL: https://streamvox.io/<username>, where <username> is your Twitch username, the part after twitch.tv/ in your channel URL. See Installation.

Add the browser source

1. In the Scenes panel, select the scene you stream with.
2. In the Sources panel, click + and choose Browser.
3. Select Create new, name the source StreamVox, then click OK.
4. In the properties window:
   • URL: your overlay URL, for example https://streamvox.io/pirmax.
   • Width: 1920 and Height: 1080. If your canvas has another size (Settings › Video › Base (Canvas) Resolution), use that size instead.
   • Tick Control audio via OBS (see Control the audio).
   • Leave the default Custom CSS as it is: it keeps the background transparent.
   • Leave Shutdown source when not visible unticked, so the characters stay on stage when you switch scenes.
5. Click OK.
6. In the Sources list, drag StreamVox above your game, window or camera sources, so the characters are drawn on top of them.

If the overlay does not cover the whole scene, right-click the source and choose Transform › Fit to screen.

Control the audio

StreamVox plays sounds when your viewers use commands, cheer, raid or subscribe. With Control audio via OBS ticked, the overlay gets its own fader in the Audio Mixer:

• Move the fader to set the volume of the overlay, or click the speaker icon to mute it.
• To hear the sounds in your headphones too, open Edit › Advanced Audio Properties and set Audio Monitoring to Monitor and Output for StreamVox.

Without this option, the sounds go straight to your computer's default audio device: OBS does not control them, and depending on your setup your viewers may hear them twice or not at all.

Test it

1. Open your Twitch chat and send a message: your character walks onto the overlay.
2. Type !wave or !fireworks to check the animations and the sound.

Your viewers' characters appear when they join or write in your chat, up to 30 at a time. Browse the action commands and character commands to share with your community.

Troubleshooting

Nothing appears on the overlay

• Check the URL: it must end with your Twitch username (the one in your channel URL), not your display name.
• Characters only appear once someone joins or writes in your chat: send a message to test.
• Right-click the source, choose Properties, then click Refresh cache of current page.

The overlay has a black or white background

Restore the default Custom CSS in the source properties:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

There is no sound

• Tick Control audio via OBS and check that the StreamVox fader is not muted in the Audio Mixer.
• To hear the sounds yourself, set Audio Monitoring to Monitor and Output (see Control the audio).

The characters are too small, too big or cut off

The width and height of the source must match your canvas (1920 × 1080 in most cases). Fix them in the source properties, then use Transform › Fit to screen.

The characters disappear when I switch scenes

Untick Shutdown source when not visible and Refresh browser when scene becomes active in the source properties.

Still stuck? Write to contact@streamvox.io.