Skip to content

Instantly share code, notes, and snippets.

@scotthargroves

scotthargroves/Notification Style Reply Theme.html

Created January 18, 2017 05:44
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/bcac837d482389d1cd21ae8c01fa68ec to your computer and use it in GitHub Desktop.
Save scotthargroves/bcac837d482389d1cd21ae8c01fa68ec to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Notification Style Reply Theme.html
<table style="margin: 5px 15px 0 0; padding: 0px; background-color: #f9f9f9; border: 0px solid #e9e9e9; width: 100%; font-family: 'Open Sans',sans-serif; font-weight: 300; line-height: 19px; font-size: 13px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" style="background-color:#3498db;padding-top:10px;padding-bottom:10px;color:#fff;width:100%;text-align:center;font-weight:300;">
<tbody><tr>
<td>
<span>{{system.snippets.response_above_this_line}}</span>
</td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="color:#333; font-family:Arial; font-size:14px; line-height:150%; text-align:left;">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div>
<h2 style="font-family: arial,sans-serif; color: #555; font-size: 18px; font-weight: 300;">{{email.subject}}</h2>
<div style="border: 1px solid #e9e9e9; background-color: white; padding:25px;">
{% 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 %}
</div>
<br />
{% if site.portal_authentication_enabled_config %}
{% if site.myportal_enabled %}
<table cellspacing="0" cellpadding="0" border="0" style="width:100%">
<tbody><tr>
<td>&nbsp;</td>
<td style="overflow:hidden;padding-top:10px;padding-bottom:10px;background-color:#e95445;width:185px; text-align: center;">
<a id="view-case" href="https://{{site.subdomain}}.desk.com/customer/{{system.language}}/portal/private/cases/{{case.id}}" style="color:#fff;text-decoration:none;text-align:center" target="_blank">View Case</a>
</td>
<td>&nbsp;</td>
</tr>
</tbody></table>
{% endif %}
{% endif %}
<div style="background-color:#fafafa; border:0; font-size:80%; padding:2px; border-top: 1px solid #e9e9e9; margin-top: 25px; padding-top: 25px; text-align: center; color: #999; font-weight: 300; font-size: 13px;"> {{system.snippets.message_was_sent_to}} {{case.customer.email}} {{system.snippets.in_reference_to_case}}{{case.id}}.
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment