Can I use this for internal maintenance documentation, not just customer-facing pages?

Yes. Some manufacturers embed hotspot diagrams in an internal wiki or intranet page so technicians can click a machine part and jump straight to its maintenance procedure.

Can hotspots link to a replacement parts order form?

Yes. Each hotspot's CTA button can point to any URL, including a parts catalog page pre-filtered to that component or a distributor's order form.

Does this work with CAD renders or only photographs?

Both. You can upload a photograph of the physical equipment or an exported CAD render/exploded view — the hotspot tool works the same on either image type.

What should each hotspot actually contain?

Four fields cover most cases: the part name, its part number or SKU, the one spec a buyer or technician needs at that stage (voltage, torque rating, material), and a CTA to the datasheet, manual page, or order form. Skip pasting the full datasheet into the popup — link to it instead.

Where does an equipment diagram like this get embedded?

Most commonly a product or spec/submittal page on your marketing site, a distributor or reseller portal, an internal maintenance wiki, or a support article a technician is sent by link.

How do hotspots behave on a phone on the shop floor?

Hotspots become tap targets sized for a finger, and the popup opens as a full-width card rather than a small tooltip, so a technician reading it on a phone in a noisy plant doesn't have to zoom in — see the mobile hotspot behavior below.

Is this accessible to screen-reader users referencing the same manual online?

Yes. Hotspots are keyboard-navigable and each includes alt text, so someone using a screen reader can tab through parts in order rather than needing the visual diagram.

Since the diagram is an iframe, how do I keep the page itself indexable for search?

List the part names and numbers as plain text near the embed — a short table or bulleted parts list works well. That text is what search engines index; the interactive diagram stays the tool buyers actually click through once they land on the page.

Use case · Manufacturing

Equipment diagrams that link straight to the part.

Label every component on a machine photo or schematic and connect it to a spec sheet, install guide, or replacement part order.

Start free See the live editor

Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace

Interactive equipment diagram with labelled hotspots on individual machine components

Numbered part callouts

Match hotspot numbers to an existing parts list so customers and technicians reference the same numbering system.

Direct-to-spec links

Each hotspot's CTA can jump to a datasheet PDF, an install video, or a replacement part's order page.

Photo or CAD render

Works equally well on a photograph of the physical unit or an exported CAD exploded view.

What you get

Replaces static exploded-view PDFs on product pages
Link parts to spec sheets, manuals, or order forms
Works for CAD renders and real equipment photos alike
Useful for internal maintenance docs, not just marketing pages
Numbered hotspots can match an existing parts list
Update the diagram once — every embedded page reflects it

What to put in each part's hotspot

Field	Example	Why it's there
Part number	Assy 40-2214	Matches the parts list line item
Key spec	Rated 480V / 15A	Answers the qualifying question before a call
Photo	Close-up component shot	Confirms it's the right part before ordering
CTA	Datasheet / Order replacement	Sends the click somewhere useful

From schematic to clickable diagram

Upload the equipment photo or exported CAD render to Interactive Image.
Place a hotspot on each component, numbering them to match your existing parts list if one exists.
Attach a spec sheet link, install note, or order-page URL to each hotspot's CTA.
Embed the diagram on your product page, distributor portal, or internal documentation site.
When a part number or spec changes, edit the hotspot instead of re-exporting the whole diagram.

Interactive Image editor with numbered hotspots placed on an equipment photo — The editor: click to drop a hotspot, drag to fine-tune, then write the popup content on the right.

Where these diagrams live

Product and spec/submittal pages: engineers click the part they need and land on its datasheet.
Distributor and rep portals: the embed always shows your current revision.
Internal maintenance wikis: technicians click a part and jump to its procedure.
Support articles: "see the diagram" replaces a paragraph of location description.

Mobile tap behavior and accessibility on the shop floor

On a phone, each hotspot becomes a tap target and the popup opens as a full-width card rather than a hover tooltip that doesn't exist on touch — see hotspot alignment on mobile for how positioning adapts to smaller screens. Hotspots are also keyboard-navigable with alt text on each marker, so a technician using assistive tech can tab through the same information — details in image map accessibility.

Interactive equipment diagram on a phone with a tapped hotspot showing part number and spec — On phones, hotspots become tap targets and the popup opens as a full-width card.

Keeping the page indexable with an iframe embed

Search engines don't crawl inside an iframe, so pair the embed with a short plain-text parts list or spec summary on the page itself — the same numbering used in the diagram works well as an on-page table. That gives the page something to rank for while the interactive diagram handles the actual click-through experience. It's a natural fit next to interactive product diagrams for buyer-facing pages, and works just as well pointed at an internal audience for maintenance and training material.

Turn any image into a guided experience.

Free forever plan. Paste one iframe into your site and ship.

Create your interactive image