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

20 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

Please sign in to leave a comment.

Powered by Zendesk