22

Add a placeholder for formatted comment values -- maybe {{comment.value_formatted}}

Fellow Zendeskers- if you need this feature too, you have to vote with your clicks and comments to show the Zendesk developers.

  1. Click the up arrow above and to the left.
  2. Click "Follow" above and to the right.
  3. Most importantly- scroll to the bottom and leave a comment explaining your specific use-case scenario. It needn't be detailed like mine here. Just a few sentances will suffice to show your support and need for this feature. Thanks!!

 

Overview

I want to create notifications which look like Outlook emails but which also include rich formatting for links and images. My request is not unique. At the bottom of this feature request, you'll see the other 6 posts asking for a similar feature.

 

Example Screenshots

Here are a few screenshots showing the same exact conversation replicated a few different ways. Hopefully these screenshots will show the desired result and also how each of the current options falls short.

 

Outlook native email conversation.

The screenshot below doesn't use Zendesk at all. This is how we want our Zendesk conversations to look-- or at least as close to this as possible. The thing lacking in this example is obviously that it's not routed through Zendesk and hence not trackable as a ticket.

Using the placeholder {{ticket.comments_formatted}}

The two screenshots below show this same conversation using Zendesk's placeholder {{ticket.comments_formatted}} with and without picture downloading. Both of these screenshots show how the formatting doesn't match that of native email communication.

Using the placeholder {{comment.value}}

The final screenshot shows the same conversation using Zendesk's placeholder {{comment.value}} and others. It also utilizes liquid markup.

My attempt

For now, I have opted to go with the last option above. It seems to get us about 90% of what we want using the code below. The long challenge seems to be that the placeholder {{comment.value}} strips out links and inline images which we insert via the Answer Suggestions app and the Rich Content editor, respectively.

Links which are spelled out entirely (starting with http) work fine because most email readers will convert those hyperlink automatically. The problem we are seeing, though, is that when we use the Answer Suggestions app to insert more friendly looking text linked to an article in our Help Center, those kind of links are not showing up for the recipient as links, only plain text.

Images which are attached or placed inline using the new Rich Content editor (which is awesome by the way, everyone should take a look at it) are replaced with URL links to those images. The links are functional but this is still less than ideal since the recipient has to click a link, or possibly multiple links, to get to the images an agent might be sending to show then how to solve their issue.

 

Email template HTML

<!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;

}

{{styles}}

</style>

</head>

<body {{attributes}} 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>-->

<div style="color: #FFFFFF;">{{delimiter}}</div>

{{content}}

<!--<div style="color: #aaaaaa; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #eeeeee;">

</div>-->

</div>

</body>

</html>

 

Email notification body

<div style="color:#15317E">

{{ticket.latest_public_comment}}{% for comment in ticket.public_comments offset:0 limit:1 %}{% if comment.attachments.size > 0 %}<br /><br />Attachments:{% for attachment in comment.attachments %}<br />{{forloop.index}}. <a href="{{attachment.url}}">{{attachment.filename}}</a> ({{attachment.url}}){% endfor %}{% endif %}{% endfor %}

{% for comment in ticket.public_comments offset:1 %}

</div>

<hr style='margin-top:0;margin:0;padding:0;color:#BCC6CC;height:.5px;'/>

<b>From: </b>{{comment.author.name}}

<b>Sent: </b>{{comment.created_at_with_time}}

<div style="margin-top: 20px">{{comment.value}}{% if comment.attachments.size > 0 %}<br /><br />Attachments:{% for attachment in comment.attachments %}<br />{{forloop.index}}. <a href="{{attachment.url}}">{{attachment.filename}}</a> ({{attachment.url}}){% endfor %}{% endif %}<br />{% endfor %}{% for comment in ticket.public_comments offset:1 %}</div>{% endfor %}

 

My request to Zendesk

I’m not the only one asking for this or something very similar. Please take a look at the requests below. I mention them here to show the existing support for this feature.

I also want to acknowledge that it seems a contradiction of terms to want a formatted version of an “unformatted” email template. I think what most of us are going for is a more beautiful design without all of the embellishments built into the Zendesk formatted comments placeholder {{ticket.comments_formatted}}.

 

