Make an interactive image, no code required.

In the account editor, select a dot and open Content. Choose Info, Product, Media, Step, Link, or Location, then fill in the fields shown for that type. Upload card images or supply a video URL where relevant. Appearance changes the selected dot; Map settings controls shared defaults, card themes, and publishing. Preview the selected dot before embedding. To build a geographic map instead of an uploaded image, choose Mapbox map in New Map.

Making an interactive image takes about five minutes the first time. There is no canvas to learn and nothing to install — the editor runs in the browser and the output is a single iframe.

1. Prepare the image. Export at the size you actually want people to inspect. 1600–2400px wide is right for product diagrams and floor plans; 1200px is plenty for a lifestyle photo. Keep the original aspect ratio — the embed matches it automatically so there are no letterbox bars.
2. Upload it. The file is stored once and served to every visitor from the embed, so you never have to host it yourself or worry about a builder re-compressing it.
3. Click to place hotspots. Each click drops a marker; drag it afterwards to nudge it into place. The editor shows the live percentage coordinates so you can copy the same point onto a second image if you need to.
4. Write the cards. Title first — it is what shows on hover — then two or three sentences of description. Add an image if the detail benefits from a close-up, a video for an install step, and a CTA link for anything that should send the visitor onward.
5. Style the markers. Dots for unobtrusive callouts, numbers when order matters, pins for map-style images. Set colour and size once at the image level, and override individual hotspots where contrast demands it.
6. Publish and embed. Copy the iframe, paste it into an embed or code block, and you are done. Every future edit is live instantly on every page using that snippet.

This is the entire snippet the editor gives you. The aspect ratio is baked in from your image, so the embed never scrolls and never leaves empty space:

<iframe
  src="https://interactiveimage.com/embed/your-map-id"
  style="width:100%;border:0;aspect-ratio:1.6;overflow:hidden;display:block;"
  scrolling="no"
  loading="lazy"
></iframe>

aspect-ratio is your image's width ÷ height — 1.6 for a 1600×1000 image — which is why the embed sizes itself correctly instead of needing a fixed pixel height per breakpoint. There is also a shareable standalone page at interactiveimage.com/i/your-slug if you want to send the image as a link rather than embed it.

• Product diagrams — part callouts with spec text and SKU links. See interactive product diagrams.
• Floor plans — room-by-room detail, availability, and lead capture on a plan image: interactive floor plans.
• Shoppable photos — price and buy links on lifestyle shots: shoppable image maker.
• Venue and campus maps — booths, rooms, and amenities on an illustrated map: interactive map maker.
• Replacing legacy image maps — the same clickable regions without coordinates: image map generator.

The most common mistake is treating a hotspot like a tooltip. A tooltip repeats the label; a good hotspot answers the question the visitor had when they clicked.

• Lead with the noun a person would use, not an internal code. "Condensate drain", not "Assy 4-B".
• Keep descriptions to two or three sentences. If it needs more, link out with the CTA rather than filling the card.
• Use categories when you pass roughly eight hotspots — visitors get filter chips instead of a wall of dots.
• Number the markers when the image explains a sequence, and let people walk it with the prev/next arrows.

The embed is a plain iframe, so it works in any builder that allows one. There are platform-specific guides for Wix, Webflow, WordPress, Shopify, Squarespace, Ghost, and Framer covering where the embed element lives and how each one handles iframe height.