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 utilises both MJML markup language and Liquid template engine to allow users to easily code dynamic email content.

Base structure

It all starts with the base MJML tag and the mj-body tag, which is equivalent to the HTML tag and body tag. Then mj-body can have multiple sections. Each section represent as row. Where a row can have a single or multiple mj-columns.

<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 a template language; with this template language, we can insert a token(object) into the template. Such as the user's name, the ticket's content, etc.

Tags

Tags create the logic and control flow for templates. They are denoted by curly braces and per cent 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 wrapping 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 |. Filter names specified in the DeskDirector email template editor must be capitalised, or they will not be recognised.

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 in your Admin Portal 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 the 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 them 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:</strong><br />{{Links.Portal | DeepLink: 'ticket'}}</mj-text>
<mj-text><strong>Ticket Action:</strong><br />{{Links.Portal | DeepLink: 'ticket', 'approve'}}</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:
https://dev.deskdirector.com/portal/deeplink?name=ticket&ticket_id=123
Ticket Action:
https://dev.deskdirector.com/portal/deeplink?name=ticket&ticket_id=123&action=approve
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 lowercase 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

MarkdownToHtml

This filter converts the input text content in markdown format to HTML format that can be rendered properly in email clients.

Input

{{"## some header" | MarkdownToHtml }}

Output

<h2>some header</h2>

How did we do?

Ticket Life Cycle

Contact