E-commerce product showcases
Highlight unique selling points, fabric details or accessory compatibility, and link each hotspot straight to the product page or cart.
Tutorial
How to create interactive images for a website
Everything from your first upload to the embed code on your CMS. It takes about five minutes and no coding.
Live example: click the markers
Create and embed an interactive image
- 1
Create an account
Head to interactive-img.com and register with your email or Google. The free plan is enough to build and publish your first image.
- 2
Upload your image
After registration you land in the editor. Drop in a JPG, PNG or WebP. Product photos, floor plans, maps, diagrams and screenshots all work.
- 3
Add the hotspots
Click anywhere on the image to place a hotspot. Give it a title, a description, a link or a picture in the panel next to the image. Drag a marker to move it.
- 4
Customise the look
In the settings choose the marker style, colours, animation and the popup design, so the image matches your site.
- 5
Preview and publish
Use the preview to check the popups on desktop and mobile, then publish the image.
- 6
Copy the embed code
Open the Embed tab and copy the snippet. Paste it into a custom HTML or embed block in your CMS, for example WordPress, Wix, Squarespace, Webflow or Shopify. An iframe variant is available for platforms that block scripts, such as SharePoint.
Settings: customise hotspots and popups
You are not limited to a default marker. The editor lets you tailor the appearance and behaviour of the hotspots, including size, colour, icon and animation, as well as the look of the popups: fonts, colours and how they open.
Settings apply to the whole image, so a change to the marker style updates every hotspot at once.
What interactive images are used for
Educational content
Interactive infographics and diagrams where learners click to read more about a topic, a theory or a component.
Real estate and property tours
Floor plans and photos with hotspots for amenities, room dimensions and special features.
User manuals and guides
Replace text-heavy manuals with annotated images. Users click a part to get step-by-step instructions or a video.
News and stories
Give articles extra context, background and data directly on the picture.
Travel and tourism
Let people explore destinations, hotels and attractions. Hotspots reveal details or open a booking link.
Blogs and recipes
Tutorial blogs, DIY projects and recipes where readers click for more details and tips.
Corporate training
Make complex processes easier to understand and more engaging for employees.
Museums and exhibitions
Add historical context, audio guides and detailed descriptions to artworks and exhibits.
Health and fitness
Workout plans and anatomy diagrams where every marker explains an exercise or a body part.
Make your first interactive image
Free to start, no credit card. Upload, click, embed.