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
-
Thanks so much for sharing this, Andrew! We'll be sure to highlight it in this month's Community roundup!
-
Hi Andrew, thanks for sharing this awesome solution to show multiple brands within Zendesk email templates. Would you be so kind to send one sample ready to copy into the overall email template in order to make it work properly?
Thanks in advance!
Best,
Ulrich
-
@... I will work on an example HTML that you can use as a starting point. I should be able to have this done and posted by early next week (after the Thanksgiving weekend).
Andy
-
@... 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
All my best,
Andy
-
That's awesome, Andy. Thanks for providing the examples!
-
I have managed to set up multiple brands and everything is working great. However, when it comes to Gmail, the images seem to be broken. I am using SVGs for the images and have read online this could be the issue. Has anyone else experienced this before?
-
@... Doing a search for 'Gmail not displaying SVG images' I find these articles that confirm that Google doesn't support SVG images:
https://stackoverflow.com/questions/32981760/is-there-a-trick-to-display-svg-images-in-gmail
https://stackoverflow.com/questions/20815613/svg-images-blocked-by-gmail-proxy/21064771#21064771
This is not a Zendesk issue, but a restriction by Google not supporting SVGs in Gmail.
-
@... This rendered no footer in the email... what went wrong?
Im in the Email Channel under HTML template.
<!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}}
<div style="color: #9e9e9e; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #eeeeee;">
{% case footer %}
{% when 'Workforce Support' %}
{{footer}}
<p> Delivered by <a href="https://support.getworkforce.com/hc/en-us" style="color:black" target="_new">Workforce Consultants</a>.<p>
</body>
</html>{% when 'PayWorks Support' %}
{{footer}}
<p> Delivered by <a href="https://support.gopayworks.com/hc/en-us" style="color:black" target="_new">PayWorks</a>.<p>
</body>
</html>
{% endcase %}
</div>
</div>
</body>
</html> -
@...
Looking at your source you had a misplaced <div> tag, and a pair of closing </div> tags missing from each of your footer sections.
Also, even though you only have two brands, you need a third generic one (or a copy of one of the two) for the tickets that get sent automatically by Zendesk to the agent(s) or group that is responsible for approving community posts. Even if you don't require posts to be approved, add the third footer as I think there are other cases where Zendesk will send a ticket to an admin/agent that is not brand related. This third shadow brand emails are only sent internally (as long as your brand names are spelled correctly, see further below).
Here is my edited version of your code:<!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 'Workforce Support' %}
<div style="color: #9e9e9e; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #eeeeee;">
{{footer}}
<p> Delivered by <a href="https://support.getworkforce.com/hc/en-us" style="color:black" target="_new">Workforce Consultants</a>.<p>
</div>
</div>
</body>
</html>
{% when 'PayWorks Support' %}
<div style="color: #9e9e9e; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #eeeeee;">
{{footer}}
<p> Delivered by <a href="https://support.gopayworks.com/hc/en-us" style="color:black" target="_new">PayWorks</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 %}Also double check your Brand names. What is inside the quotes must match exactly what is found as the name in your Brand Name field for the brand(s) you want to use. If there is a mis-match the Liquid markup will skip past the footers and not include that in the email that is sent.
Do these two lines have the correct exact Brand name text between the quotes?
{% when 'Workforce Support' %}
{% when 'PayWorks Support' %}Regards,
Andrew
-
@...
See below... I tested it out and now the footer doesn't pass at all.
-
@...
Ahh, sorry, I see the error I made. In the latest source code I provided you will need to replace the following two lines:
Replace this:
{% when 'Workforce Support' %}With this:
{% when 'This email is a service from Workforce Support.’ %}And then replace this:
{% when 'PayWorks Support' %}With this:
{% when 'This email is a service from PayWorks Support.’ %}The Liquid markup is looking for the full sentence that is the value for the attribute {footer}
That sentence is made up of "This email is a service from " + "BRAND NAME" + "."
Your email template should now work as expected.
Sorry for not catching my own short hand.
Regards,
Andrew
-
@... Still not working.
<!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;">
{{footer}}
<p> Delivered by <a href="https://support.getworkforce.com/hc/en-us" 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;">
{{footer}}
<p> Delivered by <a href="https://support.gopayworks.com/hc/en-us" style="color:black" target="_new">Payworks</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 %} -
@...
Ok... I created two brands in my Zendesk and tested this code. It now works.
The {% when 'text' %} statements had a 'curly' quote character that caused it to fail the footer compare test. I also added the missing '%' characters in the {% else %} line.
Note that you do not have to include the {{footer}} line in the footer HTML block if you don't want to include it.
Sorry for the delay in getting you accurate code.
Regards,
Andrew
Copy the following into your email HTML template:
<!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;">
{{footer}}
<p> Delivered by <a href="https://support.getworkforce.com/hc/en-us" 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;">
{{footer}}
<p> Delivered by <a href="https://support.gopayworks.com/hc/en-us" style="color:black" target="_new">Payworks</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 %} -
That did work... but is it possible to have it all in a one line footer like I had before adding the 2nd brand... instead of 2 line footer?
-
@...
-
Try this:
<p> {{footer}} Delivered by <a href="https://support.getworkforce.com/hc/en-us" style="color:black" target="_new">Workforce Consultants</a>.</p>It should give you this:
This email is a service from Workforce Consultants Support. Delivered by Workforce Consultants.
Again, the {{footer}} is optional. -
@... I was hoping it to simply say
This email is a service delivered by Workforce Consultants.
Is that possible?
-
@... Yes, as I have said, the {{footer}} is optional. so instead of this:
<p> {{footer}} Delivered by <a href="https://support.getworkforce.com/hc/en-us" style="color:black" target="_new">Workforce Consultants</a>.</p>Use this:
<p>This email is a service delivered by <a href="https://support.getworkforce.com/hc/en-us" style="color:black" target="_new">Workforce Consultants</a>.</p>
-
That worked great! Thank you @.... I posted the full code below to help the community.
<!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 %} -
Thank you for coming back and sharing your solution, Michael!
-
Hi @...,
First off, thank you for sharing this tutorial. Incredibly useful as we look to expand our use of multi-brand while maintaining whitelabel capabilities.
Only hiccup I've ran into and can't seem to solve for is notifications generated by Community posts/comments. These seem to inherit ALL the templates vs. following the if/else liquid markup.
All my unique brand templates apply appropriately to tickets associated with each brand, but not anything Guide/Gather/Community related.
Would you know of any way around this or is this not a problem in your instance?
Thank you! -
@... Thanks, glad to have helped. And yes, regarding the Community posts/comments, we have found the same issue. I have submitted a bug ticket to Zendesk on this. The problem is that the section of code in Zendesk that sends out those messages; 1. does not have a UI exposed anywhere to give you any control over those emails. 2. Does not use the same email code as the ticket system, in that they forgot (or omitted, thinking it was not necessary) the Liquid Markup engine to parse the {% code %} expressions. Since this is missing, the logic is ignored and all the headers and footers are sent with those emails.
I would greatly appreciate it if you would also submit a bug ticket to Zendesk regarding this, as this issue renders this elegant use of the single email template and their Liquid Markup to properly represent Brands to end up as email garbage for these Community posts/comments/approval emails, etc.
-
@... - I'll gladly submit a bug to Zendesk. Have you posted product feedback related to this topic that I can also add an upvote to or my company's use-case?
-
Hello @...,
I've actually opened up a ticket on this issue for you so one of our specialists can look into this deeper for you. You should receive an email followed by a response from one of our Advocates.
Best regards.
-
Devan - Community Manager
Has there been any update on this? I put in a ticket to advocacy in April 2020 and was quickly pointed to the dated article (2 + years) talking about leveraging triggers to do this in order to work around shortcomings with the guide notices... -
Hello @...,
I reached out to our support team, and right now, this is still being investigated. We are looking to get some clarification this soon, and the moment I have an update, I'll be sure to let you know.
Best regards.
-
Hi,
Indeed this thread would have helped many. I have also been able to send emails with varying footer (banners) based on ticket’s brand. While distinct footers successfully deliver to end users, it’s the agents that receive email notifications without the banner. Instead they get default footer text. Any idea why?
Just for information, I’m having 5 brands. for three I use triggers to format the email body, Out of remaining two, one (the last one) has two footers that are sent based on the brand the ticket belongs to. Just to remind end users are getting them but the agents don’t.
Thanks
-
Raman Kalia
I ran into the same issue, this is due to the fact that the {% footer %} content changes dramatically when sending emails to other agents (it includes information on the ticket, which is not usually viewable to end users).
To ensure the branding works for emails sent to agents as well, I found the following liquid markup can be used instead:{% assign check = footer | split: "This email is a service from " %} {% case check[1] %} {% when 'BRAND NAME.' %}
//insert content
{% when 'OTHER BRAND NAME.' %}
//insert content
{% endcase %}This will work for both end users and agents, and simply splits off the additional code that is added when emailing agents and will return the brand name, which can then be used for the when statement.
Andrew Soderberg Thanks for the great guide, this might be a helpful inclusion :) -
Unfortunately we are running into the same thing that Sheldon Grimm mentioned. I created the following:
-
We have 4 brands and use Andrew’s code to show the correct logo for general ticket emails where the footer equals “This email is a service from [BRAND]“. It works perfectly, but for the Guide/Community emails, as Kyle mentions, liquid will not run. This results in all 4 logos showing. Since liquid cannot be used our only solution was to hide the brand logos for these types of emails. This is how we did it:
<div {% if false %} style=“display: none” {% endif %}>
{% case footer %}
{% when “This email is a service from Brand1.” %}
<img src=“Brand1Logo”>
{% when “This email is a service from Brand2.” %}
img src=“Brand2Logo”>
{% when “This email is a service from Brand3.” %}
img src=“Brand3Logo”>
{% when “This email is a service from Brand4.” %}
img src=“Brand4Logo”>
{% endcase %}
</div>The above liquid script is designed to hide the ‘display: none’ style when liquid has been compiled. If liquid is not compiled (is a Guide/Community email) ‘display: none’ will be applied to the div, hiding the logos. If liquid is compiled ‘display: none’ will be removed revealing the logos and running through the case/when code as expected.
Note: Aside from the email not being branded the other issue is that all emails from Guide/Community will now have a hidden div containing the logos. It’s understood that emails with hidden divs containing text and images aren’t very desirable and could end up in spam.
It's also less than desirable that our emails now look less professional, with no branding included.
Please sign in to leave a comment.
43 Comments