Skip to content

Instantly share code, notes, and snippets.

@scotthargroves

scotthargroves/Reply Theme Agent V3 with CSAT.html

Last active January 30, 2017 22:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scotthargroves/2fe3fb29a2fd34132036 to your computer and use it in GitHub Desktop.
Save scotthargroves/2fe3fb29a2fd34132036 to your computer and use it in GitHub Desktop.
Download ZIP
A Reply Theme to match the look and feel of Agent V3.
Raw
Reply Theme Agent V3 with CSAT.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
</head>
<body style="margin: 0;padding: 0;font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #ffffff;">
<!-- CASE SUBJECT AREA -->
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<tr style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<td style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<div class="subject-bar" style="width: 100%;background: #fff;min-height: 32px;height: auto;color: #a7a7a7;font-family: inherit;font-weight: 300;line-height: 19px;text-rendering: optimizelegibility;font-size: 14px;border-bottom: 2px solid #EEE;padding-left: 30px;padding-top: 13px;">
Re: {{case.subject}} <span style="font-weight: 400;height: 45px;margin-left: 15px;padding-left: 20px;padding-right: 15px;margin-right: 15px;font-size: 12px;text-transform: uppercase;color: #444;background: url(https://s3.amazonaws.com/desk-customers/reply-theme/arrow.jpg) no-repeat 2px;">Case #{{case.id}}</span>
</div>
</td>
</tr>
</table>
<!-- CASE SUBJECT AREA ENDS -->
{% for email in case.emails reversed %}
{% if email.agent %}
<table class="email-body" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;height: auto;overflow: hidden;color: #777;font-family: inherit;font-weight: 300;line-height: 19px;text-rendering: optimizelegibility;font-size: 13px;padding-bottom: 30px;border-bottom: 1px solid #EEE;padding-top: 30px;position: relative;">
<!-- EMAIL HEADING INFO START -->
<tr style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<!-- AVATAR START -->
<td class="email-body-avatar" style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;width: 95px;height: 80px;text-align: right;">
<img src="{{ case.user.email | gravatar_url: gravatar_unknown_user, ssl }}" style="border-radius: 50px;width: 50px;height: 50px;min-height: 50px;max-height: 50px;"/>
</td>
<!-- AVATAR END -->
<!-- TO AND FROM ON THE LEFT - DATE ON THE RIGHT - START -->
<td style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<div class="email-body-text" style="margin-left: 30px;padding-right: 30px;height: auto;overflow: hidden;font-size: 13px;color: #444;">
<div class="email-body-from" style="margin-bottom: 30px;color: #ccc;">
<span style="font-weight: 600;color: #000;">{{ email.agent.name_public }} wrote:</span><span style="float: right; color: #000;font-size: 13px;">{{email.send_at | in_time_zone: site.timezone | date: "%b %d, %Y %I:%M %p"}}</span><br>
To You
</div>
<!--<div class="date" style="position: absolute;top: 30px;right: 30px;color: #000;font-size: 13px;">{{ email.send_at | date: "%d %b %Y" }} </div>-->
</div>
</td>
<!-- TO AND FROM ON THE LEFT - DATE ON THE RIGHT - END -->
</tr>
<!-- EMAIL HEADING INFO END -->
<tr style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<!-- BLANK CELL START -->
<td style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
</td>
<!-- BLANK CELL END -->
<td style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<div class="email-body-text" style="margin-left: 30px;padding-right: 30px;height: auto;overflow: hidden;font-size: 13px;color: #444;">
{{ email.new_html }}
<!-- AGENT SIGNATURE AREA -->
{% if email.agent.signature %}
<div style="margin-top:10px;">{{ email.agent.signature | newline_to_br }}
</div>
{% endif %}
<!-- AGENT SIGNATURE AREA -->
<!-- CSAT SECTION IF FEATURE IS TURNED ON -->
{% if email.has_customer_feedback? %}
<div id="section-customer-feedback" style="background-color:#ffffff; border:0; margin-top: 10px;">
<div id="customer-feedback-question" style="margin-bottom:10px; font-weight:bold;">{{email.customer_feedback.question}}</div>
{% if email.customer_feedback.yes_no_rating? %}
<span class="customer-feedback-rating">
<a href="{{email.customer_feedback.rating0_link}}"><img style="vertical-align:middle;" src="{{email.customer_feedback.rating0_yes_no_img}}" alt="{{system.snippets.customer_feedback_poor}}" title="{{system.snippets.customer_feedback_poor}}"></a>
</span>
<span style="margin: 0 10px 0 10px;">&nbsp;</span>
<span class="customer-feedback-rating">
<a href="{{email.customer_feedback.rating3_link}}"><img style="vertical-align:middle;" src="{{email.customer_feedback.rating3_yes_no_img}}" alt="{{system.snippets.customer_feedback_good}}" title="{{system.snippets.customer_feedback_good}}"></a>
</span>
{% endif %}
{% if email.customer_feedback.four_star_rating? %}
<span class="customer-feedback-rating">
<a href="{{email.customer_feedback.rating0_link}}"><img style="vertical-align:middle;" src="{{email.customer_feedback.rating0_four_star_img}}" alt="{{system.snippets.customer_feedback_poor}}" title="{{system.snippets.customer_feedback_poor}}"></a>
</span>
<span style="margin: 0 10px 0 10px;">&nbsp;</span>
<span class="customer-feedback-rating">
<a href="{{email.customer_feedback.rating1_link}}"><img style="vertical-align:middle;" src="{{email.customer_feedback.rating1_four_star_img}}" alt="{{system.snippets.customer_feedback_fair}}" title="{{system.snippets.customer_feedback_fair}}"></a>
</span>
<span style="margin: 0 10px 0 10px;">&nbsp;</span>
<span class="customer-feedback-rating">
<a href="{{email.customer_feedback.rating2_link}}"><img style="vertical-align:middle;" src="{{email.customer_feedback.rating2_four_star_img}}" alt="{{system.snippets.customer_feedback_good}}" title="{{system.snippets.customer_feedback_good}}"></a>
</span>
<span style="margin: 0 10px 0 10px;">&nbsp;</span>
<span class="customer-feedback-rating">
<a href="{{email.customer_feedback.rating3_link}}"><img style="vertical-align:middle;" src="{{email.customer_feedback.rating3_four_star_img}}" alt="{{system.snippets.customer_feedback_great}}" title="{{system.snippets.customer_feedback_great}}"></a>
</span>
{% endif %}
</div>
{% endif %}
<!-- CSAT SECTION ENDS -->
</div>
</td>
</tr>
</table>
{% else %}
{% if forloop.last %}
{% endif %}
<!-- FIRST REPLY -->
<table class="email-body" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;height: auto;overflow: hidden;color: #777;font-family: inherit;font-weight: 300;line-height: 19px;text-rendering: optimizelegibility;font-size: 13px;padding-bottom: 30px;border-bottom: 1px solid #EEE;padding-top: 30px;position: relative;">
<!-- EMAIL HEADING INFO START -->
<tr style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<!-- AVATAR START -->
<td class="email-body-avatar" style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;width: 95px;height: 80px;text-align: right;">
<img src="{{ case.customer.email | gravatar_url: gravatar_unknown_user, ssl }}" style="border-radius: 50px;width: 50px;height: 50px;min-height: 50px;max-height: 50px;"/>
</td>
<!-- AVATAR END ->>
<!-- TO AND FROM ON THE LEFT - DATE ON THE RIGHT - START -->
<td style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<div class="email-body-text" style="margin-left: 30px;padding-right: 30px;height: auto;overflow: hidden;font-size: 13px;color: #444;">
<div class="email-body-from" style="margin-bottom: 30px;color: #ccc;">
<span style="font-weight: 600;color: #000;">You wrote:</span>
<span style="float: right; color: #000;font-size: 13px;">{{email.send_at | in_time_zone: site.timezone | date: "%b %d, %Y %I:%M %p"}}</span>
<br>
To {{site.company_name}}
</div>
<!--<div class="date" style="position: absolute;top: 30px;right: 30px;color: #000;font-size: 13px;">{{ email.send_at | date: "%d %b %Y" }}</div>-->
</div>
</td>
<!-- TO AND FROM ON THE LEFT - DATE ON THE RIGHT - END -->
</tr>
<!-- EMAIL HEADING INFO END -->
<tr style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<!-- BLANK CELL START -->
<td style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
</td>
<!-- BLANK CELL END -->
<td style="margin: 0;padding: 0;border-collapse: separate;border-spacing: 0;">
<div class="email-body-text" style="margin-left: 30px;padding-right: 30px;height: auto;overflow: hidden;font-size: 13px;color: #444;">
{{ email.new_html }}
</div>
</td>
</tr>
</table>
{% endif %}
{% unless forloop.last %}
{% endunless %}
{% endfor %}
</body>
</html>
@scotthargroves
Copy link
Author

Agent Avatar - Only works when the Case they are replying to is Assigned to them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment