Building Blocks with DML

Dyspatch blocks are modular, responsive, customizable, and straightforward to build with Dyspatch Markup Language (DML). Once a block is created you can use it in the email builder to create emails quickly.

Using DML to Build Blocks

We built DML to make coding responsive email blocks fast and effortless. Design your block with structural DML tags like <dys-column> and add common email elements with DML tags like text <dys-text>, images <dys-img>, and buttons <dys-button>. You can also use DML to create dynamic blocks and add personalizations, like variables @{variable_name}.

The blocks you build with DML will be available in the email builder and used to create new email. Emails created from blocks can then be exported from Dyspatch to any of our ESP direct integrations or to any of our supported export languages.

Create a New Block

There are two ways to create a new block. Creating a block from the Blocks & Apps tab will require toggling on all themes you'd like to make the block available in. Creating a block from the Themes tab will assign the Block to that theme automatically.

New Block from Blocks & Apps Tab

Select the Blocks & Apps tab from the left menu, click Create then New Block.

Make a new block in the Block tab in Dyspatch

This block will need to be manually added to your theme or themes before it can be used in an email.

New Block from Themes Tab

From the Themes tab, select the theme you'd like to use your new block in then click Create > New Block.

Create a new block from the Themes tab in Dyspatch

Duplicate a Block

To make a new version of an existing block, duplicate the block from either the Blocks & Apps tab, or the Themes tab. Select Duplicate from the " 3 dot " menu icon for the block you'd like to duplicate. Either way, your block's theme assignment settings will follow to the new block.

Duplicate a block in Dyspatch

Starting in the Block Editor

A new block will already have the basic DML structure in the Block Editor.

The block editor starting DML ready to go

Style with Attributes

Each DML tag has attributes for adding style to the element. Using the attributes available for a <dys-text> tag we can make the text larger, add color, and assign a font to customize the style of this element.

The block editor with attributes added to the dys-text for styling

See the DML docs for all available attributes for each tag.

If your theme has <dys-attributes> set for your DML element, those will be applied to the element in the email. Any style attributes set on the element in the block will override theme-level attributes

Make Content Editable

Add an editable attribute with a unique name to allow email creators to customize the content in the email builder.

The block editor with an editable attribute added to the dys-text

Each editable attribute requires a name that is unique to the block

The editable attribute is available for many DML and HTML elements, allowing you to control which content in the block will be available for customization in the email builder. For example, an editable attribute added to a <dys-img> tag will allow the src, alt text, title, and href to be editable in the email builder.

When an editable attribute is added to an element, the content becomes placeholder text that will be visible and editable in the email builder. Without the editable attribute, the content saved in the block will be locked and unavailable for editing in the email builder. Find out more about editable content here.

For dialing in editable control, see how to enable all editable styles for blocks for a theme

DML Templating

Add personalization and templating logic to your block with DML. DML supports variables @{variable_name} and expressions, like if statements <dys-if cond="conditional_name"></dys-if>. Find out more about DML templating here.

A variable and an if statement in the block editor

The logic you add using DML can be exported to any of our ESP direct integrations or as any of our supported export languages, so you can use your Dyspatch emails in multiple email sending platforms.

Sample Data

Add test data on the Data tab to preview your block's variables and check your templating logic with the same kind of data you would use to send your emails.

You can input and edit your sample data with the visual editor or the Code editor by toggling the icons next to Custom Variables.

Data in the sample data tab in the block editor {'firstname':'Rowan','membership': true}

See more on Testing Your Email with Sample Data.

Use Customer Profiles to store multiple scenarios and customer types throughout your organization

Localizations

Manage your block-level localizations on the Localizations tab. This is typically used for non-editable content that will be the same across all emails where the block is used.

Localizing your block

Check out our Knowledge Base to learn more about localization in Dyspatch and dig deeper into Translating Blocks with Block Localization.

To prevent translated content from changing, DML elements can be localizable in the block, or editable in the email builder, but not both

Add Block to Themes

From the Settings > Theme Assignment tab in the block editor you can preview how your block will look in different themes as well as add your block to a theme by using the toggle on the right.

The theme tab in the block editor shows which themes the block is in

A theme must be active on a block to use it in an email using that theme

If your team uses Figma as the single source of truth to keep designs consistent across all channels, like ours does, link to the Figma design file under Settings > Block Details.

Block builder with a figma file attached and figma interactive screen

This will allow block builders to interact with the design file directly in the block builder, ensuring email design accuracy.

Check out our DML documentation

Head over to our DML docs to read more about DML and do some interactive learning in our DML Playground.

search icon

Didn't find what you're looking for?

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

Contact Support