Stats and examples for similar requests

  • At least 6 requests for this or a similar feature
  • Initially requested in March of 2010
  • Follows = 41
  • Thumbs up = 32
  • Comments = 38

The post “Support markdown formatted {{comment.value}}” by Ankara Goyal on 3/20/2014 is asking for the same thing I am but limited to markdown. https://support.zendesk.com/hc/en-us/community/posts/203445426-Support-markdown-formatted-comment-value-

The post “Make _formatted comment arrays accessable in Liquid” by Martijn Snels on 2/18/2016 is asking for the exact same thing.

https://support.zendesk.com/hc/en-us/community/posts/209279027-Make-formatted-comment-arrays-accessable-in-Liquid?input_string=Add%20a%20placeholder%20for%20formatted%20comment%20values%20--%20maybe%20%7B%7Bcomment.value_formatted%7D%7D

The post “Allow markdown in unformatted emails” by Noah on 5/4/2015 is asking for essentially the same thing I’m asking for.

https://support.zendesk.com/hc/en-us/community/posts/203556508-Allow-markdown-in-unformatted-emails

The post “Allow any placeholder in the email html template” by Martijn on 4/9/2010 seems related to my request, especially some of the commenters who have the exact problem I’m describing. https://support.zendesk.com/hc/en-us/community/posts/203423486-Allow-any-placeholder-in-the-email-html-template

The post “Add Markdownify filter to Liquid Markup” by Andrew Bowman on 11/14/2013 seems to be asking for a similar feature. https://support.zendesk.com/hc/en-us/community/posts/203441346-Add-Markdownify-filter-to-Liquid-Markup

The post “Edit output of data placeholders” by Nicola Mustone on 4/24/2014 is also asking for a similar thing. https://support.zendesk.com/hc/en-us/community/posts/203446576-Edit-output-of-data-placeholders

There’s also this GitHub post “Notify-requester-of-comment-update.liquid” by Jared Armstrong on 6/17/2014 which appears to be attempting something similar (though I’m not nearly qualified to understand this code). https://gist.github.com/armstrjare/110d1d72e954626dfe39/revisions

 

For reference and to give credit where credit is due…

I was turned on to the idea of doing a differently formatted email with the great post “Setting up an unformatted email template”by Joseph Black. https://support.zendesk.com/hc/en-us/articles/203661346-Setting-up-an-unformatted-email-template. My code above is mostly pulled from his post and comments to the post.

A reference for all placeholders can be found in the post “Zendesk placeholders reference” by Anton de Young. https://support.zendesk.com/hc/en-us/articles/203662156-Zendesk-placeholders-reference?page=6#topic_jkz_opl_rc

A reference for liquid markup used in the code above can be found in the post “Using Liquid markup to customize comments and email notifications” by Anton de Young. https://support.zendesk.com/hc/en-us/articles/203662146-Using-Liquid-markup-to-customize-comments-and-email-notifications#topic_xkn_sqh_jc

