This guide will show you how to embed your Flowbox Email Assets in your emails to enhance your personalized, product-specific email campaigns in Voyado's Design Studio.
First of all, if you're not familiar with how to set up an Email Asset, it's a good idea to read this general article first.
What are Flowbox Email Assets?
Email Assets are a set of dynamic images and links that enable you to create more authentic emails that incorporate the freshest user generated content (UGC) you have collected and moderated in Flowbox.
Email Assets is offered as an add-on service. If you want to activate this feature, please contact your CSM to discuss your plan.
Creating an Email Asset for Voyado
To create a new Email Asset, go to the "Visual Marketing tab" in Flowbox and under "Distribution" you will find the Email Assets section.
Click on the "New Asset" button and select your Asset type.
If you want to create an Asset that fetches any kind of UGC from a specific Flow or Tag, choose "Dynamic Asset".
If you want to create an Asset that fetches UGC content from a specific product, choose "Dynamic Product Asset". This option is meant to be used for "abandoned cart" or "post-purchase" emails or to showcase UGC that matches the products that the user might have purchased.
Depending on the settings you've selected for the Email Asset's format (HTML or Links), integration will be different.
HTML (Dynamic Asset)
HTML (Dynamic Asset)
Once you finish the Email Assets set up, an HTML block will be generated. Copy it:
In Voyado's "Elements" section, drag and drop a "HTML Code" block into your Email template. Once added, paste it in the text field available in the right panel:
Links (Dynamic Asset)
Links (Dynamic Asset)
Once you finish the setup, a group of Email Asset links will be generated.
Creating a Custom Data Source in Voyado
Once your Dynamic Asset is created in Flowbox, you can now log into Voyado.
The full process is detailed in Voyado's documentation:
https://help.engage.voyado.com/hc/en-gb/articles/23601359145628-Flowbox
In there, you can create a new custom data source in the "Configure Engage" section. This data source requires the following parameters:
Name: You can use any name you prefer, such as "Flowbox". This will be used for the module generated in Design Studio.
ID: It's mandatory to use "flowboxdynamic"
Then, you will need to enable the "Parameters" section. Copy & paste the following JSON code under the "Input JSON schema" field:
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"type": "object",
"title": "Parameters",
"properties": {
"flowboxId": {
"title": "Email asset ID",
"type": "string"
},
"flowboxEndpoint": {
"title": "URL endpoint",
"type": "string"
}
},
"required": [
"flowboxEndpoint",
"flowboxId"
]
}
Next, drag and drop an image placeholder into your email template, and then insert the image and URL links in the fields on the right.
Once done, you can save the changes.
Set up the Flowbox module in Design Studio
Access Design Studio. From there:
You will need to find your automation (i.e.: "abandoned cart") and edit the email template.
Go to "Starter library".
You will see your previously created module under the "Partner" category.
Drag this module onto your email canvas
Click on "Settings". You will need to fill in the following fields. In order to fill them, you will need to retrieve some sections from your URL.
Email asset id: UUID meant to identify your Email Asset. Its format is similar to:
6afr4c6e-2ba9-4bea-8969-8f642673de6fUrl endpoint: The endpoint domain for your Email Asset. It shoud be formatted as a link similar to:
https://wuhg3bmvk0.execute-api.eu-west-1.amazonaws.com
To get your Email asset ID, you will need to open your Email Asset in Flowbox and check the "Embed" tab. In there, you should be able to see this kind of URL:
You can use the first part of the link for the "Url endpoint" option, up to the ".com":
https://wuhg3bmvk0.execute-api.eu-west-1.amazonaws.com
Then, for the "Email Asset id" you need to retrieve the long UUID in the middle: 6afr4c6e-2ba9-4bea-8969-8f642673de6f
Preview and test
After adding this, the images should appear when when you use Preview with data in Design Studio. Now the module can be styled as any other module and saved in your team library for use in sendouts.
When creating a sendout, use your Flowbox module from the team library. If necessary, change the Email Asset ID parameter to the value you need.
Links (Dynamic Product Asset)
Links (Dynamic Product Asset)
Add your Product identifier
When creating a Dynamic Product Asset, you will be asked to type the variable that contains your product identifier in Voyado. You will only need to find and add this information once. This dynamic variable will appear in the URL of the generated assets as a placeholder - you will need to replace it later on by an actual Voyado "personalized field" variable. One such example could look like the following one:
[[cart.Items(0).ProductData.Id]]
Once you finish the setup, a group of Email Asset links will be generated.
Copy the "Image Source" and "Product link" URLs for the first image you will display.
Implement an "Abandoned Cart" Layout
Access Voyado's Design Studio. You will need to find your automation (i.e.: "abandoned cart") and edit the email template.
Add a new "Layout" element in your template. Once added, select it and make sure that the Data Source available in the right panel is set to "Abandoned Cart" or the corresponding source than contains the Product identifier you've previously set up.
Then, add the desired "Image" elements in your Layout. Change the Image source to "Dynamic", and paste Flowbox's Email Assets URL in the "Image source" and "Link" fields.
Image source: requires Flowbox Email Assets "Image source" URL
Link: requires Flowbox Email Assets "Product Link" URL
Once the links are pasted, you will need to replace the text string that contains the product variable with the actual variable that returns the product's identifier.
Click on the "Add personalized field" icon that appears at the right of each of the previous fields. It has a snake-like shape. From there, select the "Abandoned Cart" data source and replace the product identifier's text with its corresponding variable.
The end result should look like this. Please note how the links contain a "productId" variable:
Repeat the process should you want to include further image blocks, by using the rest of Email Assets links provided in Flowbox. All links have different number at the end of their URL.
Preview and test
After adding this, the images should appear when when you use Preview with data in Design Studio, as long as the preview data matches a product available in Flowbox. We also strongly recommend testing your abandoned cart email.
Flowbox Email Assets work well in abandoned cart emails, but can also be used to enrich other campaigns including order confirmation, complete the look, etc.