Make interactive graphics people can explore.

Use one when the visual carries more detail than a single caption can explain, and when your audience cares about different parts of it. Product teams use them for feature tours, manufacturers for labelled diagrams, analysts for annotated charts, and marketers to make a dense landing-page graphic scannable.

The difference from a normal image is that each part answers a specific question right where the visitor is looking — instead of a legend they have to cross-reference, or six stacked crops with arrows drawn on them.

Interactive product diagram example

Hover or keyboard-focus the markers. That is what the editor produces, with your graphic and your copy.

1. Finish the graphic first. This is not a design tool — export from Figma, Illustrator, Canva, PowerPoint, or your charting library at 1600–2000px on the long edge.
2. Place the markers. Click each area you want to explain, then drag to fine-tune.
3. Write short cards. A title and two lines beats a paragraph. Detail belongs behind the CTA.
4. Paste the iframe. One snippet, and later edits propagate to every page hosting it.

A lot of people searching for a "custom interactive map" don't want Google Maps with pins — they want their own artwork to be clickable. Because the base is just an image, that is the same job as any other graphic:

• Illustrated territory and coverage maps for sales and service areas
• Network topology and architecture diagrams with per-node detail
• Store, mall, and exhibition layouts with tenant or booth information
• Campus and site plans — see the interactive map maker page for map-specific guidance
• Fantasy, game, and event maps where the artwork is the point

Charting libraries give you tooltips on data points but nothing for the narrative: why the line dips in Q3, what the methodology was, where the data came from. Exporting the chart and hotspotting the moments that need explaining is often faster than rebuilding it as a live component, and it survives being embedded on a page you don't control.

Put the source link in the CTA of the hotspot that makes the strongest claim. Attribution buys credibility, and it is the first thing a sceptical reader looks for.

• Leave breathing room. Every area you plan to hotspot needs clear space for a marker. Dense artwork with no gaps fights the dots.
• Drop the baked-in labels. If a hotspot card will say it, don't also print it on the image — you are paying for it twice and the graphic gets busier.
• Watch marker contrast. A dark dot disappears on dark artwork. Marker colour and size are settings, so pick them against your actual image.
• Cap the count. Roughly 40–50 markers is the readability ceiling on one image. Beyond that, split it or group markers into colour-coded categories.
• Prefer landscape-ish shapes. Very tall graphics produce very tall iframes that sit awkwardly in most page layouts.

You can, and if you only need a few links, percentage-positioned anchors over an image are about fifteen lines — the markup walkthrough covers it. The case for an embed is everything after launch: cards with media, editing copy without a deploy, and one source of truth across every page and platform. And if you have ever had hotspots slide off a graphic on a phone, the alignment explainer is why.