Drag and Drop Editor

Use Twilio Engage to build email templates with a what you see is what you get (WYSIWYG) Drag and Drop Editor. Use drag and drop tools to design the template layout and include user profile traits to personalize the message for each recipient.

You can navigate to the Drag and Drop Editor from the Select Editor screen:

• When you build a new email template or edit an existing one.
• From a Send Email step in a Journey.

From the Select Editor screen, select Drag and Drop Editor and click Build Email.

The Drag and Drop Editor consists of a left sidebar with design modules and an email canvas.

Left sidebar

The left sidebar contains the following tools:

• Content
• Blocks
• Body
• Images
• Uploads

Click and drag the tools you want to use from the left sidebar in the email canvas.

Email canvas

Use the canvas to organize and preview the email template for both desktop and mobile. Drag and drop content modules from the sidebar into the canvas and arrange the layout as desired.

Select content in the canvas and return to the left sidebar to set properties for the selected content.

Design for desktop or mobile

Navigate between desktop or mobile to design the email template for both formats. Toggle between desktop or mobile in the left sidebar or use the buttons in the bottom right corner of the email canvas.

Responsive design

Use responsive design settings in the sidebar to hide specific content for either desktop or mobile.

Add content modules

Select from the following content modules:

Add blank columns or predefined content blocks

Use the Blocks tool to add both blank columns and pre-existing content blocks to the email. Drag empty column blocks in the canvas to organize the layout, then drag and drop content tools inside the column blocks.

Predefined content blocks allow you to add content such as:

• Unsubscribe blocks
• Heading blocks
• Image blocks
• Saved blocks

Email body attributes

Use the body tool to apply general style and link attributes to the entire email canvas.

Email body attributes include:

• Text and background color
• Content width and alignment
• Font family
• Link color and underline

Add an image

Use the images tool to add images to your email. Scroll through available images in the left sidebar or use the search tool.

Select and drag and image into the canvas, then return to the sidebar to set image properties:

Upload an image

Use the Uploads tool to upload an image for the email template. Click Upload Image to select an image stored locally or drag and drop images in the sidebar dropzone.

Link actions

Use the Action Type drop down menu in the sidebar to select the action that occurs when a recipient clicks on the link, button, or image in the email template.

Select from the following link actions:

• Open Website: Directs you to a website. Enter a URL and choose to open the website in the same tab or a new one.
• Send Email: Sends an email based on the email recipient, subject, and body you enter.
• Call Phone Number: Makes a phone call to the number you enter.
• Send SMS: Sends an SMS message to the phone number you enter.

Add unsubscribe links

It’s always best practice to include an unsubscribe link in the emails you build. Engage adds an unsubscribe link to templates, which you can edit at any time. For more on email unsubscribe links, view SendGrid’s best practices.

Add an unsubscribe link as a button:

1. Select the button in the email canvas and navigate to Action settings in the left sidebar.
2. Set Action Type to Open Website.
3. Click Special Links > Unsubscribe.

Add an unsubscribe link to text:

1. Select the text that you want to convert to an unsubscribe link.
2. Click the link icon in the text toolbar.
3. In the Insert/Edit link window, set Action Type to Open Website.
4. Click Special Links > Unsubscribe, then click Save.

You can alternatively add a predefined unsubscribe link content block.

Add a manage preference link

Engage also adds a manage preference link to templates. The manage preference link lets your customers opt in and out of email groups on an individual basis instead of unsubscribing from all your campaigns. For more information, see subscription groups.

Personalize with merge tags

Add merge tags in the Drag and Drop Editor to personalize your message with user profile traits.

1. Select any heading or body text in the email canvas. From the text toolbar, click Merge Tags.
2. Select the profile traits to include from the drop down menu.
3. Based on cursor placement, Engage adds merge tags to your email template.

Engage supports liquid templating to create dynamic content in the email design editor and the SMS editor.

For example, use {% if %}, {% elseif %}, and {% else %} tags to call a product by name if known, or use a default message:

{% if profile.traits.product_title == "Sneakers" %}
  Hey, view our latest sneakers!
{% elsif profile.traits.product_title == "Sandals" %}
  Hey, check out these sandals!
{% else %}
  Hey, check out our latest footwear.
{% endif %}

To view more examples related to your use case, visit the LiquidJS docs.

Content validation

For all content editors in Engage, you’ll see alerts for any issues in your template, such as invalid profile traits or incorrect liquid syntax. Engage both flags template issue(s), and displays recommended next steps. While you can save these templates, you must fix any issues before using them in Engage campaigns.

Save the template

After you design the email, click Create Email Template.

Next steps

• Learn more about building email templates to include in your Engage campaigns.

• You can learn about the HTML Editor for both code and visual editing capabilities from a single view.