Add The graphic URL to OBS
How to addd the Graphic URL to OBS (or similar software)
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.
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
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).
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.
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:
More information on how to add a Browser Source or Webpage URL to OBS
More information on how to add a Browser Source or Webpage URL to Streamlabs OBS (SLOBS)
Instruction video to add a Browser Source to OBS.
Instruction video to add a Webpage URL to Xsplit.
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!
Need more help? Contact us with your questions.