# Hotspot

Hotspots are clickable annotations that guide users through each step of your Supademo. They're automatically added when recording with the Chrome Extension and can be fully customized in the Edit view.

* **Add a hotspot**: Double-click anywhere on a slide or click **Hotspot** via the toolbar
* **Reposition**: Drag the hotspot to any area on the screen
* **Edit**: Click “Edit” on the hotspot to modify text, styling, or actions

### Hotspot design options

You can customize your Supademo slides with options from three distinct hotspot designs:

1. **Pointer**: This style allows you to point to specific areas on the screen.
2. **Callout**: This style allows you to add a general callout anywhere on the screen.
3. **Custom area**: This style allows you to highlight specific elements or areas on the screen.

{% hint style="info" %}
HTML-baesd hotspots have additional options and behave differently from hotspots for **screenshot and video-based Supademos.** [Click here to learn more.](https://docs.supademo.com/customize/hotspot/html-based-hotspots)
{% endhint %}

{% @supademo/embed demoId="cluswvilw0rqi4r8t4mrjeoqy" url="<https://app.supademo.com/demo/cluswvilw0rqi4r8t4mrjeoqy>" %}

{% hint style="info" %}
Global hotspot defaults can also be set on a workspace-wide level through the [Workspace Customization tab](https://docs.supademo.com/workspace-and-organization/workspace-branding/).
{% endhint %}

{% hint style="info" %}
Note: If you add multiple hotspots to a single step, they will all appear at once when a viewer reaches that step (like in the example above). To show hotspots one at a time for the same image/video step, duplicate the step, adjust the hotspots as needed, and set the appropriate navigation.
{% endhint %}

### How to edit hotspot text, colors, or destination step

<figure><img src="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2FlFU3qNd7eR9ORVAkjALC%2Fimage.png?alt=media&#x26;token=f92cb37f-ae2b-4de5-ba5e-3f6af344787e" alt=""><figcaption></figcaption></figure>

#### **The following options are supported for individual hotspots**

| Name                                         | Description                                                                                                                                                 | Applies to             |
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| Hotspot design type                          | Choose from Pointer, Callout, and Custom Area styles for hotspot tooltips                                                                                   | Screenshot/video demos |
| Hotspot text                                 | Customize the text shown in the hotspot                                                                                                                     | All                    |
| Design (colors, animation)                   | Choose the color, animation of the hotspot                                                                                                                  | All                    |
| Hotspot tooltip width                        | Choose between S/M/L hotspot widths, custom for each individual hotspot or across all                                                                       | All                    |
| Hotspot tooltip position                     | Choose the X/Y coordinates for the hotspot's position or drag it to the appropriate position on the screen                                                  | Screenshot/video demos |
| Hotspot anchor position                      | Choose the HTML element (i.e. button/input) that the hotspot will be anchored next to                                                                       | HTML demos             |
| Next/Back button display                     | Choose to display next or previous buttons for hotspots for viewer navigation                                                                               | All                    |
| Next/Back button text                        | Customize the text to replace next / previous buttons for a single or all hotspots                                                                          | All                    |
| Custom mapping for Next/Back button          | Set up custom routes for specific back / next buttons                                                                                                       | All                    |
| Tooltip text - display on hover or always on | Choose to display the hotspot only when it's hovered on or not                                                                                              | All                    |
| Mobile hotspot view                          | <p>Displays hotspots in mobile-optimized view on smaller screens if desired. </p><p></p><p><strong>Found in the Settings page of the Supademo.</strong></p> | All                    |
| Show step count                              | <p>Display the step or progress counter on the hotspot (i.e. 4 or 9).<br><br><strong>Found in the Settings page of the Supademo.</strong></p>               | All                    |
| Hotspot transparency                         | <p>Set the transparency of the hotspot blinker.<br><br><strong>Found in the Settings page of the Supademo.</strong></p>                                     | All                    |
| Invisible hotspots                           | Add invisible hotspots that route to different actions/slides when clicked, without any visual tooltips or cues.                                            | HTML demos             |

***

### **How to change the hotspot transparency**

You can adjust the transparency of all of your hotspots by opening your Supademo in edit view, clicking Customize and choose the transparency %.

### **Add or remove the next and previous buttons**

You can add or remove the next and previous buttons on a hotspot callout by opening your Supademo in edit view, clicking Customize and enabling or disabling this option.

### Customize the next and previous button text

You can add your own custom labels to hotspot buttons instead of relying on default text. This gives you complete control over the messaging and allows you to create more contextual, branded experiences for your viewers.

{% @supademo/embed demoId="cmb8zg83c02aczh0iq0hulshh" url="<https://app.supademo.com/demo/cmb8zg83c02aczh0iq0hulshh>" %}

### **Add or remove step counter**

For longer demos with many steps, it may make sense to remove the step counter from your hotspot callouts to reduce friction or perception of time investment. To modify this, you can set the value here:

![](https://d33v4339jhl8k0.cloudfront.net/docs/assets/65cd1b060e92bd4055f3b684/images/6633a6ade7511e33f36eabad/file-O1YaWVZ7en.png)

***

### **Show/hide text hotspot annotations unless hovered**

You can hide the hotspot callout/annotations unless it's hovered upon by a user. You can do this by opening your Supademo in edit view, clicking Customize and enabling or disabling this option.

<figure><img src="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2FbmWqCKHRw29PNOHkGl4Y%2Fimage.png?alt=media&#x26;token=33254f8d-2712-4eef-b99f-7f7bff010964" alt=""><figcaption></figcaption></figure>

***

### Change hotspot size

You can choose from three different hotspot sizes - Small, Medium, and Large - to better match your content and design preferences.&#x20;

<figure><img src="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2FEfKKvbzbrT4dThWJiZac%2Fimage.png?alt=media&#x26;token=e9e05844-9b27-4891-b63f-58f0dd143565" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Note: Font sizes for hotspot text cannot be customized at the moment and are set to a standard 1 rem.
{% endhint %}

### How to delete a hotspot

Please follow the instructions below to delete a hotspot:

1. Click **Edit** on the slide containing the hotspot you want to remove.
2. Press **Delete** or click the trash icon to remove it.

{% @supademo/embed demoId="cm5woh9cr2by336cgdau84zh5" url="<https://app.supademo.com/demo/cm5woh9cr2by336cgdau84zh5>" %}

### Syncing hotspot text changes automatically with voiceovers

With this feature, you can automatically sync changes you make to all of your voiceovers in just a few clicks:

{% @supademo/embed demoId="cm8agaibm0g2s2ugqvqsm7uo7" url="<https://app.supademo.com/demo/cm8agaibm0g2s2ugqvqsm7uo7>" %}

### Other hotspot customization settings

Hotspots support a range of additional customization options:

* #### **Backdrop toggle on all hotspot types:** You can now **enable or disable backdrop shading** for any hotspot—HTML or static. This helps draw attention to key elements or maintain a clean look, depending on your use case.
* #### **Text alignment options:** Hotspot tooltips now support **left, center, or right alignment**, giving you more control over the layout and presentation of each step.

These can be applied per hotspot or as default settings for the entire Supademo.