In this day and age, hyper personalization became quite essential for businesses that sells any kind of product or services online.

Abyssale includes an awesome feature allowing you to dynamically generate an image by updating its URL 😎. This feature is simply called "Dynamic image"

The range of use-cases for dynamic images can be extremely wide. Ranging from custom gift-cards to celebrate your user's birthdays, to cold emails that includes personalized image for each recipients.

This article focuses on SendinBlue dynamic images but it also applies to Mailchimp dynamic images. The process is more or less the same.

Okay... 🤨,  So how does this look like?

In the exemple below you can see 2 different images generated using this feature.

2 examples of dynamic images
If you've created an account on Abyssale, you should have seen this feature in action directly in our Welcome email.

Quick summary

In this tutorial we will discover how to setup and use Abyssale's dynamic image feature on a simple use case:
A personalized "welcome email" using Abyssale + Sendinblue.

If you're looking for help to setup dynamic images on your workflow please contact us via our chatbot or Twitter.  In the meantime you can find more information on our developer portal.

Create and manage dynamic images on Abyssale

1. Select or create a template

First things first, you need to select or create a template.

To do so, you can select one from our public library,  create a new one from scratch, or select one you've created beforehand.

You can learn how to create your first Abyssale template on this video tutorial:

Dynamic images can be generated using any kind of template previously created on Abyssale.

2. Discover the Dynamic image tab

Once you've selected the template you'd like to use, you should be able to navigate to the "dynamic image" tab (under the template preview).  

Abyssale dynamic images page
Abyssale dynamic images tab

In this section, you can create & manage all dynamic images linked to the template.

  • There are no limitations over the amount of dynamic images that can be created from a template.
  • Each template hosts its own dynamic images. Navigate to each templates to manage your associated dynamic images.

3. Create your first dynamic image URL

Let's create your first dynamic image. To do so click on the blue button "create new dynamic image".

A new row is added to the "Dynamic image list" and it should look like this 👇

new dynamic image
New dynamic image created

Here you go, you've created your first dynamic image URL 😎  

If you click on the copy button and paste it in your browser you should see the dynamic image that has been generated from your template.

Several options are available for dynamic images:

  • Pause button:
    You can pause a specific dynamic image URL at any time. Note that all previous generated images from that URL should still work. However, any new generation request won't be performed until you unpause it.
  • Limitation rate:
    Limit the number of dynamically generated image an IP address can generate each day (this is to protect your Abyssale API consumption from mischievous users).
  • Expiration date:
    New images won't be generated after this date. It is particularly useful when you know your dynamic image will be temporarily used, and you don't want to consume API credits for it after a specific date.

⚠️ Important ⚠️

Every single dynamically generated images will remain available/displayed even when you pause an URL or the expiration date has been reached.

How API credits are counted:

  • Each unique image generation from an URL count as 1 API credit.
  • Each subsequent calls to the same URL won't cost you anything.
To make it short, this means that the same image (or URL) called thousands of times won't consume you any additional API credits!

How to use dynamic images URL

For this tutorial we've created the template below:

welcome dynamic image public template
Welcome dynamic image public template

Here is the dynamic image URL we've created from that template:

https://images.abyssale.com/dynamic-image/5e7c5fba-04c0-4be5-95e2-56aca9e5b7f3

To update the image content's you'll need to use "query strings" which basically is any URL parameters displayed after the question mark ?. ie:

https://images.abyssale.com/dynamic-image/5e7c5fba-04c0-4be5-95e2-56aca9e5b7f3?name.payload=Jules%20Verne

As you can see, the name has been updated to "Jules Verne" because we've updated the URL parameters and added the "name.payload" query.  

dynamic image test

If you want to edit 2 layers, simply add & at the end of URL and repeat the process. If you want to edit an image layer, the command is
layer-name.image_url="image URL"

⚠️ Important ⚠️

You need to url encode each property in order to make it work. Most emailing tools like Sendinblue have a function that does this.

You can also use this tool to test your URL encoding.

Please refer to the developer's guide for a complete explanation about the dynamic image feature.

Integrate dynamic image URL in a Sendinblue email template

You need to create your automation workflow for your Welcome email. A lot of tutorials can be found for your favorite emailing tool.

We've gathered a list for you:

Once done you need to know which kind of information you are retrieving in your contact list. In our Sendinblue mailing list we retrieve information such as "firstname" and "lastname". We will use these information to customize our welcome banner.

  1. Sign-in to your Abyssale account, and head to the Public Templates Library section.
  2. Click on the use template button to copy it.
  3. You can edit the template with your own colors, or change things that you dont like. But please keep the layer name for the sake of this tutorial.
  4. Create a new dynamic image URL, as we've previously seen in this guide.
  5. Open your Sendinblue template.

You can integrate the dynamic image as follow if you are doing html:

<img src="https://images.abyssale.com/dynamic-image/5e7c5fba-04c0-4be5-95e2-56aca9e5b7f3?name.payload={{ contact.FIRSTNAME|default:'John'|urlencode }}%20{{ contact.LASTNAME|default:'Doe'|urlencode }}" />

Or use Sendinblue's editor, define an image, and click on image source from URL. Don't forget to change the following with your own URL, and keep the part after the question mark ?:

https://images.abyssale.com/dynamic-image/5e7c5fba-04c0-4be5-95e2-56aca9e5b7f3?name.payload={{ contact.FIRSTNAME|default:"John"|urlencode }}%20{{ contact.LASTNAME|default:"Doe"|urlencode }}

⚠️ Important ⚠️

Don't forget to change the URL with the one you've previously created!

6. Save and test your template. If you are happy about the result you can activate the Sendinblue automation Workflow.

7.  🎉 Kudos! 🎉  Now every user added to the contact list will receive a fully customized mail.

Here is what our welcome email looks like once integrated:

welcome template dynamic image

Congratulations 🎉

In this tutorial we've showcased all the necessary steps to create and setup a welcome email using Abyssale's dynamic images!

Keep in mind that dynamic images can be used in a wide range of use cases. We can't wait to see what you'll build 😉

If you have any issue or if you'd like to share with us how you are using dynamic images please reach out to us on Facebook, Twitter or on our chatbot over Abyssale.com