If you're writing or planning to write an emailing campaign on Mailchimp, you can't skimp on personalization. It's essential if you want your audience to read you and feel considered.

Technically, writing in a personalized way is quite simple. Text variables exist to adapt to your audience's personal data (surname, first name, profession, company name, etc.).

Perhaps you've also considered including an image in your campaign. If so, did you know that you could also personalize it? And that's just what we're going to let you do in this simple tutorial.

Create a template on Abyssale

To do this, go to your Abyssale dashboard and create a new template.

You can imagine the image you want with the message you want. The important thing is to identify and isolate the text and image elements that will change to suit each of your contacts.

Here's an example:

Example of a Dynamic Image template

In this example, we've isolated the first name (Michael). It corresponds to a single text element. In the Abyssale builder, we've taken care to rename it "firstname" using the "settings" tab.

Once your template is ready, click on "Save & Exit".

Select your template generation mode

Select "Dynamic Image " for generation mode. A new pane opens, in which you must name the dynamic image and choose the generation mode (OpenGraph or Base URL).

Name the dynamic image as you wish, then select Base URL. If your template had several formats, select the format you want for this dynamic image.

Then click on "create dynamic image".

A new pane appears. In the left-hand column, click on the little arrow next to "Content customization " to bring up the different layers of your template.

Activate the payloads of the elements to be customized.

In our example, we'll activate only the "firstname" layer and enter the name Michael.

How to choose the different layers for your dynamic image

Then click on the blue "Generate Image" button. A link will appear in the dark bar at the top of the screen.

A Dynamic image link

Your Dynamic Image is ready. It's time to add it to your e-mail.

Go to Mailchimp

Build your e-mail using an existing Mailchimp template or not. For your dynamic image, insert a "Code " block.

Use the "code" block on mailchimp

Then in this block, insert in the line of code :

<img src="[YOUR DYNAMIC IMAGE LINK]" alt="[THE ALTERNATIVE NAME OF YOUR IMAGE]">

For our example, we'll insert the following code:

<img src="https://img.abyssale.com/a7751207-eb53-4592-b6cc-516d10cfa91f?firstname=Michael" alt="We've got a good news : 30% Back-to-school">

This might work if our entire contact list was called Michael. But that's not our case, and it's probably not yours either.

So you'll need to replace the values of each of the elements with the corresponding Mailchimp variable.

In our example, we only have one element to consider: firstname=Michael. We need to replace Michael with the Mailchimp variable corresponding to the contact's first name, i.e. *|FNAME|*. So here's what our code looks like when finished :

Inserting the code on mailchimp

As you can see, we now have firstname=*|FNAME|*. This means that every contact will have their first name displayed in the dynamic image.

We sent this e-mail to Robin and this is what he received:

Dynamic Image on the e-mail box

You could go one step further in personalization by providing a different background image. Let's say you decide to personalize your image according to the age of your audience.

You'll then segment your audience. For our example, we'll segment them as follows:.

  • 18 to 25 years old
  • 26 to 35 years old
  • over 36

By dint of AB tests, you'll notice that certain content works better than others on a particular category of your contacts. In our example, we can imagine that "vintage" background images work better with the 36+ age group, whereas 18-25 year-olds are more receptive to colorful images.

Segment for greater personalization

Return to your Abyssale pane, where you can select the layers that can be activated. Activate the layers you wish to modify to suit different audience segments.

For our example, we activate the "image" layer. Instantly, the URL in the gray bar at the top of the screen changes:

Dynamic image link with image layer activated

A new part appears: In our example, we'll change the [URL of the source image] to the one we want, depending on the audience we're sending it to.

Here's the URL of our Dynamic Image for 18 to 25 year-olds :

https://img.abyssale.com/a7751207-eb53-4592-b6cc-516d10cfa91f?image=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1558292338-7e6ff28e7d8c%3Fixlib%3Drb-4.0.3%26ixid%3DM3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%253D%253D%26auto%3Dformat%26fit%3Dcrop%26w%3D1974%26q%3D80&firstname=Michael

Feel free to click on it to see what it looks like.

From now on, when you add the URL to your "Code" block on Mailchimp, please remember to modify the "fixed" elements for your audience (In our example image=[URL of source image]).

Then, for the Dynamic Image part, add the Mailchimp variables as explained in the first part of this tutorial (In our example, firstname=*|FNAME|*).

Now you're ready to improve your Mailchimp e-mail campaigns with personalized images and Dynamic Image. Before sending the final message, always remember to test your campaigns by sending the email to your own mailbox.

Warning! Sending a test e-mail will not work as the variable *|FNAME|* is replaced by "Test First Name" and some special characters.

For more tips like these for generating personalized visual creations automatically, follow us on Linked-in.