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 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 use it as a simple external event triggered message.