One of the benefits of Zembula's Live Images is the flexibility to create one single image that has multiple variants. You can set rules based on your data connections that will dictate which variant is displayed.
In this tutorial, we will be creating a notification banner with 3 variants, that will look like the following:
If there is data for a current promotion, then the blue banner announcing that sale will display. If there is data for a purchase that has shipped, then the green banner will display, and, if there is data about a new product release, that banner will display.
If there is data for all 3 available, the Zembula platform will prioritize which banner will be shown based on the order in which they are arranged.
Step 1 - Create Your LiveImage
Log into the Zembula platform and navigate to Image at the left of the dashboard.
Once you’re in the LiveImage dashboard, you will see all of the LiveImage experiences you’ve created.
Click on the icon above that says Universal Image. Name it and select the width and height of the image (this can be changed later). For this example, our banner will be 600px by 60px. Click Create Experience.
Step 2 - Set up your API fields
Before we dive into the creation of the image itself, we want to make sure we have all of our API data set up. The Zembula team will have already set up your data source integrations, so you will just need to add the APIs that you want to use in your image to the editor.
Click on the API link at the left of the editor.
You will see a list of all of the data sources you have connected, and their available fields. To add them to your list of selected fields, hover over the section and click the (+) sign.
They will then be available to use in your LiveImage. If you are passing through data from your ESP, such as a first or last name, you will want to make sure to set that up using your ESP’s formatting for merge tags.
Under Selected API’s, hover over the Email Merge Tags section, and click on the pencil icon that appears.
Click Add, and name the merge tag. Input the merge tag in the formatting appropriate for your ESP. Finally, add in a preview value, so that you have some text to visualize while you are designing. (This preview value will only appear as you design and will dynamically update with the recipient’s information once the email is sent.) Then click Add. Click the X in the upper right corner of the section to exit editing mode.
The available fields are formatted in what we call Chips. They are essentially a placeholder for the data from your connected APIs. Another way to think of them is the equivalent of a merge tag in your ESP. You will drag and drop these chips into your LiveImage where you want the dynamic data to populate in the steps ahead.
Step 3 - Design your LiveImage
Now that we’ve got your API data set up, it’s time to design your image. The Zembula platform allows you to easily customize your LiveImage to your heart’s content.
Navigate to the Backgrounds section of the LiveImage editor.
To use a gradient for your background, simply drag and drop the gradient of your choice into the editor. To see all available options of gradients, click View All. If you’ve set brand colors within the Company Settings, they will appear in the gradient palette.
You can adjust the colors of your gradient by clicking on the swatches at the top of the editor and using the color picker or entering in specific color values.
To pick a solid color, click on Solid Color at the left of the editor and use the color picker to select your color, or input its value in manually.
If you have a specific image you’d like to use for your background, you can upload that by clicking on View All above the Images section.
Then, either drag and drop your image into the uploader, or click on it to navigate to your image file. Once uploaded, it will show in the list of images. Simply drag it into the editor to set it as your background.
Once you have your background set, you can add various graphic elements, which include shapes from the platform’s shape library, as well as your own custom SVG images. You can also add linked images which will update dynamically according to your API settings (more on that in a bit).
To add a shape, simply drag it into the LiveImage editor. You can adjust the fill color and stroke color/weight. Use the shape container to adjust the width and height.
You can upload vector graphics by saving them as SVG files. To upload, scroll down to the Uploaded SVG Shapes library and click View All. Either drag and drop your image into the uploader or navigate to it by clicking on the uploader.
Again, to add it to the LiveImage, simply drag and drop it where you’d like it to appear. Just as with the basic shapes, you can adjust the size and orientation by clicking on the corners and sides of the bounding box.
Now that all of the shapes and images are in place, let’s create the text for our LiveImage.
Click on the Text link at the left of the LiveImage dashboard, and drag in the size text you would like to work with. You can adjust the size, font and color of the text once it’s in the image.
Type your text in the bar at the top of the editor, and adjust the font, color and size to your preference. To include the dynamic elements of the text, simply drag and drop the chip into the text editing bar at the top. You can also include fallback text, if desired.
When using dynamic text (chips), you can also enable multiline text. Toggle the multiline selector on, and then select your line width (by number of characters) and your line height. You can also select your text to be left, center, or right justified.
Continue the process for all of the text elements in your banner. In this example, we just need to add the text to the CTA button. Voilà - the first variant is now created!
Step 4 - Create the rest of the variants
To create the next two variants, you can simply clone the first. Click the clone icon at the top right of the variant to do so.
Repeat step 3 to design your next two variants.
Step 5 - Set up rules
Now that you’ve got your banners designed in the platform, it’s time to dictate when and how the banners will display in your various emails. To set up rules, click on any of the banners where you see the word RULES.
Name your variants and set prioritization
You’ll want to name your variants so you can easily recognize what each one is. You can also adjust the order of prioritization here.
Here’s a quick rundown of how the platform prioritizes displaying the variants. Variant 1 has the highest priority. So, if there is data for that variant and the rule can be triggered, then it will be the one that displays. If there is no data for Variant 1, but there is for Variant 2 and 3, it will trigger Variant 2. If there is no data for Variants 1 or 2, but there is for Variant 3, then that will be the one that is triggered. If there is no data to trigger any of the variants, then the fallback 1x1 pixel (or a custom fallback that you design) will take their place.
Set destination URLs
You’ll want to set a destination URL based on the call to action you included in each banner. When the recipient clicks on the banner, they will be taken to the URL you set here.
For the 5% off promotion, we want to send the user to a landing page for current promotions.
For the shipping notification, we want to send the user to their account on the website so they can track their package (and perhaps be inspired to buy more).
And for the new product release, we’ll want to send the recipient to a landing page for that specific product.
Go to the variant you want to set your rules for. We’ll start with our shipping notification, and click Add Rules followed by Add Group.
Within your Rule Group, click Add Rule once again. You will see a drop down menu for all of the possible triggers available. For the shipping notification, we want this banner to display when there is data for the shipment status. So, we will scroll down to the triggers for the shipping API and select Status, and input Departure Scan, which indicates the order has been shipped.
Repeat this process for the other two variants.
Step 6 - Publish & Generate Code
When you have all of your variants built and rules set, you’re ready to publish your LiveImage! Simply click the Publish button in the top right corner of the editor. You will get a checklist to make sure everything is in order and ready to go. The parts in red are issues that need to be fixed before you publish.
Once there is a green check box by each section, you’re ready to go. Click Publish Experience. Then, click on the Actions link next to the publish button and click Export. (Note: Once your LiveIMage is published, you won’t be able to make any changes to it. To make changes, you’ll need to unpublish it.)
You’ll have the chance to make sure your merge tags for email are formatted properly. Once you’re ready, just click Copy and paste the code into your email template where you want the notification to appear.
That’s all there is to it! You’ve now created a notification banner with 3 variants to include in any email you’d like!