12 comments

  • 3

    I'd like get a comments_formatted object that is exposed to liquid markup, where you can iterate over each comment, as well.

    My use case is that I'd like to use liquid markup to better control which comments are sent out in email notifications. 

    I'd also like to highlight or remove emailing attachments from individual comments.

  • 0

    Adding my thumbs up and use case here as well..

    We were previously using custom formatting with liquid to be able to remove some repeated legalese at the bottom of certain emails. This worked really well but we had to sacrifice the use of HTML formatting in emails to accomplish it. I almost started work on a custom markdown interpreter built with liquid but eventually gave up on it due to complexity.

    We have since switched to just using the standard formatted comments array because the recent updates to html emails and wysiswyg editing have made those features more valuable to us than the annoyance of the legalese.

    Would love to have this feature as well!

    Ps, sorry I can't provide a screenshot of the legal text without approval but trust me, it's long, and it has no business being in ticket emails.

  • 0

    Hello Justin,  are you trying to allow people to read the messages in their own preferred text format in Outlook?

    The display of text in outlook can be significantly changed by user settings right?

    First thing you could do to make the emails look more similar is to turn on your photo in the Zendesk email :-)

    What do you consider are the significant differences between your Outlook pic and your Zendesk v1b with images?  (because turning images on would affect the Outlook one too)

     

  • 0

    @AndrewJ - Thanks for the reply. I appreciate your input as always. I'm trying to have Zendesk notifications (emails) look more similar to Outlook emails.

    What do your mean by "preferred text format". Most users will never mess with the display settings in Outlook itself so I'm not concerned with that.

    As for turning on photos in emails from Zendesk-- that's a whole other battle I think I may never win with our Exchange admins. I'd love to know if anyone has had any success whitelisting Zendesk.com for images embedded in emails but I have been told it is impossible.

    The difference between v1b and Outlook can be seen visually in the comparison below. First there's the big white space at the top of the email. I turned the mail delimiter white but have yet to find a way to reduce the top padding. Then the color of the text in the body-- Outlook shows the most recent message in blue text to set it apart from the other previous emails which are shown in black text. Then there's the topmost horizontal line that exists in the v1b version (it's hard to see in the small images here). It's strange to have a line above the first part of an email message. I think I remember that the only way to make that go away was to remove all horizontal lines between subsequent messages by formatting it white (which we do want since Outlook has grey lines between messages). Lastly, there's stuff not in the screenshot here. In Outlook, you can see who was CCd on the current and previous emails.

  • 0

    Yeah - I get you.  

    What about the risk of people commenting on lower parts of the email?  The helpdesk lines are there to explain how it works.  It's NOT just an email... and clients may need to understand that.

    Have you tried using CSS to change the line heights?

  • 0

    Have to +1 this.

    @Andrew Mills - There is always going to be a risk of people commenting on lower part of emails... after all, you can't entirely eliminate user error. 99% of the time people have half a brain to simply click "reply" and type in the head of a new email.

    In that rare case when someone types "Please see my responses below" and typed below the line, you can always open up the original HTML email to see what was typed.

    Depending on how people are using Zendesk, it's important sometimes to make it look like they are receiving a regular email.

    Even right now we are evaluating whether to move forward with Zendesk based on this one feature "Make emails look like emails, not tickets".

    What we want to achieve: 

    Removal of the blank white space, persons name and all the other formatting before the last response.

    Can't use CSS to change formatting all the time:

    This is half true, but it also depends on the email client. Even using the right CSS to manipulate the current formatted elements will produce funky and different results depending on the email client which the email is being opened on.

    How are we doing this right now:

    Like what Justin said above, we are using unformatted comments to make the email look like a real email - downside is you can't have any HTML formatting in that last comment.

    Hope this helps in pushing the feature forward!!! Seems there is a growing requirement to have more control over the email templates.

  • 0

    After a day of testing and playing around, i have an outcome with works on 90% of email clients. I've posted the link below which has all the code for the email templates.

    http://moometric.com/integrations/zendesk/make-zendesk-tickets-look-like-real-emails/

  • 0

    Hello Nathan - looks good - it would be great if you would make a tutorial in the community here... or if you like I could do that for you... Let me know. :)

  • 3

    This is a big one for us as well. We want the "unformatted" look of email as well, but still support for embedded images, rich text (eg bold, italics, etc) without the impersonal feeling of the ticket.last_comment_formatted default formatting.

    If we could have a comment.value that processes the markdown formatting instead of just exposing it as plain text, that would be ideal.

    Example using comment.value:

  • 0

    Hi Guys,

    When you have turned the rich text editor some of this is actually possible with liquid. The idea behind it is using inline styles so it works across multiple clients.

    It will handle inline images, and append attachments at the bottom.
    Let me know what you think. Please make sure you deactivate the show profile pictures in your channel

    Check out the code.

    Let me know what you think!

  • 0

    Hey @Kay - RealConnections (NL) 

    That worked perfectly for what I was trying to accomplish except for it stripped my signature. Could you direct me to which part of the code I can add or remove to bring my agent signature back in? Thank you! 

  • 0

    Hi @Kay - RealConnections (NL)

     

    I also got the unformatted template to work, thank you. The only issue I'm seeing now is that it still does not feel like an email conversation with the user. Replies from the ZenDesk agent are all present (i.e. public comment history) in every email that is sent to the user. It would be nice if only the most recent comment was sent since these days, most email clients retain a history of all comments, it seems a little redundant to send old comments in every new email. Any suggestions?

Please sign in to leave a comment.