Template language for DeskDirector Email Template

Andy Chen Updated by Andy Chen

Markup language - MJML

Mjml is a markup language designed to reduce the pain of coding a responsive email. You can find their documentation here.

DeskDirector email template utilize both MJML markup language and Liquid template engine to allow user to easily code dynamic email content.

Base structure

It all start with base mjml tag and mj-body tag, it is equivalent of html tag and body tag. Then mj-body can have multiple sections. Each section represent as row. Where row can have single or multiple mj-column.

<mjml>
  <mj-body>
    <mj-section background-color="#f0f0f0"></mj-section>
    <mj-section background-color="#f0f0f0"></mj-section>
  </mj-body>
</mjml>

Template engine - Liquid

Liquid is an template language, with this template language, we can insert token(object) into the template. Such as user's name, ticket's content etc.

Tags

Tags create the logic and control flow for templates. They are denoted by curly braces and percent signs: {% and %}.

Control Flow

Input

{% if Company.Id == 123 %}
  <mj-text>Welcome to our new portal!</mj-text>
{% endif %}

Output

Welcome to our new portal!

With {% else %}:

{% if Company.Id == 123 %}
    <mj-text>Welcome to our new portal!</mj-text>
{% else %}
    <mj-text>Welcome back!</mj-text>
{% endif %}

Iteration

{% for Item in Ticket.Timeline %}
    <mj-text>{{ Item.User.Name }}</mj-text>
{% endfor %}

Coding Tips

For the control tags we recommend wrap them with the <mj-raw></mj-raw> tags to make sure the tags are not removed by the MJML engine.

For example:

<mj-raw>{% for Item in Ticket.Timeline %}</mj-raw>
	<mj-text>{{ Item.Note }}</mj-text>
<mj-raw>{% endfor %}</mj-raw>

Filters

Filters change the output of a Liquid object. They are used within an output and are separated by a |.

Capitalize

Input

{{ "my great title" | Capitalize }}

Output

My Great Title
Upcase & Downcase

Input

{{ "My Great Title" | Upcase }}, 
{{ "My Great Title" | Downcase }}

Output

MY GREAT TITLE, my great title
TimeAgo

Input

{{ Ticket.LastUpdated | TimeAgo }}
<br/>
{{ "2018-08-21T22:22:07Z" | TimeAgo }}

Output

2 days ago
15 days ago
LocalTime

The LocalTime filter converts UTC time in the data to your local time. (The timezone is set it in admin console under System -> Office Hours)

Input

<mj-text>{{ Ticket.DateEntered | LocalTime }}</mj-text>

Output

Thu, Jul 14, 2011 01:00PM

The filter supports optional parameters to change the format and/or the culture of time string.

Input

<mj-text>{{ Ticket.DateEntered | LocalTime: "f", "mi-NZ" }}</mj-text>

Output

Rāpare, 14 Hōngongoi, 2011 1:00 p.m.
TimeZone

Timestamps in the data are in UTC time, but you can use this filter to convert it to your local time.

The first parameter for TimeZone is time zone ID (C# timezone ID), the second parameter is the output format of the date time (C# DateTime format string).

Input

<mj-text>{{ Ticket.DateEntered | TimeZone: "New Zealand Standard Time", "f" }}</mj-text>

Output

Tuesday, September 4, 2018 9:46 AM

ImgSize

This filter resizes your portal logo image.

The parameters are the width and the height of the image.

Input

{{Branding.Logo.Url | ImgSize: 100, 100}}

Output

https://dd-files-main.imgix.net/dev/2020/3/o_BJqA5y00icGmRvqxnJdQ/dibujo_19.png?fit=fill&w=100&h=100

This filter changes the portal link to a specific view of the portal. See Portal Deep Linking

The following example shows the supported deep linking.

Input

<mj-text><strong>Original:</strong><br />{{Links.Portal}}</mj-text>
<mj-text><strong>ticket_list:</strong><br />{{Links.Portal | DeepLink: 'ticket_list'}}</mj-text>
<mj-text><strong>ticket_list approval:</strong><br />{{Links.Portal | DeepLink: 'ticket_list', 'approval'}}</mj-text>
<mj-text><strong>support_options:</strong><br />{{Links.Portal | DeepLink: 'support_options'}}</mj-text>
<mj-text><strong>pre_ticket_chat:</strong><br />{{Links.Portal | DeepLink: 'pre_ticket_chat'}}</mj-text>
<mj-text><strong>request_types:</strong><br />{{Links.Portal | DeepLink: 'request_types'}}</mj-text>
<mj-text><strong>request_type:</strong><br />{{Links.Portal | DeepLink: 'request_type', 1}}</mj-text>
<mj-text><strong>notifications:</strong><br />{{Links.Portal | DeepLink: 'notifications'}}</mj-text>
<mj-text><strong>content_page:</strong><br />{{Links.Portal | DeepLink: 'content_page', 'some-id'}}</mj-text>
<mj-text><strong>invoices:</strong><br />{{Links.Portal | DeepLink: 'invoices'}}</mj-text>
<mj-text><strong>quotes:</strong><br />{{Links.Portal | DeepLink: 'quotes'}}</mj-text>

Output

Original:
https://dev.deskdirector.com/portal/deeplink?name=ticket&ticket_id=123
ticket_list:
https://dev.deskdirector.com/portal/deeplink?name=ticket_list
ticket_list approval:
https://dev.deskdirector.com/portal/deeplink?name=ticket_list&state=approval
support_options:
https://dev.deskdirector.com/portal/deeplink?name=support_options
pre_ticket_chat:
https://dev.deskdirector.com/portal/deeplink?name=pre_ticket_chat
request_types:
https://dev.deskdirector.com/portal/deeplink?name=request_types
request_type:
https://dev.deskdirector.com/portal/deeplink?name=request_type&type_id=1
notifications:
https://dev.deskdirector.com/portal/deeplink?name=notifications
content_page:
https://dev.deskdirector.com/portal/deeplink?name=content_page&page_id=some-id
invoices:
https://dev.deskdirector.com/portal/deeplink?name=invoices
quotes:
https://dev.deskdirector.com/portal/deeplink?name=quotes
first, last & size

Notice that these filters start from a lower case letter.

Input

<mj-text>{{ Ticket.Timeline.size }}</mj-text>

<mj-text>{{ Ticket.Timeline.first.Timestamp }}</mj-text>

<mj-text>{{ Ticket.Timeline.last.Timestamp }}</mj-text>

Output

1
9/3/2018 9:46:30 PM
9/3/2018 9:46:30 PM

How did we do?

Contact