Custom API data feeds allow you to take any content source and turn it into images for your email campaign enabling you to add personalisation not previously possible and saving email build time by automating content generation.
Typical use cases might include:
- Product feeds to automate the building of products for dropping into email templates, and have pricing details automatically updated
- Recommendation engine results to display personalised products, holidays
- Latest pricing from feeds of currencies rates, betting odds or special offers
- Available appointment times at the recipients local store
- Customer loyalty scheme reward points balances and scores
- Latest news stories or blog posts from Wordpress or your CMS
This part of the guide specifically looks at creating images from custom data sources. To find out how to add custom data sources read this guide.
The image we are going to create is from a feed of products as shown below. The product feed requires us to specify a product ID to return all the details for this. We will then use this image to save time in building our emails by dropping the Reignite tags into the email, and then changing the product ID we wish to fetch.
This ensures live pricing always pulls through and removes the need for a designer or coder to build these on an ongoing basis.
<IMAGE>
How to create an image from custom data source
When creating a new image select the ‘Custom’ 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 from scratch so we will select empty canvas.
Settings Panel
The first thing to do when creating a new image is to adjust the settings in this 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
Here we set the width and height of our image. I know in my email template I want to display 3 products per row, and this gives me a width of 180px per image. For height I will set this as 300px and I can always adjust this if I need more or less space.
Background Colour
Use the color picker or specify a HEX value to set the background color of the canvas. For this image we want a white background so I make sure I set this to #FFFFFF.
Links & Fallback Panel
Link
Enter the URL where you would like to take anyone clicking on the image. Use the jigsaw piece to add merge tags from the data source into the URL. As we want to link to the product page we will select the ‘link’ data field which contains the URL to take them to.
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 in the event your search returns no results.
Fallback Image
In the event the data source returns no data you can specify a different image to show.
Preview Values
In the Preview panel we can add example values to allow us to see what the live product will look like.
This particular data source only requires the product ID and currency to be specified. We will add in an example one for now.
Creating our image in the canvas
Next, we can start creating our image.
First, we will add the product image. To do this we click the red button followed by the image icon. This brings up a dialog where we select ‘Dynamic Image’ as this is a image that will vary depending on the contents of the data source.
This asks us for the URL of the image. In this case the whole of the image URL is contained in the ‘Image’ field. We get to that by clicking the jigsaw piece, then pre-defined field, choose the ‘Image’ field from the dropdown and click ‘Insert field’.
In many cases only a part of the URL such as the filename is contained in the field. Here you would manually enter the rest of the URL around the merge syntax.
Next it will then ask for a preview image. This is to allow you to use an example image while editing the image. We could upload a product image from our desktop here but as I want all my product images to fill an exact size box I'll add the placeholder image. Finally we need to specify a fallback image if the data source does not return a valid image. Our data feed should always return one so we will select ‘No Fallback’.
The image has been added to the canvas and we can position and resize it as required.
We can also go into preview mode to see it renders correctly when using live data:
Next, we want to add the product name, and the product price, currency symbol and port name fields.
To do this we add more text boxes and in each right click and select the pre-defined field for each.
We position and format these as required.
Finally we want to add a call-to-action button to shop now. We add a shape by using the red button, clicking the star shape, then choosing the square. We make this into a rectangle by dragging the edge. Then change the background colour on the menu.
We add another text box and replace the text with ‘SHOP NOW’, formatting it and placing it over the button.
The image should now be complete and we can preview by moving the switch at the top of the page from edit to preview to see a real product.
No doubt when you see merged data you will want to make some small tweaks, but then the image is ready.
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 the ‘productId’ field we keep the existing preview value for now but we can amend that with any products we want to drop into our email. If you want to personalise the products shown to each person you could add the email marketing platforms merge tags here that contain the field of the product ID.
The identifier field is a piece of syntax you get from your email provider that identifies the individual opening the email. This could be the email address, or a customer ID.
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.
Where the productID values are in the link and image URL’s you can change these to pull in different products.
That is a very simple example use of custom data feeds but many more uses are possible based upon any data you hold. If you are not sure what is possible with your feeds speak to our support team who will be happy to help advise.