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.
使你的生活更容易和最后两个见面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 calledUsing 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 .
[HTML
sections and beginning HTML required before the delimiter placeholder.]{{delimiter}}
{% case footer %}
{% when 'This email is a service from [YOUR BRAND NAME A].' %}
[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]
{% else %}
[HTML Body generic intro HTML (for agents/groups)]
{% endcase %}
{{content}}
{% case footer %}
{% when 'This email is a service from [YOUR BRAND A].' %}
[HTML Body Brand A - specific footer HTML, including closing ]
{% when 'This email is a service from [YOUR BRAND B].' %}
[HTML Body Brand B - specific footer HTML, including closing ]
{% else %}
[HTML Body generic footer HTML, including closing ]
<--- 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. -->
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: {{ticket.brand.name}}
记住这是只需要焦油的触发器get 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
section developed to support all your brands. If this is not the case, then you can do the same for the HTML 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:{% case footer %}
{% when 'This email is a service from [YOUR BRAND NAME A].' %}
[HTML
sections and beginning HTML required before the {{delimiter}} for Brand A]{% when 'This email is a service from [YOUR BRAND NAME B].’ %}
[HTML
sections and beginning HTML required before the {{delimiter}} for Brand B]{% else %}
[HTML
sections and beginning '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
43 Comments