Storyline 360: Adding Hotspots to 360° Images

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

• Adding Hotspots
• Formatting Hotspots
• Understanding How Hotspots Behave
• Formatting Labels
• Changing Label Fonts
• Adding Audio to Labels
• Adding Pictures and Videos to Labels
• Adding Hotspot Hints
• Formatting Hotspot Hints
• Changing Hotspot Hint Fonts
• Adding Tooltips
• Formatting Tooltips
• Adding Buttons to Labels
• Making Buttons Interactive
• Formatting Buttons
• Understanding Button States
• Modifying and Repositioning Hotspots
• Renaming Hotspots
• Deleting Hotspots 

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.

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 Label 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 Label 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:

• Formatting Pictures, Screenshots, and Characters
• Editing Videos
• Adjusting Video Properties

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

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.

Adding Tooltips

Give learners bite-size info when they hover over hotspots in your free-navigation interactions. (Learn how to add tooltips to markers.) Install the November 2021 update or later, then follow these steps:

1. In the 360° image editor, make sure that you’re using Free navigation mode.
2. Select the hotspot and click Tooltip on the ribbon.
3. Add up to 35 characters in the text field next to the hotspot.

Note: Hovering over a hotspot without a label or trigger displays its tooltip and automatically counts the hotspot as viewed in the progress indicator. Conversely, hovering over a hotspot with a label or trigger displays its tooltip and counts the hotspot as viewed when learners click it.

Formatting Tooltips

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

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

Adding Buttons to Labels

Engage your learners by revealing more information with ready-to-use clickable buttons. (Learn how to add buttons to marker labels.) Install the January 2022 update or later, then follow these steps.

1. In the 360° image editor, select the hotspot and click the Label tab on the ribbon.
2. Click the Button drop-down arrow and choose one of the pre-built button styles.
3. Add up to 35 characters in the button’s text field.

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

Making Buttons Interactive

Keep learners engaged by guiding them to the next step in their journey. Perform specific actions, such as launching a website or downloading a document, when learners click a button. Learn more.

Formatting Buttons

Change the accent color for individual buttons. Just select the button, click the Accent drop-down arrow, and then select a color.

Choose a different font and font size for individual buttons and apply formatting (e.g., bold, italics, and underline) to it. Select the button text and use the font options on the Label tab.

Understanding Button States

Buttons in 360° interactions have the following built-in states:

• Normal: The initial state, displays the selected accent color
• Hover: When interacted with, displays a dimmed color and hand icon

Button states in 360° interactions can’t be customized.

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.