# Interactive Video Hotspots

***

### **What are Interactive Video Hotspots?**

Timeline-based hotspots on videos allow you to **overlay hotspots on video steps at specific timestamps**. These hotspots can guide viewers, highlight features, or add context exactly when it's most relevant.

Unlike static annotations, video hotspots appear at precise moments in your video timeline — making your demos more dynamic and engaging.

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

***

### **How to Add Video Hotspots**

1. Open the demo containing your video step and select the video step you wish to edit.
2. Click the **Edit** button to modify the video.
3. *(Optional)* Use the **splitting or trimming tool** to remove unwanted parts — right-click and select **Split Here**, or drag the edges of the timeline to trim.
4. Hover over any **timestamp** on the timeline where you want to add a hotspot.
5. Click to add a hotspot and choose the **hotspot type** you'd like to use.
6. **Reposition and edit** the hotspot on the canvas as needed.
7. Customize the **styling** of the hotspot to match your branding.
8. Click **Apply** to save your hotspot settings.
9. Repeat for other moments in the video where you want hotspots.
10. Click **Save** to preserve your changes.
11. Click **Share** or **Preview** to see your video demo with interactive hotspots.

> 💡 **Tip:** Plan your hotspot placements before editing — identify key moments where annotations will add the most value.

***

### **Benefits**

* **Timeline precision** — Add hotspots at exact moments in your video.
* **Enhanced engagement** — Guide viewers through key features and actions.
* **Full customization** — Reposition, restyle, and edit hotspots to match your branding.
* **Flexible hotspot types** — Choose from different hotspot styles based on your needs.

***

### **Use Cases**

<details>

<summary><strong>Highlighting Feature Announcements</strong></summary>

Add hotspots at the exact moment a new feature appears on screen. Draw attention to what matters most without interrupting the video flow.

</details>

<details>

<summary><strong>Creating Guided Video Tutorials</strong></summary>

Overlay instructional hotspots at key steps in your video. Viewers get context exactly when they need it — no pausing or rewinding required.

</details>

<details>

<summary><strong>Adding CTAs to Video Demos</strong></summary>

Insert clickable hotspots at strategic moments to prompt viewers to take action — sign up, learn more, or explore related features.

</details>

<details>

<summary><strong>Annotating Product Walkthroughs</strong></summary>

Use hotspots to label UI elements, explain functionality, or provide tips as they appear in the video — making walkthroughs more informative.

</details>

***

> ✨ **The Result:** Video demos that guide, engage, and convert — with interactive hotspots at exactly the right moments.