Image Mapping in Klaviyo

Klaviyo doesn't have a built-in image mapping tool, but it's possible to build your own image map and use it in Klaviyo. You can custom code your own image map from scratch, or use a third-party web tool that allows you to build an image map and then copy the code into your template.

There are a few different ways that you can use image mapping in Klaviyo, including uploading your hosted image map as a URL or copy and pasting the image map code into your template. This guide will walk you through how to use a free online image mapping tool (image-map.net) to easily map an image and use it in your Klaviyo template.

1. Upload the Image to Your Klaviyo Image Library

First, you will want to upload the image you would like to map to your image library by clicking the Upload Images buttonin the upper right of your Image Library tab. Since Klaviyo automatically hosts all the images you add to your library, you can grab the URL.

2. Paste the Image URL into Image-Mapper

Even if you decide not to use a Klaviyo-hosted image, it is important that you choose the Load Image from Website option to pull in your image. This is because the code that you generate will refer to an image that is hosted online. If you upload a local file from your computer, no image will be displayed when you paste the code into Klaviyo.

3. Map Your Image

Now, you will be able to create different areas on the image to link to different destinations. In our example, one rectangular region will link to https://www.klaviyo.com, while the other will link to https://help.klaviyo.com/hc/en-us. Make sure to include "https://" or "http://". If you set the target to "_blank," your link will open in a new window.

4. Paste the Code into a Text Block

Once you generate the image map code, copy it to your clipboard. Next, navigate to your email template and drag in a text block. Click the Source area and paste in the code. Click Source again and then click Save.