Support tip: How to structure the Zendesk email template to use custom HTML layouts for each of your Multiple Brands
UPDATE 11/25/2019 : Added link to download working mulibrand template examples at the bottom of this how-to.
Here is how to structure the one email template that Zendesk provides in order to support multiple brands so that the emails sent out are all unique to each brand (colors, logos, fonts, formatting, etc.).
Goals:
- One HTML email template configured to support each brand's unique header and footer content (more than just logo art and tag lines).
- Total control over the content of the email with different types and amount of content (above and/or below the body region) included in the email (in addition to branding).
- No burden on any of the dozens or more Triggers that would otherwise have to be loaded with header HTML and would have to be edited over and over when template changes are made. (Zendesk's example has you place the logo and other HTML in each Trigger).
- No cloning of Triggers necessary for each brand that would otherwise be needed to provide branded emails.
- Works for all browsers (web mail) as well as native Mac & Windows email clients (Outlook for Windows is notorious for issues with HTML templates).
- Responsive design to work with desktops, laptops, tablets, and mobile phones.
Requirements:
- Zendesk Support Enterprise (up to 5 brands) or Support Enterprise with the Multibrand add-on (up to 300 brands).
- Completed/tested HTML based pages (email templates). One for each of your brands. (or use the example template included at the bottom of this how-to).
Suggestion:
- If at all possible have each of your brands HTML email pages use the same core framework, CSS, etc. While this is not required, it will save on debugging and make editing easier in the future.
Caveat (maybe):
- I don't know the maximum file size of HTML that Zendesk will accept in the email template, but ours is already at 52KB and it works.
To make your life easier and to meet the last two goals, you must start with fully tested HTML pages for each brand that will then be used to become components in your Zendesk email template. This article does not cover the creation of your HTML pages, except to say that you want to have tested each HTML email page in all the browsers, clients, and device types your users may have before you start the process to 'cut them apart' to assemble them into Zendesk's email template to support multiple brands. This will save you many hours of testing and headache.
The key to make this work is that we need a way for the one email template to 'know' which brand a given email belongs. The answer to this came from a comment by Luiza Gusmão in this Zendesk support article called Using the email template with multiple brands (Enterprise) where she stated that the system placeholder {{footer}} (which is part of the default email template) returns a text based sentence that contains the name of the Brand (as defined in the Admin > Manage > Brands page).
The actual text returned by {{footer}} is as follows:
This email is a service from [YOUR BRAND NAME].
Where [YOUR BRAND NAME] is the text found in each Brand's 'Brand Name*' text field.
With this you can use Liquid markup's 'case' and 'when' statements to trigger off the value of {{footer}} to change the HTML used in the email template to match what you want for each of your brands. After much trial and error testing of my own, here is the outline to follow to create an email template for any number of brands.
Instructions for the email template outlined below:
UPDATE: Links to download more detailed and simpler templates are included at the bottom of this how-to. These are working examples ready for you to customize to your brands.
Replace all example [html/text] with your actual HTML and or text for that object.
The {{placeholder}} and {% code %} blocks remain where they are.
Anything contained in <!--- are my comments which should not be used in your template -->.
<!-- START Template -->
[HTML <html><head> sections and beginning <body> HTML required before the delimiter placeholder.]
{{delimiter}}
{% case footer %}
{% when 'This email is a service from [YOUR BRAND NAME A].' %}
<!--- what was missing in Luiza's example is the '.' right before the closing single quote mark. Without that period you won't get a match. -->
[HTML Body Brand A - specific header HTML - e.g. logo and other template content]
{% when 'This email is a service from [YOUR BRAND NAME B].' %}
[HTML Body Brand B - specific header HTML - e.g. logo and other template content]
<!--- Repeat the {% when... %} and [HTML] header pairs for each additional brand you have. -->
{% else %}
[HTML Body generic intro HTML (for agents/groups)]
<!--- While this is optional, it does make the agent/group notification emails from your Triggers look correct with a styled header and footer. If you choose to omit this, also remove the {% else %} line above it. This does not have to be 'generic' HTML, it could be a copy of your main brand, or that of your corporate identity. Because the emails that are sent to your agents will have a common header and footer, I place at the top of each Trigger that sends an email to agents/groups the Zendesk placeholder {{ticket.brand.name}} More on this below. -->
{% endcase %}
{{content}} <!--- This of course is the body of the email that comes from your defined Trigger email body section. -->
{% case footer %}
{% when 'This email is a service from [YOUR BRAND A].' %}
[HTML Body Brand A - specific footer HTML, including closing </html>]
<!--- This HTML block can also contain the actual {{footer}} placeholder. -->
{% when 'This email is a service from [YOUR BRAND B].' %}
[HTML Body Brand B - specific footer HTML, including closing </html>]
<!--- This HTML block can also contain the actual {{footer}} placeholder. -->
<!--- Repeat the {% when... %} and [HTML] footer pairs for each additional brand you have. -->
{% else %}
[HTML Body generic footer HTML, including closing </html>]
<--- I recommend that you include the {{footer}} placeholder in with the HTML here as it provides additional ticket info for agents. Again this section is optional, if you remove it, also delete the {% else %} line above. -->
{% endcase %} <--- This is the last line of your email template. -->
<!-- END Template -->
The emails that are sent to CC users (as defined in Admin > Settings > Tickets > CCs) will use the HTML of the brand that is in force. Like a Trigger, the info defined in the settings for CCs will be replace the {{content}} block.
As I mentioned in a code comment above, emails that are sent to Full Agents, Light Agents, and Groups are not styled to each brand that you have. (If it exists, I have not found a way to style agent emails for each brand). With this template, emails sent to Agents & Groups will have a common look across all brands, as those emails use the HTML setup in the {% else %} sections of the template.
If you choose to not include the 'generic' HTML in the {% else %} sections then your emails that are sent to Agents/Groups will only contain what is in the {{content}} block from the Triggers.
To solve this issue, and identify which brand each of the emails sent to agents/groups belong to, you have to add the brand name in each of the Triggers that go to your agents/groups. To label each Agent/Group email with a brand do the following:
Email subject: [{{ticket.brand.name}}] re: {{ticket.title}}
Email body: <strong style="font-size: 18px;">{{ticket.brand.name}}</strong>
Remember this is only needed for Triggers that target emails to Agents/Groups, you don't have to do this for the Triggers that send emails to your users, as your HTML in the email template will do that.
Assumption:
My example process for the multibrand email template above assumes that you can get your HTML <head> section developed to support all your brands. If this is not the case, then you can do the same for the HTML <head> section as you do for the other sections. At the top of the email template outline above, replace everything above the {{delimiter}} with the following code blocks:
<!-- START Template -->
{% case footer %}
{% when 'This email is a service from [YOUR BRAND NAME A].' %}
[HTML <html><head> sections and beginning <body> HTML required before the {{delimiter}} for Brand A]
{% when 'This email is a service from [YOUR BRAND NAME B].’ %}
[HTML <html><head> sections and beginning <body> HTML required before the {{delimiter}} for Brand B]
<!--- Repeat the {% when... %} and [HTML] pairs for each additional brand you have. -->
{% else %}
[HTML <html><head> sections and beginning <body> 'generic' HTML]
{% endcase %}
Recommendations:
To be fully compatible with client email apps, desktop browsers, mobile browsers, and especially Microsoft Outlook for Windows/Office 365, you will need to fully test your HTML email template to be sure it renders the way you want before you carve it up into the sections for the Zendesk email template
To get the broadest compatibility across applications and platforms, and have a cool email design, make sure you develop your email template with modern well structured HTML using CSS3, If that is not possible, then the simpler you can make the template (and still meet your desired layout and look) is your best approach to the widest compatibility.
To render structured emails correctly, mobile apps and browsers (iPhones, iPads, and all Android phones and tablets) will require an HTML template that is based upon CSS3 or a flexible CSS framework.
Warning:
Microsoft Outlook for Windows/Office 365 has it's own demons that can cause major headaches (especially if you use any <table> base HTML in your email template). Interestingly Microsoft Outlook for Mac does not have the HTML <table> rendering issues that the Windows version has.
Best Practice:
Of course your HTML email template should absolutely be accessible (WCAG 2.1 standards compliant) for those who are differently abled.
Is there anything I missed, let me know. Happy email template building!
UPDATED: Below is a link to download my Zendesk Multibrand email template for use with this How-To. There are 3 versions: 1. Simple commented template for two brands. 2. Simple uncommented template for 3 brands. 3. A detailed HTML 2 brand template based upon what we use for our Zendesk brands.
This third template is for web developers to get a sense of the complex layouts that are possible. This third template is also tested to have the chosen layout to work with Microsoft email clients.
Note that if/when you load them in your browser to view, you will see all the brands' email tops and bottoms as your browser does not parse the unique Zendesk tags that control which brand's top/bottom wrapper is used for a given brand's email.
https://www.dropbox.com/s/vn2xlkyjsmggj38/Zendesk%20Multibrand%20Email%20Templates.zip?dl=0
-
Hi Nicky,
Thanks so much for posting this workaround! For visibility to our product team and to allow others to add their upvotes and comments, would you mind posting to our Feedback - Help Center (Guide) topic, using this template? Your workaround would be very useful, so our team can see the level of work required to get around the current product limitations. Thanks!
-
Thanks for all of this documentation. We are excited by the idea and have a proof of concept in place but there is one complication holding us up:
In our instance we have one department based brand that works with several of our brand brands. Is there a way to create a sub when statement that looks at the group of the ticket?
i.e.
{% when 'This email is a service from Brand.' %}
{% when 'This email is a service from Group.' %}
Brand
{% else %}
Brand
{% when 'This email is a service from Brand.' %}
Brand
-
Hi Chris! I'm not Andrew and definitely not an expert in liquid markup, but I took a look at their documentation and you may be able to do this in a slightly different way. Instead of nesting the `when`, you could use multiple conditions for your `when` to accomplish this. For example:
{% when 'email from brand one' and 'email from group 1' %}
Brand/group
{% when 'email from brand one' %}
Brand
Let me know if this works for you!
-
Hi there,
Were currently working on our email template for two brands.
We worked on the code and when we tested it (using https://email2go.io/), it was all good. But when we tried to paste it on the "email template" section on the Admin Center and used a test ticket everything gets messed up. I don't know why.The first photo is what it should look like. The second one is what we got.
Please help.
-
Hi Regit!
I would suggest that you check Customizing your templates for email notifications for guidance in customizing your email template.
I hope that helps!
-
Thanks for the documentation. We've set up our template as we believe correctly, however, it doesn't work AT ALL. E-Mails won't show any logos, footers, etc. Would you be so kind to take a look? I anonymized it, Brands 1-4 serve as placeholders, would be the exact names we use in Zendesk.
<!doctype html>
<html><head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}html,
body {
background: #eeeeee;
font-family: 'Open Sans', sans-serif, Helvetica, Arial;
}img {
max-width: 100%;
}a {
color: black; text-decoration: none;
}a:hover {
color: #a81326;
}
</style>
</head>{% case footer %}
{% when 'Brand 1' %}
<body style="background: #eeeeee; padding: 0 10px; margin: 0; font-family: 'Open Sans', sans-serif, Helvetica, Arial;">
<table width="800px" cellpadding="0" cellspacing="0" bgcolor="FFFFFF" style="background: #ffffff; max-width: 800px !important; margin: 0 auto; background: #ffffff;">
<tr>
<td style="text-align: center; padding: 5px 100px 0;">
<p href="#" style="color: #b7b7b7; font-size: 11px; letter-spacing: 0.2px;">{{delimiter}}</a>
</td>
</tr>
<tr>
<td width="200" style="width: 200px; text-align: left; padding: 50px 100px 0;">
<img src="https://assets.prod.XXX.de/assets/shop/images/email/logo.0685b444.png" width="200"/>
</td>
</tr>
<tr>
<td style="text-align: left; padding: 20px 100px 50px;">
<p style="font-family: Arial, sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: 0.5px; text-align: left;">
{{content}}
</p>
</td>
</tr>
</table>
</body>{% when 'Brand 2' %}
<body style="background: #eeeeee; padding: 0 10px; margin: 0; font-family: 'Open Sans', sans-serif, Helvetica, Arial;">
<table width="800px" cellpadding="0" cellspacing="0" bgcolor="FFFFFF" style="background: #ffffff; max-width: 800px !important; margin: 0 auto; background: #ffffff;">
<tr>
<td style="text-align: center; padding: 5px 100px 0;">
<p href="#" style="color: #b7b7b7; font-size: 11px; letter-spacing: 0.2px;">{{delimiter}}</a>
</td>
</tr>
<tr>
<td width="200" style="width: 200px; text-align: left; padding: 50px 100px 0;">
<img src="https://assets.prod.XXX.de/assets/shop/images/email/logo.0685b444.png" width="200"/>
</td>
</tr>
<tr>
<td style="text-align: left; padding: 20px 100px 50px;">
<p style="font-family: Arial, sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: 0.5px; text-align: left;">
{{content}}
</p>
</td>
</tr>
</table>
</body>{% when 'Brand 3' %}
<body style="background: #eeeeee; padding: 0 10px; margin: 0; font-family: 'Open Sans', sans-serif, Helvetica, Arial;">
<table width="800px" cellpadding="0" cellspacing="0" bgcolor="FFFFFF" style="background: #ffffff; max-width: 800px !important; margin: 0 auto; background: #ffffff;">
<tr>
<td style="text-align: center; padding: 5px 100px 0;">
<p href="#" style="color: #b7b7b7; font-size: 11px; letter-spacing: 0.2px;">{{delimiter}}</a>
</td>
</tr>
<tr>
<td width="200" style="width: 200px; text-align: left; padding: 50px 100px 0;">
<img src="https://assets.prod.XXX.de/assets/shop/images/email/logo.0685b444.png" width="200"/>
</td>
</tr>
<tr>
<td style="text-align: left; padding: 20px 100px 50px;">
<p style="font-family: Arial, sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: 0.5px; text-align: left;">
{{content}}
</p>
</td>
</tr>
</table>
</body>{% when 'Brand 4' %}
<body style="background: #eeeeee; padding: 0 10px; margin: 0; font-family: 'Open Sans', sans-serif, Helvetica, Arial;">
<table width="800px" cellpadding="0" cellspacing="0" bgcolor="FFFFFF" style="background: #ffffff; max-width: 800px !important; margin: 0 auto; background: #ffffff;">
<tr>
<td style="text-align: center; padding: 5px 100px 0;">
<p href="#" style="color: #b7b7b7; font-size: 11px; letter-spacing: 0.2px;">{{delimiter}}</a>
</td>
</tr>
<tr>
<td width="200" style="width: 200px; text-align: left; padding: 50px 100px 0;">
<img src="Z:\First & Second Level\EMC 2\CCC\Help Center\XXX\XXX_Logo_OHNE_WUERFEL_CMYK_Schwarz.jpg" width="200"/>
</td>
</tr>
<tr>
<td style="text-align: left; padding: 20px 100px 50px;">
<p style="font-family: Arial, sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: 0.5px; text-align: left;">
{{content}}
</p>
</td>
</tr>
</table>
</body>{% else %}
<br />
{% endcase %}
{{content}}{% case footer %}
{% when 'Brand 1' %}
{{footer}}
<br />
<p>
<tr>
<td style="border-bottom: 1px solid #b0b0b0;">
</td>
</tr>
</table>
<table width="800px" cellpadding="0" cellspacing="0" bgcolor="f5f5f5" style="background: #f5f5f5; max-width: 800px !important; margin: 0 auto; background: #f5f5f5;">
<tr>
<td valign="top" style="text-align: left; padding: 20px 100px;">
<p style="font-family: Arial, sans-serif; font-size: 10px; line-height: 1.3; letter-spacing: 0.5px; text-align: left; color: #38403e">
© XXX<br />
XXX<br /><br />
USt-ID: DE XXX
</p>
</td>
</tr>
<p>
</body>
</html>{% when 'Brand 2' %}
{{footer}}
<br />
<p>
<tr>
<td style="border-bottom: 1px solid #b0b0b0;">
</td>
</tr>
</table>
<table width="800px" cellpadding="0" cellspacing="0" bgcolor="f5f5f5" style="background: #f5f5f5; max-width: 800px !important; margin: 0 auto; background: #f5f5f5;">
<tr>
<td valign="top" style="text-align: left; padding: 20px 100px;">
<p style="font-family: Arial, sans-serif; font-size: 10px; line-height: 1.3; letter-spacing: 0.5px; text-align: left; color: #38403e">
© XXX<br />
XXX<br /><br />
VAT-EU: DE XXX
</p>
</td>
</tr>
<p>
</body>
</html>{% when 'Brand 3' %}
{{footer}}
<br />
<p>
<tr>
<td style="border-bottom: 1px solid #b0b0b0;">
</td>
</tr>
</table>
<table width="800px" cellpadding="0" cellspacing="0" bgcolor="f5f5f5" style="background: #f5f5f5; max-width: 800px !important; margin: 0 auto; background: #f5f5f5;">
<tr>
<td valign="top" style="text-align: left; padding: 20px 100px;">
<p style="font-family: Arial, sans-serif; font-size: 10px; line-height: 1.3; letter-spacing: 0.5px; text-align: left; color: #38403e">
© XXX<br />
XXX<br /><br />
USt-ID: DE XXX
</p>
</td>
</tr>
<p>
</body>
</html>{% when 'Brand 4' %}
{{footer}}
<br />
<p>
<tr>
<td style="border-bottom: 1px solid #b0b0b0;">
</td>
</tr>
</table>
<table width="800px" cellpadding="0" cellspacing="0" bgcolor="f5f5f5" style="background: #f5f5f5; max-width: 800px !important; margin: 0 auto; background: #f5f5f5;">
<tr>
<td valign="top" style="text-align: left; padding: 20px 100px;">
<p style="font-family: Arial, sans-serif; font-size: 10px; line-height: 1.3; letter-spacing: 0.5px; text-align: left; color: #38403e">
© XXX<br />
XXX<br /><br />
T.V.A. LU XXX Numéro d´immatriculation XXX
</p>
</td>
</tr> </p>
</body>
</html>{% else %}
{{footer}}
<br />
</body>
</html>{% endcase %}
-
Hi,
I think it is great to see so many people engage and try to set up the email template to meet multibrand needs, but I think this points to the overall difficulty in doing this and that the current email template building expereince is extremely lacklustre.
It would be far better to follow suit with someone like Hubspot, where you have a UI builder that can be used to build an email template (with the option of working within markdown if you are so inclined). This would make the experience far more pleasent and easier to work with.
In addition, when an account has multibrand functionality, it would make sense to be able to configure an individual email template per brand. This template should also apply to those sent via the Help Centre, if you Follow an article.
At the moment, the email template experience is just mediocre compared with the competition on the market (including some cheaper alternatives).
-
Hi
I am trying to use condition base on the brand in the "Email template",
so I took one code script from one of the examples in this reponses, and it is not working. Of course I created the brands as descried in the "WHEN" statement.
Can someone explain to me why the code is not working
This is what I tried to run:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table td {
border-collapse: collapse;
}
</style>
</head>
<body style="width: 100%!important; margin: 0; padding: 0;">
<div style="padding: 10px ; line-height: 18px; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;">
<div style="color: #b5b5b5;">{{delimiter}}</div>
{{content}}
{% case footer %}
{% when 'This email is a service from Workforce Support.' %}
<div style="color: #9e9e9e; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #eeeeee;">
<p>This email is a service delivered by <a href="https://support.getworkforce.com" style="color:black" target="_new">Workforce Consultants</a>.</p>
</div>
</div>
</body>
</html>
{% when 'This email is a service from Payworks Support.' %}
<div style="color: #9e9e9e; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #eeeeee;">
<p>This email is a service delivered by <a href="https://support.gopayworks.com" style="color:black" target="_new">Payworks Support</a>.</p>
</div>
</div>
</body>
</html>
{% else %}
<div style="color: #9e9e9e; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #eeeeee;">
{{footer}}
<p> Delivered by Zendesk.</p>
</div>
</div>
</body>
</html>
{% endcase %} -
Hi Ayelet,
Are you noticing that the else condition is always true? Or are you not seeing footer content in the notification at all?
-
Hi Christopher,
It seems like the code is skipping "when" condition and jump to the "else" condition - even thought the ticket's brand is belong to "Payworks Support".
I do see the footer (as it supposed to be expose due to "else" condition)
-
Hi Ayelet,
Thanks for confirming. This could happen if the name used in the condition isn't an exact match to the actual brand name. Can you go to brand settings and copy the text from the Brand Name field to ensure that the names within the conditions match the stored brand name?
-
Thanks for this great tip! I was just testing, when I realised that in the border between Denmark and Germany, some might use a German language while writing to our danish support and others might use danish language and (by mistake) write to our German support - the text "This email is a service" seem to be translated by default?
Is it possible to force a language in that string? We are not using it anywhere else.
Thanks!
-
No, this is not translated. This is sent by the back end, and the back end has no means to know for sure what language the user actually has selected. Thus, this text is sent in any language you want as long as it's english.
This allows this template to catch the brand specific footer text and derive from that which brand the current mail is concerning.
There several entire mails like this, but these are absolutely non-configurable as they are sent out without using a mail template. This is why I made my feature request
https://support.zendesk.com/hc/en-us/community/posts/4408868241434-Feature-Request-Brandable-Welcome-Verification-and-Change-Password-Mails.
Please support it if you like it.
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
43 Kommentare