Enhance your images with interactive elements! Hotspots let you add buttons, pop-ups, and links to create engaging, dynamic visuals. Use them to provide extra context, break information into bite-sized pieces, or guide learners to additional resources — all with a simple click.
Example - how it could look:
1) Here’s how to add a hotspot:
Open your Story and select Hotspot to add the node.
Then, click Edit to enter the edit mode.
2) Edit a hotspot:
Select the newly created Hotspot node
Click Edit to enter edit mode.
3) Upload your image:
In edit mode, the first step is to upload the image you want to add your hotspots to. You can do that by selecting Add image in the top right corner.
4) Add your hotspots:
After uploading your image, you can start adding hotspots. Click the + icon under “Hotspots” in the right-side menu to create your first one.
5) Customize your hotspot:
Position: Drag the hotspot to place it anywhere on the background image.
Shape: Click Hotspot shape to choose from a square, circle, rounded square, animated button, or an image.
Upload your own image to use as a hotspot.
3. Colors: Set the fill and stroke colors to match your design. Tip: Drag the fill percentage to 0% if you want the hotspot to be invisible.
4. Adjust rounded corners: Modify the hotspot’s corner radius by selecting and dragging the circular handles in the middle of the hotspot.
6) Add content to your hotspot:
To add content, select “Edit content” on the hotspot you want to edit:
2. You will be presented with two ways to add content: Pop-up or Instant jump
3. Pop-up: Create an interactive info pop-up with text, images, and navigation buttons. Just toggle on the content type you need, then add your text, upload media, or customize the button.
Media: Adjust any uploaded image to fit your desired view. Simply select Crop from the three-dot menu in the top-right corner.
Crop: You can now freely adjust the size, cropping and rotation of the image itself.
Text: Enable Text from the right-side menu to add and customize text. Adjust the size, font, and style options like bold or italic to match your design.
Navigation: Enhance your hotspot with links to help players explore and learn more. Customize the navigation button by changing its color, setting the URL, and choosing whether the link opens in a new tab or the current one.
4. Instant jump: Link the hotspot to an external URL to redirect players instantly. When selected, the Player is immediately taken to the linked site.
5. When you’re done, click Save hotspot in the top-right corner. You can continue adding more hotspots by clicking the + icon.
7) Adjusting settings:
Once you’ve added your hotspots, you can fine-tune the settings to enhance the experience:
Fullscreen mode: Enable to display the hotspot in fullscreen when viewed in the Story.
Set checkmark on clicked hotspots: Toggle on to mark visited hotspots with a checkmark, helping learners track their progress, as depicted below:
8) Customize continue button:
The continue button guides the Player to the next node. You can customize its name, background color, and text color to fit your design.
2. Show once all hotspots are clicked: Choose whether the button should only appear after all hotspots have been visited. Enabling this ensures learners explore every hotspot before proceeding. If left unchecked, the button will appear immediately, allowing the Player to decide when to move forward.
9) Done
When you’re satisfied with your setup, click Done to return to the Node Map. Your Hotspot node is now ready to make your Story more interactive and engaging!