Knowledge Base
ResourcesContact Support
  • Getting started
    • Recommended playbooks
    • Common FAQs
  • Record & Upload
    • By Supademo type
      • HTML interactive demos
      • Screenshot/video interactive demos
    • By record/upload type
      • Chrome extension
        • Smart blur
      • Desktop app
      • Figma plugin
      • Upload content
      • Record screen and webcam
  • Editing
    • HTML editing
    • Hotspots
      • HTML-based hotspots
      • Invisible hotspots
    • Chapters
      • Call-to-Action
      • Password protect
      • Email lead capture
      • Native forms
      • Embed forms & apps in Chapters
    • Browser and progress bar
    • Add, remove, duplicate steps
    • SEO and titles
    • Blur, crop and annotate
    • Animations
      • Zoom and pan
      • Autoplay and loop
      • Hotspot and chapter animations
    • Background music
    • Video splitting
  • Personalization
    • Custom branding
      • Configure custom domain
      • Workspace theme
      • Supademo theme
      • Backgrounds and frames
      • Custom fonts
      • Watermark
    • Voiceovers
      • AI Voiceover
      • Manual Voiceover
    • Translations
      • Translations Hub
    • Variables and tokens
    • Conditional branching
  • sharing
    • Share as a link
      • Trackable share links
      • Twitter / X interactive links
    • Embed online
      • Instructions for popular apps
    • Exports
      • Copy steps as SOP guide
      • Export to PDF or PNG
      • Export to MP4/GIF
    • Folder sharing
    • In-app product tours
    • Showcase collection
  • Analytics & data
    • General analytics
    • Session metrics
      • Search for leads
    • Trending content
    • Integrations
      • HubSpot integration
      • Salesforce integration
      • Google Analytics integration
      • Slack integration
      • Zapier integration
    • Data & API
      • Developer docs
      • Disable tracking
  • Workspace
    • Folders and subfolders
    • Bulk actions
    • Notifications
    • Account settings
    • Comments & collaboration
    • Team management
      • Add or approve new team members
      • Roles and permissions
  • Enterprise
    • Enterprise administration
    • Create multiple workspaces
    • SSO & SAML
  • Billing & legal
    • Billing & payments
      • Access Invoices
      • Billing FAQ
  • General Security
    • Disable tracking
    • Request account deletion
Powered by GitBook
On this page
  • What are Hotspots in Supademo?
  • How to use Hotspots
  • Hotspot design options
  • How to edit hotspot text, colors, or destination step
  • How to change the hotspot transparency
  • Add or remove the next and previous buttons
  • Add or remove step counter
  • Show/hide text hotspot annotations unless hovered
  • How to delete a hotspot
  • Syncing hotspot text changes automatically with voiceovers

Was this helpful?

  1. Editing

Hotspots

Make your demos more intuitive and engaging with interactive hotspots.

PreviousHTML editingNextHTML-based hotspots

Last updated 6 days ago

Was this helpful?

What are Hotspots in Supademo?

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.

How to use Hotspots

  • Add a hotspot: Double-click anywhere on a slide

  • 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 wtih 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.

Global hotspot defaults can also be set on a workspace-wide level through the .

How to edit hotspot text, colors, or destination step

The following options are supported for individual hotspots

  • Edit hotspot text

  • Tooltip positioning (left, right, top, bottom, auto)

  • Tooltip text and background color


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.

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:


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.


How to delete a hotspot

Please follow the instructions below to delete a hotspot:

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:

Add markdown text such as bolding, italics, and

Destination step on click which sets the target slide upon clicking that hotspot - which allows you to set up

hyperlinks
conditional branching demos
Workspace Customization tab