Building an Interactive App Guide

Support teams often struggle when they use apps they never installed. A PDF manual is a bad solution because nobody reads them.

I built a tool that lets users interact with real app screenshots inside a browser. It feels like using the actual phone. You click a button on a screenshot, and the next screen appears.

How It Works

I used Firebase Storage for images and vanilla JavaScript for the logic. I avoided external libraries to keep it light.

The secret is using percentage-based hotspots. Instead of fixed pixels, I define clickable areas using coordinates from 0 to 100. This keeps buttons aligned even when the window size changes.

The system uses a simple state machine. Each screen has:

  • An image ID
  • A list of hotspots
  • A target destination

The Tools I Built

Measuring coordinates by eye is slow. I built a standalone HTML editor to speed up the process.

  • Upload a screenshot to a canvas.
  • Drag your mouse to draw a rectangle.
  • The editor calculates the percentage coordinates automatically.
  • Link the area to another screen via a dropdown.
  • Export the final object directly into your code.

To help users, I added a pulsing blue glow to clickable areas. This shows exactly where they can tap.

Key Technical Lessons

  1. Firebase Security: Do not build storage URLs manually. Use the getDownloadURL method from the SDK. This includes the necessary auth token. Without it, images will fail to load without showing an error.

  2. Layout Fixes: In a flex column layout, set an explicit height on the parent. Set min-height to 0 on the children. This prevents layout collapse and overflow issues.

  3. Scaling: Use the CSS transform scale property. This allows the image and hotspots to resize together. It keeps everything in proportion regardless of screen size.

  4. Speed: Fetching URLs one by one creates lag. I implemented an in-memory cache and a background preload function. All images load in parallel when the modal opens. This makes navigation feel instant.

The Result

  • 20 screens with full navigation.
  • 52 interactive hotspots.
  • Zero scrollbars thanks to auto-scaling.
  • Instant transitions through preloading.

Source: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e