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

37 Commentaires

  • Dave Dyson
    Zendesk Community Manager
    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!
    0
  • Chris Gregory

    Andrew Soderberg

    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

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    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!

    1
  • Regit

    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.

     

     

     

    0
  • Cheeny Aban
    Zendesk Customer Care
    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!
    0
  • Barbara Oesterling

    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 %}

    0
  • Stephen

    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).

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk