Add The graphic URL to OBS

How to addd the Graphic URL to OBS (or similar software)

  1. You can find your graphic URL in the Smart Click Maps configuration page (click the gear icon). Your graphic overlay URL is channel specific. Don't share it with anyone else.

  2. To add the graphic URL to your scene click the + in the Sources section and select ‘BrowserSource’ (see screenshot 1). In Xsplit click Add > Other > Webpage URL

  3. Copy the Graphic URL (Basic or Advanced) and paste this in the URL field You can find your Graphic URL in your Twitch dashboard > Extension Tab > Configure (gear icon).

  4. Make sure you set the width and height in a 16:9 ratio depending on your broadcast settings (e.g. 1280x720 or 1920x1080), see screenshot 2.

  5. Make sure the overlay (red rectangle) covers the entire player. You can click with your right mouse button and select 'transform' and click 'Fit to screen'.

Make sure the browser source is above your camera input or game capture in the source order.

Screenshot 1 - Add Browser Source (OBS)

Screenshot 2 - Configure Browser Source (OBS) by pasting the graphic URL and setting the correct ratio.

More information:

Advanced VS Basic Graphics

Examples of the advanced graphics overlay.

This version is using WebGL rendering which can be heavy on your CPU/GPU. If you experience issues with the graphic URL switch to the basic graphics URL.

Examples of the basic graphics overlay

This version doesn't require WebGL.

Smart Click Maps with Advanced Graphics

Smart Click Maps with Basic Graphics

Polls with Advanced Graphics

Polls with Basic Graphics

You're all set to use Smart Click Maps!

Learn how to operate Smart Click Maps

Need more help? Contact us with your questions.