← Mighty Studio · Discover gallery

System Demo or Product Walkthrough preview 1

Interactive Learning Template

System Demo or Product Walkthrough

By Tim Slade · 239 uses

A screenshot tour that learners explore by opening hotspot callouts and moving through screens. Add a tour title and screen images. Then add each screen's name, description and callouts.

About this template

In the creator's words, from Tim Slade.

A guided screenshot tour of any software or system. Add clickable hotspot callouts to each screen and present them as a step-through or accordion. Ideal for software training, onboarding, and feature tours.

Build the tour screen by screen

Add one title for the full tour. The starting layout ships with two screens. For each screen, add a name, screenshot and description.

Each screen starts with four hotspot callouts.

Learners can move on without opening every callout

The starting layout uses step navigation. Learners open callouts on each screenshot, then move between screens. They do not need to open every callout before continuing.

The starting layout does not mark callouts as visited.

Use an SVG map for shaped hotspot regions

Pick SVG Image Map with Popups when you need regions built from SVG shapes or groups. Those hotspot regions can use any shape.

Template by Tim Slade. Notes by the Mighty team. Publishing, SCORM and LMS details that apply to every template are in the Mighty FAQ.