If you want to create transactional emails in Visual Content Editor, you need to have the following:
- a JSON to trigger the API
- an HTML snippet which you want to personalize with the data
JSON
{
"key_id": "3",
"external_id": "test@example.com"
"data": {
"orderId": 1234,
"orderItems": [
{
"productCode": 12,
"imageUrl": "http://domain.com/12.jpg"
},
{
"productCode": 13,
"imageUrl": "http://domain.com/13.jpg"
}
]
}
}
With the above JSON example, order 1234, its related products 12 and 13 and their images will be available for the email campaign. The data displayed in the email itself will be gathered from here. You can include any number of items.
You have the possibility to test your JSON on the API Demo page. You need to put the data part of your JSON into the text field of data and define the remaining parameters.
You can check how the Triggering an External Event API endpoint works here.
HTML snippet
To create your HTML code, you must reference your external data with this syntax:
{{ event.variableName }}
An example for the HTML code is the following:
<h1>Order ID: {{event.orderId}}</h1>
<ul>
{% foreach order in event.orderItems %}
<li>
{{order.productCode}}
<img src="{{order.imageURL}}" />
</li>
{% endforeach %}
</ul>
With the help of the above HTML snippet, a header which contains the order ID becomes displayed in the transactional email. The code contains the foreach tag which loops through all product codes and image URLs provided in the JSON. It means that the email will list all product codes and image URLs it could reach.
Please note that for foreach there is a limit, which is 100 items.
The very last step is to finalize your campaign and activate it in Automation Center or use as a simple external event triggered message.