Click Map

Features

Let your viewers interact with your stream by directly clicking on your live video overlay!

You can map your OBS sources and let your viewers take full control!

One single tap to activate a different camera? And another tap to change the whole scene? Or how about having your viewers decide which path to take in a video game you're playing by simply tapping on the video to vote?

You can retrieve the name of the viewer who clicked and the exact coordinates!
The extension now includes an overlay to visualize your viewers' clicks!

Utilizes the Heat Twitch extension made by Scott Garner.

Setup

Quick Start

1. Install the Heat extension on your Twitch channel and activate it as an overlay (in your Twitch dashboard).

2. Install the extension. You can follow the Extension Install Guide.

3. Double-click on the Settings button inside the premade deck:

   • If you're using multiple OBS connections, change the obs_name variable to your preferred OBS Name (you can find it in the SAMMI main menu - OBS Connections).

   OBS Protocol

   Please ensure your OBS Protocol in SAMMI - OBS Connections is set to either OBSws 4.9 or OBSws 5, and not Auto.

4. Double-click on the Enable Clicks button:

   • Fill out both Login Name boxes with your Twitch login name for your streaming channel (use all lowercase characters).
   • Fill out the Click Map Listener command:
     • Allow Anonymous - Decide whether you want to allow anonymous viewers to trigger your clicks (read more below).
     • All other boxes are filled out automatically. Do not modify them. If you accidentally change them, please return them to the following default values:
       • Channel ID: clickMapId
       • Oauth Token: clickMapToken
       • OBS Canvas Width: canvasWidth
       • OBS Canvas Height: canvasHeight

5. Press Save and Close, and then Save again to save the deck as well.

6. Click on the Create Example Scene button. An example scene with three color sources should be added to your OBS.

7. Start streaming on Twitch using the example scene. You must be live for the extension to work.

8. Once your stream is live and the Heat Map extension is active as your overlay, click on the green Enable Clicks button (while connected to OBS and Bridge). You should see a yellow notification message: Listening for clicks, and the status should change to Connected in your Click Map tab in Bridge.

9. Try clicking on your video overlay in your Twitch channel (on the colored sources in the example scene). You should get a Twitch chat message and a yellow alert in SAMMI detecting the clicks!

Full Setup Walkthrough

Install OBS Overlay

To visualize your viewers' clicks on your stream, you can install this handy overlay that can display them as their profile icons, a random channel emote, or your custom image.

1. In your premade deck, click on 'Generate Link for OBS Browser Overlay'.
2. A new page will open. Fill out all the fields and test the clicks in the preview frame.
3. Once satisfied, generate the URL and copy it to your clipboard.
4. Back in SAMMI, click on Install New OBS Overlay and paste the URL (while connected to OBS).
5. A new browser source called Click Map Overlay should now be added to your OBS.
6. Whenever you decide to modify how the overlay looks, simply generate a new URL (step 2) and change it inside your browser source settings in OBS.

If you wish to enable the overlay only when listening to clicks:

1. Open the Enable Clicks button and uncheck Off for the 'Enable me if using Click Map OBS Browser overlay' comment. Change the scene and source name if needed in the Source Change Visibility command.
2. Open the Disable Clicks button and uncheck Off for the 'Enable me if using Click Map OBS Browser Overlay' comment. Change the scene and source name if needed in the Source Change Visibility command.

Map a source

You can select which OBS sources you want to be clickable by your viewers on your stream overlay.

Use the Map Sources button for it and either duplicate one of the premade commands or add a new Click Map Add Source command.
The scene containing your source must remain at 1.0 scale when used as a nested scene. If you are using atypical transform settings for the OBS source (such as unusual positional alignment, bounding box, or crop filters), the mapping might not always be 100% correct. In that case, it's recommended to map an area instead.

Map an area

Instead of selecting one OBS source, you can select an entire area on your OBS canvas to be clickable.

Use the Map Areas button for this, and either duplicate one of the premade commands or add a new Click Map Add Area command. The scene containing your source must remain at 1.0 scale when used as a nested scene.

Attach triggers to buttons

Once you add your clickable sources or areas, remember the trigger names you gave them, as you'll need to attach these triggers to your SAMMI buttons.

1. Create or use an existing button you want triggered when a viewer interacts with the clickable source or area.
2. Right-click the button and select Edit Triggers.
3. Click the + button and choose Extension Trigger.
4. Delete the * in the Message field and fill it with the extension trigger name you selected for the source or area.
5. Add any commands to the button you want executed. You can use the following Pull Values for the Trigger Pull Data command to get specific information about the click.

Allow click triggers only on the correct scene

You can compare the scene pull value with your current scene (available as the premade variable global.YOUROBSNAME.current_scene in SAMMI) to check if they match.

If you need to check whether the Click Map scene is nested inside another scene, retrieve the current source list via the OBS Request command and verify if the scene pull value is within that list. Examples for both scenarios can be found in the grey trigger example buttons in your premade deck.

Remove Trigger

This button removes any click triggers you set up in your Map Sources or Map Areas buttons.

Enable Clicks

Once your sources or areas are mapped and their triggers attached to your buttons, press the Enable Clicks button (assuming you've already followed the instructions to input your Twitch username).

You should see a yellow notification message and the status will change to Connected in your Click Map tab in Bridge, indicating the extension is listening for clicks. To stop listening, use the Disable Clicks button.

Anonymous vs. Non-anonymous clicks

The extension retrieves the name of the viewer who clicked on your overlay.

Your viewers must grant access to their information via the extension settings in their overlay. If they don’t, their clicks will be sent as anonymous.

By checking the Allow Anonymous option in your Enable button, you can decide whether or not to allow anonymous clicks (viewers who aren’t logged in or haven’t authorized the extension).

Simulating key presses

You can also let viewers click a button on your video overlay that simulates a key press.

1. Create an OBS source (e.g., an image of a W button).
2. Use the Map Sources button and either duplicate one of the premade commands or add a new Click Map Add Source command for the OBS source created in step 1 (see Map a source section).
3. Create a new button in your deck and attach an Extension Trigger to it (see Attach triggers to buttons section). The Message field will be the trigger name chosen in step 2.
4. Double-click the button from step 3. Click the + and type Keyboard simulate press, then fill out the following:
   • Button - Choose the button to simulate the key press.
   • Ctrl/Alt/Shift - Select whether to press the button with a modifier (e.g., Ctrl + W).
   • Hold Duration - Specify how long the button should be held.
5. Press Save and then Save again to save the deck.
6. Press the Enable Clicks button.
7. Now every time a viewer clicks the selected overlay button, SAMMI will simulate the key press!