Setting Up Your Overlay in OBS

Adding the Now Playing Overlay to OBS

The Now Playing overlay is delivered as a live web page that updates automatically every time your track changes. You add it to OBS (or any compatible streaming software) as a browser source. No plugins, scripts, or third-party tools required. Once it’s in your scene, track updates happen in real time without any interaction from you.

Step 1: Find Your Overlay URL

Open the Now Playing dashboard in your browser and go to the Overlays section in the left navigation. You’ll see a list of all the overlays associated with your account. Each overlay has its own unique URL.

Click Copy URL next to the overlay you want to use. The URL is copied to your clipboard and ready to paste into OBS.

Note

If you haven’t created an overlay yet, click New Overlay to set one up. You can choose a theme and configure its appearance before adding it to OBS, and you can always change the theme later without updating OBS, since the URL stays the same.

Step 2: Add a Browser Source in OBS Studio

Open OBS Studio and navigate to the scene where you want the overlay to appear.

1. In the Sources panel at the bottom of the screen, click the + button.
2. Select Browser from the source type list.
3. In the dialog that appears, choose Create new and give the source a descriptive name such as “Now Playing Overlay.” Click OK.

The browser source properties window will open.

Step 3: Configure the Browser Source

Paste your overlay URL into the URL field. Then set the following options:

Setting	Recommended Value	Notes
URL	Your overlay URL	Paste from the dashboard
Width	1920	Matches standard 1080p canvas width
Height	1080	Matches standard 1080p canvas height
Custom Frame Rate	Leave unchecked	Default browser refresh rate is fine
Custom CSS	Leave blank	Themes handle all styling internally
Shutdown source when not visible	Checked	Frees resources when the scene is hidden
Refresh browser when scene becomes active	Checked	Ensures the overlay is current when you switch to the scene
Control audio via OBS	Unchecked	Overlays have no audio

Click OK to save. The browser source will load in your scene.

Note

If your stream canvas is not 1920×1080, set the width and height to match your actual canvas resolution. The overlay scales to fill the browser source dimensions while keeping its internal layout intact.

Step 4: Position the Overlay in Your Scene

After adding the source, you’ll see it in the OBS preview canvas. Because the overlay uses a full-canvas layout, the visual track card will appear wherever the theme places it, typically the bottom-left or bottom-right corner. You can reposition and resize the browser source itself using OBS’s transform controls, but generally it’s easier to select a theme that positions the card where you want it.

To lock the overlay in place so it doesn’t get accidentally moved, right-click the source in the Sources list and select Lock.

Step 5: Test the Overlay

Make sure the Now Playing desktop app is running and connected to your DJ software, then load and play a track. Within a few seconds, the overlay in the OBS preview should display the current track name and artist. If nothing appears:

1. Right-click the browser source in the Sources list and select Refresh.
2. Confirm the desktop app shows a green connection indicator in the macOS menu bar or Windows system tray.
3. Check that the overlay URL in OBS matches the one shown in the dashboard.

Note

Play a short track or manually load a new one to trigger an update. The overlay only shows content after a track change is detected. It will be blank until the first track event arrives.

Compatibility with Other Streaming Software

The overlay URL is a standard webpage and works with any software that supports browser sources. The setup steps are nearly identical across all platforms.

Software	Source Type	Notes
OBS Studio	Browser	Full support, recommended settings above apply
Streamlabs	Browser Source	Add via the + button in the Sources panel
vMix	Web Browser input	Paste the URL into the Web Browser input settings
XSplit Broadcaster	Webpage source	Use Add Source → Webpage
Twitch Studio	Browser Source	Add via the Layers panel

Troubleshooting

The overlay is blank or shows a loading spinner The overlay requires an active connection between the Now Playing desktop app and your DJ software. Check that the desktop app is running and that the connection indicator shows green. If the app just started, wait a few seconds for it to establish the connection before refreshing the browser source.

The overlay is not updating when the track changes First, confirm the desktop app is connected. If it is, right-click the browser source in OBS and choose Refresh. Also verify that the Refresh browser when scene becomes active checkbox is enabled in the browser source settings so the overlay re-syncs whenever you switch scenes.

The overlay URL shows an error page Your overlay may have been deleted or the URL may be incorrect. Return to the Overlays section in the dashboard, copy the URL again, and paste it into the browser source properties. The URL format should begin with https://app.nowplayingapp.com/overlay/.

The overlay appears cut off or positioned incorrectly Confirm the browser source width and height match your OBS canvas resolution. Open Settings → Video in OBS to see your Base Canvas Resolution, and update the browser source dimensions to match. You can also right-click the source in the preview and choose Transform → Reset Transform to restore it to its default position and size.

The overlay shows stale content from a previous session OBS caches browser source content. With Refresh browser when scene becomes active enabled, the cache is cleared each time you switch to the scene. You can also force a refresh at any time by right-clicking the source and selecting Refresh.