There are 3 advanced elements available in the editor: Loop, Conditional and Dynamic Image.
They are not visible unless the “Advanced elements” privilege is enabled for you.
From now on we generate different HTML for Dynamic Image, Loop, and Conditional, depending on the templating language.
Dynamic image
The dynamic image is very similar to the basic image element, but we use a placeholder in the editor and preview and generate an image element based on the URL given.
Dynamic images are the same as images in the output HTML, the difference is that you have to add to URL and the altText manually, and it must contain an expression.
You can set width and height to any value, but you have to make sure that you will use images with the same dimensions.
For example, if you want to attach everyone's profile picture you can add an empty dynamic image element and ESP will replace it with their pictures.
The image source needs to be replaced for the ESP to replace the images.
Conditional element
The conditional element only has 2 properties: expression and children.
Depending on your expression, it can show/hide its children.
You can choose the templating language that you would like to use in the email properties settings, which can be reached through the toolbox too.
In the email properties, as mentioned, you can set a templating language:
We currently have Handlebars, Liquid, Mustache and Mailchimp.
For more information you can visit:
If you are using Handlebars: https://sendgrid.com/docs/for-developers/sending-email/using-handlebars/#conditional-statements
If you are using Liquid: https://shopify.github.io/liquid/tags/control-flow/
If you are using Mustache: https://mustache.github.io/mustache.5.html
{
"type" : "CONDITIONAL",
"expression": "user.profile.male",
"children":[
...
]
}
Properties | Type | Values | Description
--- | --- | --- | ---
expression | string | must be a valid expression child | array | The children array may [contain any of our element types](/elements) except the full-width element.
Note: In preview, we show all the states, you will see it only if you send the test or export the email with your Email Service Provider.
Loop element
We use this when we don't know how many items we will show to the recipient so we create a loop.
Items that are titled with a particular title will be created.
The loop element only has 2 properties: expression and children.
Depending on your expression, it can loop through your data to build lists for example.
You can choose the templating language that you would like to use in the email properties settings, which can be reached through the toolbox too.
For more information you can visit:
If you are using Handlebars: https://sendgrid.com/docs/for-developers/sending-email/using-handlebars/#iterations
If you are using Liquid: https://shopify.github.io/liquid/tags/iteration/
If you are using Mustache: https://mustache.github.io/mustache.5.html
{
"type" : "LOOP",
"expression": "user.orderHistory",
"children":[
...
]
}
Properties | Type | Values | Description
--- | --- | --- | ---
expression | string | must be a valid expression
children | array | The children array may [contain any of our element types](/elements) except the full-width element.