Support tip: How to structure the Zendesk email template to use custom HTML layouts for each of your Multiple Brands

24 Comments

  • Nicole - Community Manager
    Comment actions Permalink

    Thanks so much for sharing this, Andrew! We'll be sure to highlight it in this month's Community roundup!

    0
  • Ulrich Spies
    Comment actions Permalink

    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

    0
  • Andrew Soderberg
    Comment actions Permalink

    Ulrich Spies 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

    1
  • Andrew Soderberg
    Comment actions Permalink

    Ulrich Spies 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

    0
  • Jennifer Rowe
    Comment actions Permalink

    That's awesome, Andy. Thanks for providing the examples!

    0
  • Stuart Warren
    Comment actions Permalink

    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? 

    0
  • Andrew Soderberg
    Comment actions Permalink

    Stuart Warren 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. 

     

     

    0
  • Michael Adams
    Comment actions Permalink

    Andrew Soderberg 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>

    0
  • Andrew Soderberg
    Comment actions Permalink

    Michael Adams 

    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

     

    0
  • Michael Adams
    Comment actions Permalink

    Andrew Soderberg

    See below... I tested it out and now the footer doesn't pass at all.

    0
  • Andrew Soderberg
    Comment actions Permalink

    Michael Adams

    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

    0
  • Michael Adams
    Comment actions Permalink

    Andrew Soderberg 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 %}
    0
  • Andrew Soderberg
    Comment actions Permalink

    Michael Adams 

    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 %}
    0
  • Michael Adams
    Comment actions Permalink

    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? 

     

     

     

    0
  • Michael Adams
    Comment actions Permalink

    Andrew Soderberg

    0
  • Andrew Soderberg
    Comment actions Permalink

    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.

    0
  • Michael Adams
    Comment actions Permalink

    Andrew Soderberg I was hoping it to simply say

    This email is a service delivered by Workforce Consultants.

    Is that possible?

    0
  • Andrew Soderberg
    Comment actions Permalink

    Michael Adams 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>

     

     

     

    0
  • Michael Adams
    Comment actions Permalink

    That worked great! Thank you Andrew Soderberg. 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 %}
    0
  • Nicole - Community Manager
    Comment actions Permalink

    Thank you for coming back and sharing your solution, Michael! 

    0
  • Sheldon Grimm
    Comment actions Permalink

    Hi Andrew Soderberg,

    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! 

    0
  • Andrew Soderberg
    Comment actions Permalink

    Sheldon Grimm 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.

    1
  • Sheldon Grimm
    Comment actions Permalink

    Andrew Soderberg - 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?

    0
  • Devan - Community Manager
    Comment actions Permalink

    Hello Sheldon Grimm,

    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. 

    0

Please sign in to leave a comment.

Powered by Zendesk