Creating Personalized Content with the Visual Editor

April 26, 2019

Craft personalized content for your email templates using Dyspatch Markup Language (DML) in the visual editor. DML variables allow you to insert personalized content into your visual templates before sending. Visual templates can be exported into other templating languages to integrate with your system, read more about DML and it's supported export languages in the DML documentation.

DML Variables

DML variables can be used in a template's subject line, preheader, and in any editable blocks. To add a variable use @{variable_name}.

A Personalized Greeting

Let's create a personalized greeting using DMLDml‘Dyspatch Markup Language’ was created by Dyspatch to accelerate the the creation of dynamic and responsive email templates that can be sent with any email service provider. and test it in the visual editor with sample dataSample DataSample Data powers dynamic content in the editor’s preview pane, Device Testing, and test sends..

Hello @{first_name}

A variable in the visual editor 'Hello @{first_name}'

In this example, the variable is named "first_name". Without sample data the variable itself is visible in the preview, as shown above. To view how the template would look to a customer use sample data to fill in the variables and test it out.

Sample Data

Sample data needs to be written in JSONJsonJSON is a format for representing data with key and value pairs, used to store and exchange data. format. The sample data required to fill in the "first_name" variable is below.

{
    "first_name": "Akila"
}

Adding this data to the Sample Data tab in the visual editor will render the variable for the preview. Here's the finished personalized greeting, filled in with sample data. Sample data example powering the DML variable in 'Hello @{first_name}'

Nested DML Variables

To keep data organized, it can be useful to nest related information together. To reference a nested variable use dot notation "." @{variable.nested_variable}.

Hello @{customer.first_name}

a nested variable in the visual editor 'Hello @{customer.first_name}'

Nested Sample Data

The sample data required to fill in the nested variables has "first_name" and "last_name" nested under "customer" using JSONJsonJSON is a format for representing data with key and value pairs, used to store and exchange data. format.

{
    "customer": {
        "first_name": "Akila",
        "last_name": "Green"
    }
}

Testing Your Template

Adding the right sample data for your template will render variables in the visual editor's live preview. Sample data also works to power other Dyspatch testing features such as localization previews, sending an email to yourself, and device previews. To learn more about sample data check out our guide here.

Didn't find what you're looking for?

Ask our support team, we're here to help!

Contact Support