How to create an interactive images for your website

This guide will show you how to create an interactive image, like the one below, to use on your website. At the end of this guide you'll get some HTML to put on your website (all website platforms and builders are supported).

The first things you’ll need to do is create a Drawpoint account. You can sign up for a 14-day free trial (plans start from $0/month).

An interactive image example

Drawpoint can work for a variety of different situations - see more Drawpoint examples.

Step 1: Create a new image

After you have created a Drawpoint account go to the dashboard of Drawpoint and click “new interactive image”. Choose the name for the image and press OK. You will then be redirected to the image editor.

Step 2: Upload your custom image

In the editor you can upload a custom image (JPG, PNG, or SVG is accepted).

This image will automatically be resized to fit on your website. If the zoom doesn’t look right for you, don’t worry. You can edit the zoom settings for your image in the sidebar (this is explained in Step 4 below).

Step 3: Add any markers, shapes or lines

Now you can begin to add your interactive features. Drawpoint lets you add multiple different features to your image using the bar above the image:

• Markers are points on the image that show an icon and can be placed anywhere
• Shapes are polygons that you can draw to highlight a specific area of the image
• Lines can be drawn to indicate a route

Each of these features can be clicked to show a custom popup (explained in Step 4).

Use the control bar above the image to select the editing mode.

Adding markers

Let’s add some markers to our image — one for each product.

In the control bar click the Markers button and then New marker. Now click where you want your marker to be on the image.

Once you click, a slideover will appear with the options of adding more detail, customizing the icon or making it interactive.

Further down you can check the Popup option to show a popup when users click the marker. Then you'll be able to enter a description, add a call-to-action (CTA) button, or add an image. A CTA is a clickable link that you can add in your image which links to a page of your choice when the user clicks it.

Adding shapes

You might want to add a custom shape to your image. This is an interactive shape that can show a popup (similar to a marker) when clicked.

In the control bar click the Shapes button and then New shape. Now start drawing your shape on the image by clicking where each vertex will be. When you've finished, click the first vertex to complete the shape.

You'll then be presented with the same slideover to add more information to your shape and make it interactive.

Adding lines is an identical process to adding shapes.

Step 4: Customise your interactive image

The left sidebar has all the options you can change for the image. Under the General tab you can edit things like allowing zoom/pan and setting the starting zoom.

You might want to change the style of the features on your interactive image. This can be done by clicking the "Style" tab in the sidebar. Here you can find, for example, the "Marker color" option. Click the color and change it to the color of your preference. You can do this for shapes, lines, background color and more.

Once you have finished styling your image you can save and preview your work. Click the Save button the top right and then click the Share button next to it. In the share slideover click the Go to viewer link to view the map as it will display to your customers.

Step 5: Embed in your website

When you're happy with your image, copy the embed code in the Share slideover -- this is what you will add to your website to show the image.

You can then paste this code onto your website (it's just an iframe) wherever you want it.

If you're using a website building platform, you'll want to look to add an Embed or Code module to the page and paste the code into that.

If you're using one of the platforms listed below you can use the guides to help you.

Webflow

For Webflow you need to find the Embed element and add that to the page.

Then paste the embed code from Drawpoint into the block and save.

WordPress

To add this map to WordPress you'll need to find the Custom HTML widget and add that to the page. Again, just paste the embed code into that block and you'll have your map on your website.

Sign up for your 14-day free trial of Drawpoint here, plans start from $0/month.