Hotspots serve as invisible markers in 360° images. They’re great for testing learners’ ability to explore content on their own.

Adding Hotspots

In the 360° image editor, you can add one or more hotspots to your interaction. Click  Hotspot on the ribbon, or right-click the image and choose Insert Hotspot. You have two options for creating hotspot shapes:

  • Make a rectangle by clicking and dragging your mouse on the image at the same time.
  • Draw a custom shape by clicking the image where each control point should go. 

You can drag the control points of any shape to change its form. You can delete a control point by clicking it, then pressing your Delete key.

Formatting Hotspots

Change the color and effects for all hotspots.

The default color for hotspots comes from Control 1 of your theme colors. To change it, go to the Interaction tab, then click the Hotspots drop-down arrow to choose a color. (This updates the color for all hotspots.)

In the same list, you can decide if you want to reveal or hide hotspots when learners click them, and enable or disable the pulsing animation for unvisited hotspots.

Formatting options for hotspots

Understanding How Hotspots Behave

Hotspots are often invisible, by design, so they behave differently from interactive markers. And their behavior is impacted by optional effects—Reveal Hotspots and Pulse Hotspots If Unvisited—as described below.

 Reveal and Pulse Are Both Enabled

  • Unvisited hotspots display a transparent pulsing square.
  • Hovering over a pulsing square or hotspot area displays the entire hotspot shape and changes the cursor to a hand at the same time.
  • Clicking a hotspot thickens its border.
  • Visited hotspots become a darker color. 
  • Clicking outside of a hotspot causes all hotspots to briefly flash. (Unvisited hotspots display in your color choice. Visited hotspots are darker.)

Reveal Is Enabled and Pulse Is Disabled

  • No initial visual cue displays for visited or unvisited hotspots.
  • Hovering over a hotspot area displays the entire hotspot shape.
  • Clicking a hotspot thickens its border.
  • Visited hotspots become a darker color. 
  • Clicking outside of a hotspot causes all hotspots to briefly flash. (Unvisited hotspots display in your color choice. Visited hotspots are darker.)

Reveal and Pulse Are Both Disabled

  • No initial visual cue displays for visited or unvisited hotspots.
  • Hovering over a hotspot area changes the cursor to a hand.
  • Clicking any area of the hotspot displays its entire shape and thickens its border.
  • Visited hotspots become a darker color.
  • Clicking outside of a hotspot causes visited hotspots to briefly flash. (Unvisited hotspots don’t appear. Visited hotspots are darker.)

Formatting Labels 

Change the theme and style for all labels in your interaction all at once. 

To change the theme for your labels, go to the Interaction tab, then click the Theme drop-down arrow to select a light or dark theme. 

In the same tab, you can customize the labels’ style. Just click the Corners drop-down arrow to choose a square or rounded corner style, and if you prefer to hide or show the connector.

Changing Label Fonts

The fonts used for the label title and description default to your project’s theme fonts.

To use a different font, use the font selector in the Hotspot tab to modify an individual label, or customize your theme fonts to change all the labels in your course at the same time.

Adding Audio to Labels

Import audio from your computer, generate text-to-speech clips, choose audio from the media library, or record narration right in Storyline 360. Just select your hotspot, go to the Media tab on the ribbon, click Audio, and choose one of the audio options:

Audio from File

Use this option to import an audio clip from your computer.

Media Library

Use this option to insert an audio clip from the media library.

Record Mic

Use this option to record an audio clip.

Text-to-Speech

Use this option to convert your text to narration.

Options

Change your audio playback device and recording devices. You can also modify the recording volume level.


After adding audio, additional options on the Media ribbon become available, such as an audio editor, a volume adjuster, and more. To learn more about working with audio, visit Editing Audio and Using the Audio Tools.

To change the accent color for the selected hotspot’s media controls, click Accent on the Media ribbon, and choose the player’s accent color or a custom one.

To add closed captions to hotspot audio, select the audio and click Add Captions on the Media ribbon. Visit this user guide to learn all about working with closed captions.

Adding Pictures and Videos to Labels

Add an image or video to each hotspot’s label. Just select your hotspot, go to the Media tab on the ribbon, click Picture or Video, and choose one of the following:

Picture

Content Library 360 Photos

Use this option to insert a photo from Content Library 360.

Picture from File

Use this option to insert an image from your computer.

Media Library

Use this option to insert an image from the media library.

Screenshot

Use this option to capture and insert a clip of your screen.

 

Video

Content Library 360 Videos

Use this option to insert a video from Content Library 360.

Video from File

Use this option to insert a video from your computer.

Media Library

Use this option to insert a video from the media library.

Record Webcam

Use this option to record a video with your webcam.


To edit a picture or video you’ve added to a label, visit these user guides:

Add alt text to all pictures and videos so they’re accessible to screen readers and other assistive technologies. Learn more.

Adding Hotspot Hints

Help learners navigate your guided-tour interactions with ease by adding hints to invisible hotspots. Just install the August 2021 update or later, then follow these steps:

  1. In the 360° image editor, make sure that you’re using the Guided tour navigation and that the Reveal Hotspots option is disabled.
  2. Select the hotspot and click Hint on the ribbon.
  3. Add up to 250 characters in the hint field in the lower-right corner of the 360° image.

Hotspot hint feature

Hotspot hints appear in the lower-right corner of your 360° image. Click the X to collapse the hint and click the info icon to display it, as shown below. 

How hotspot hints work.

Note: To help learners find a hotspot, its hint is always expanded by default. Once learners click a hotspot, its hint is collapsed when they revisit the hotspot or the interaction.

Formatting Hotspot Hints

Change the theme for all hotspot hints all at once. Just go to the Interaction tab, then click the Theme drop-down arrow to select a light or dark theme.

Changing Hotspot Hint Fonts

Choose a different font and font size for individual hotspot hints and apply formatting (e.g., bold, italics, and underline) to them. Just select the hotspot hint and use the font options in the Hotspot tab.

Tip: The font used for the hint text defaults to your project’s theme fonts. Customize your theme fonts to change all the hints in your course at the same time.

Modifying and Repositioning Hotspots

To modify the shape of a hotspot, drag its control points. To reposition a hotspot, drag it to another location on the interaction.

Renaming Hotspots 

When you add hotspots, Storyline 360 gives each one a default name: Hotspot 1, Hotspot 2, etc. We recommend giving them more intuitive names, so they’re recognizable when adding triggers.

One way to rename a hotspot is to enter a label title. The name of the hotspot updates to reflect its label title. Or, double-click the hotspot on the Markers & Hotspots panel, enter a new name, and press Enter on your keyboard.

Deleting Hotspots

To delete a hotspot, select it and press Delete on your keyboard. Or, select the hotspot and click Cut on the ribbon.

Another option is to convert the hotspot to a marker. Just select the hotspot, then click Switch Type on the Hotspot ribbon. Learn more about markers.

There’s more work underway to enhance 360° images. Here’s a sneak peek of what’s to come:

  • Tooltips: Display tooltips when learners hover over markers and hotspots in 360° interactions so learners know what to expect before they click.
  • Buttons: Add buttons to marker and hotspot labels in 360° images so learners can trigger specific actions, such as launching a website or downloading a document.
  • Progress-Tracking Exclusions: Exclude specific markers and hotspots from progress tracking in 360° images to capture more accurate results.
  • Completion State: Display a completion state to inform learners when they’ve clicked all the markers and hotspots in a 360° interaction.

Stay tuned for more details!

Related Content