Personalised images enable you to merge values about a customer into an image such as their name, reward points balance or any other data you hold against them. The image can be high impact using any fonts and styles with none of usual the limitations of using HTML for email code.
The image is personalised by adding values such as the customers name into the image URL, and Reignte will then generate the image using these values when the customer opens the email.
Most marketers hold a lot of information about each customer in various fields within their email marketing platform so adding the ESP’s merge tags in the URL allows you to create unique content for each recipient.
In this example we are going to create a really basic personalised image as shown below using the customers first name to wish them happy birthday.
How to create a personalised image:
Step 1: Create a New Image
Start from the main menu you can access from the top left of Reignite and select 'NEW IMAGE':
When creating a new image select the ‘Personalised Image’ data source:
Select whether you want to use our template, upload a background image to work from or start with an empty canvas
In this example we are creating an image using this background image:
https://reignitehq.s3.eu-west-2.amazonaws.com/help/happy-birthday.png
Finish by selecting 'CREATE IMAGE'.
Step 2: Edit Image Settings
When the canvas opens you can adjust the settings panel as required. Much of this is optional and can be skipped but is explained here for thoroughness:
Settings Panel
Image Name
This is the name of the image you can change at anytime.
Labels
Labels are handy words you can assign to the image to help you search for it later. Use the enter key to save each label and add as many as you wish.
Lock
Once you have finished editing the campaign and you are ready to send an email using this image we recommend locking the campaign from further changes to prevent accidental edits as these will show immediately in any images viewed by your customers.
Canvas Panel
Choose canvas size
The width and height of the canvas is set in pixels. You can change this at anytime. Changing the width will add or crop the canvas on the right hand side, while changing the height will add or crop from the bottom of the canvas.
The width of the canvas should be the same as the desired width of the image in your HTML email template.
In this example the canvas is 600px wide - if you require it smaller you can reduce the canvas size here and then resize the background image layer accordingly by dragging the corners in.
Background Colour
Choose a hex colour using the picker or by entering a value here. The background colour of the canvas will change from white. We don't need to do this in this example as we are using a background image.
Links & Fallback Panel
Link
Enter the URL where you would like to take anyone clicking on the image. You can also use the jigsaw piece to add merge tags from the data source into the URL. For this example we just need to enter a static URL.
Fallback Link
If you have added any merge tags to the above link, and in the event these merge fields are all empty then you can specify a fixed URL to take the clicking customer to. This prevents any unwelcome 404’s of broken links. This is not needed in this example as we are using a static URL.
Fallback Image
In the event the data source returns no data you can specify a different image to show. For personalised images this is not relevant.
Step 3: Preview Values
In the Preview panel we can add example values to allow us to see what the image will look like with values from the data source while editing.
In this example we have added ‘Jonathan’ into the ‘String 1’ field, but this could be any name.
Step 4: Creating our image in the canvas
Next, we can start creating our image. We created the image from a background image and from here we just need to add the dynamic field in.
To add this we click on the red + button and add a text layer.
Next right click on the new text layer and select ‘Insert Merge Field’.
This opens up the merge tag selection dialog giving us 2 options:
a. Pre-defined field
These are the data fields available in your data source
b. Custom field
These are fields from your data source you have customised. For example you may wish to insert the customers name, but do so in capitals. Once you have added this with the customised settings you can save it so it is available here.
For more information on merge fields read our separate guide.
For now we will simply choose ‘Pre-defined’ field, select ‘String 1’ from the dropdown and then ‘Insert field’.
You will see the text in the layer has now been replaced with a tag of ‘{{s1}}’.
As the background is dark we can't really see it so we made the following changes using the formatting menu at the bottom of the page:
a. Changed font to 'Pacifico' (If this is not in the dropdown you can add it as a Google Font in your account settings page)
b. Changed font size to 48
c. Set text alignment to center
d. Made the box much wider to cater for long names
e. Changed colour of text to #f999e3 and text transparency to 0.91
To see what this looks like with real data we can switch from edit to preview at the top of the canvas.
Now we can see the text is showing the value you have put in the preview panel.
TOP TIP: If you want to add a merge field in the middle of a sentence click into the text layer to activate the cursor where you want the merge tag to go. Then right click and select ‘Insert Merge Field’. The tag will then be inserted where your cursor is rather than replacing all text in the layer with the merge tag.
While in Preview mode we can move the layer to our desired position, and make changes such as text colour, size, font or shadows.
Make any edits you desire and then check what this looks like with different merged data values by editing the preview values.
5. Add the tags to your email template
Once you are happy with your image click on ‘Generate Tags’ top right to open up the dialog.
On the first open of this dialog you will see it has pulled into the ‘Configuration’ section your preview values.
In this example we want to change the String 1 value to the merge tag for first name in our ESP so each image is generated with the customers own name.
As we are going to use Mailchimp for this send this will be *|FNAME|* but you would use the syntax for the first name field in your email platform.
Under the ‘Your Tag’ you will now see the HTML to copy and paste to your email template – use the copy button provided to ensure the whole tag is copied correctly.
If you want to manually send an example image to anyone with their own name for testing and signoff simply replace the ESP merge tag with their name as shown here:
https://img.reignitehq.com/render/Pjs0gZgw?eid=*|EMAIL|*&s1=*|FNAME|*
Becomes
https://img.reignitehq.com/render/Pjs0gZgw?eid=*|EMAIL|*&s1=Jennifer
And that’s it. That is a really simple example of how to use the Image Personalisation data source. Much more customisation and advanced options are available for even more powerful customisation.