WordPress
How to create an image map in WordPress (and make it actually interactive)
Image map plugins let you add clickable hotspots to any image. Questiory does that too, but it also lets your audience be the ones adding the pins. Here's how both approaches work and when to use each.
An image map is a simple concept: you take an image, and you make parts of it interactive. Click on a country and a tooltip appears. Click on a product part and you see its details. Click on a room in a floor plan and it expands with information.
The classic way to do this in WordPress is through an image map plugin. You upload your image, draw hotspots, define what each one shows, and publish. Done. Static, authored, finished.
That’s a perfectly valid approach. But there’s another way to think about image maps, one where your audience is the one doing the pinning, not just you.
Questiory gives you both, through two features that work together: Pin on Image (the interaction where people place their pins) and Tour (the visualization that shows all the contributions).
The interesting part is who adds the pins. That’s where the options open up.
How Pin on Image and Tour work together
In Questiory, a Pin on Image activity has two sides:
- Pin on Image is the interaction slide, where participants tap or click to place a pin on your image, optionally adding a label or note.
- Tour is the visualization slide, where all the pins are shown together on the image, as a live map of contributions.
They’re designed to be used as a pair. But what changes the experience entirely is who loads the content into them.
Pin on Image
Participants tap anywhere on the image to place a pin. They can add a label or note to each one.
Tour
Shows all the pins on the image: yours, your audience's, or both. Updates live as new contributions come in.
Three ways to use it
1. You load the pins, audience explores
You create the experience, add your own pins to the image manually, and hide the Pin on Image interaction slide. Visitors only see the Tour visualization: a finished image map with your hotspots, each one showing the content you wrote.
This is the equivalent to how your WordPress image map plugin would work. You define everything, visitors explore it. A world map with your office locations. A product diagram with labeled components. A timeline with annotated events. A floor plan with room descriptions.
The difference from a plugin is that it embeds in WordPress as a single iframe, works on any page or editor, requires no installation, and adds no weight to your site. The interactive content loads from Questiory’s servers, so your WordPress performance stays untouched.
2. Your audience loads the pins
You publish the experience with both slides visible. Visitors land on the Pin on Image interaction and place their own pins, marking their location, their answer, or whatever the question asks. The Tour visualization shows the collective result, updating live as more people participate.
This is something no plugin does. The map builds itself from audience contributions. By the time a hundred people have responded, the Tour shows a picture you couldn’t have created yourself.
Some examples of questions that work well this way:
3. A mix of both
You add a set of base pins yourself (key locations, reference points, your own data) and then open the Pin on Image slide so visitors can add theirs on top. The Tour shows everything together: your context and your audience’s contributions layered on the same image.
This works well when you want to provide a starting frame but leave room for the audience to add to it. A map of known customer locations that visitors can extend. A diagram with a few annotated pain points, open to additions. A before/after image with some notes already placed, inviting more.
How to add it to your WordPress site
Everything is set up in Questiory, then embedded with a single code snippet.
1. Create a free account at questiory.com.
2. Create a new experience. Add a Pin on Image interaction and a Tour visualization.
3. Upload your image to both. A clean, high-contrast image works best: clear regions, readable labels, enough resolution that pinning feels precise.
4. Configure the experience: write your question for the Pin on Image slide, add any preset pins you want on the Tour, and hide the Pin on Image slide if you’re going for the fully authored approach.
5. Copy the embed code from the share or embed option.
6. Paste it into your WordPress page. In the block editor, use a Custom HTML block. In Elementor or Divi, use an HTML or Code module. No API keys, no plugin dependencies, works with any WordPress setup.
The real difference from a plugin
An image map plugin is a publishing tool. You create the map once, you define what it shows, and it stays that way.
Questiory can do that too. But the more interesting version is when the map isn’t finished when you publish it. When the people visiting your page are the ones filling it in. When the Tour looks different on day one than it does on day thirty, because three hundred people have pinned their answers.
That’s the version that’s hard to replicate with a plugin. And it only takes a question and an image to get started.
What image on your site would be more interesting if your audience could mark it?