Created
July 3, 2014 21:11
-
-
Save DeskWOW/312ad8a6079eddfd7f79 to your computer and use it in GitHub Desktop.
"New Email Form" (Email Widget theme)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<title>{{ site.company_name }}</title> | |
<link rel="icon" type="image/vnd.microsoft.icon" href='{{ "/favicon.png" | portal_image_url: image_asset_host }}' /> | |
<link rel="icon" type="image/png" href='{{ "/favicon.png" | portal_image_url: image_asset_host }}' /> | |
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> | |
<style type="text/css"> | |
.hide { | |
display: none !important; | |
} | |
html { | |
height: 100%; | |
} | |
body { | |
position: relative; | |
top: auto; | |
right: auto; | |
bottom: auto; | |
left: auto; | |
text-align: left; | |
height: 100%; | |
color: #777; | |
line-height: 23px; | |
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; | |
font-size: 13px; | |
box-shadow: -1px 0 0 0 #e0e0e0; | |
background: #f7f7f7; | |
} | |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .x { | |
color: #777; | |
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; | |
font-size: 13px; | |
line-height: 23px; | |
} | |
.form_label { | |
font-size: 1em; | |
padding: 0; | |
color: #777; | |
text-transform: uppercase; | |
font-size: 12px; | |
font-weight: 600; | |
} | |
.customer_widget { | |
background: transparent; | |
box-sizing: border-box; | |
border: 0; | |
position: static; | |
font-size: 1em; | |
} | |
form { | |
padding: 0; | |
} | |
.customer_widget .inside_title { | |
background: #3498db; | |
border-bottom: 0; | |
} | |
.customer_widget .inside_title, | |
.customer_inner_widget { | |
padding: 15px; | |
} | |
.customer_widget .inside_desc { | |
background: url(//desk-customers.s3.amazonaws.com/shared/pencil_22.png) no-repeat 8px 8px; | |
background-size: 26px; | |
padding: 15px 45px 5px; | |
border: 0; | |
margin: 20px 10px 10px 10px; | |
} | |
.input { | |
margin-bottom: 15px; | |
} | |
input.default, | |
select.default, | |
textarea.default, | |
input[type=text], | |
input[type=number], | |
textarea { | |
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ | |
-moz-box-sizing: border-box; /* Firefox, other Gecko */ | |
box-sizing: border-box; /* Opera/IE 8+ */ | |
padding: 6px; | |
color: #555; | |
background-color: #fff; | |
border: 1px solid #e0e0e0; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); | |
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); | |
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); | |
-webkit-transition: border linear 0.2s,box-shadow linear 0.2s; | |
-moz-transition: border linear 0.2s,box-shadow linear 0.2s; | |
-o-transition: border linear 0.2s,box-shadow linear 0.2s; | |
transition: border linear 0.2s,box-shadow linear 0.2s; | |
} | |
input.default:focus, textarea.default:focus, input:focus, textarea:focus, select.default:focus, input.ui-autocomplete-input:focus, .ui-state-focus { | |
border: 1px solid #d3d3d3; | |
} | |
.submit { | |
cursor: pointer; | |
line-height: 19px; | |
text-align: center; | |
color: white; | |
text-shadow: 0 -1px 0 rgba(0,0,0,0.25); | |
background-color: #25b160; | |
background-image: -moz-linear-gradient(top, #25b160, #25b160); | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#25b160), to(#25b160)); | |
background-image: -webkit-linear-gradient(top, #25b160, #25b160); | |
background-image: -o-linear-gradient(top, #25b160, #25b160); | |
background-image: linear-gradient(to bottom, #25b160, #25b160); | |
background-repeat: repeat-x; | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF25B160', endColorstr='#FF25B160', GradientType=0); | |
border-color: #25b160 #25b160 #18723e; | |
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); | |
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); | |
border: 1px solid #25b160; | |
padding: 7px 10px; | |
border-left: 1px solid #22a459; | |
min-width: 75px; | |
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
font-size: 13px; | |
} | |
ul { | |
list-style-type: disc; | |
padding-left: 30px; | |
} | |
.autosuggest { | |
background: #FFFBE4; | |
border: 1px solid #D1BB8F; | |
border-top: 1px solid #F1E2C4; | |
border-left: 1px solid #F1E2C4; | |
border-radius: 3px; | |
padding: 10px; | |
min-width: 300px; | |
display: inline-block; | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="customer_widget_main" class="customer_widget"> | |
<div class="inside_title">{{site.company_name}} {{system.snippets.help_center}}</div> | |
<div class="inside_desc">{{system.snippets.email_support}}</div> | |
<div style="color: red; padding: 21px;">Attention: This is just an example. Emails sent from this form will not be received by Desk.com</div> | |
<div class="customer_inner_widget" > | |
{% if current_user == nil or current_user.is_guest %} | |
<div class="input" ><span class="form_label">{{system.snippets.your_name}}:</span> | |
{{ interaction_name }} | |
</div> | |
<div class="input" ><span class="form_label">{{system.snippets.your_email}}:</span> | |
{{ interaction_email }} | |
</div> | |
{% endif %} | |
<div class="input"><span class="form_label">{{system.snippets.subject}}:</span> | |
{{ email_subject }} | |
</div> | |
<div class="input"><span class="form_label">{{system.snippets.message}}:</span> | |
{{ email_body }} | |
</div> | |
<div class="input autosuggest hide"> | |
<div class="article-links"></div> | |
</div> | |
<div class="input"><span class="form_label">File Attachment:</span> | |
<input class="default l widget_text_area" id="ticket_attachment_attachment" name="ticket_attachment[attachment]" style="height: 32px;" type="file"> | |
</div> | |
{{hidden_parameters }} | |
<button type="submit" class="submit">Submit</button> | |
{{ interaction_info }} | |
</div> | |
<!--customer_inner_widget--> | |
</div> | |
<!--customer_widget_main--> | |
<script> | |
$(function() { | |
// Real-time auto-suggest | |
$('#email_subject, #email_body').on("keyup paste",function() { | |
if ($('#email_subject').val().length > 3 && $('#email_subject').val().length <= 250) { | |
clearTimeout(window.timer); | |
window.timer=setTimeout(function(){ // setting the delay for each keypress | |
articleSuggest(); | |
}, 500); | |
} | |
}); | |
}); | |
articleSuggest = function() { | |
as_count = 0; | |
var search_query = $('#email_subject').val() + " " + $('#email_body').val(); | |
var systemLanguageDesk = '{{system.language}}'; | |
$.ajax({ | |
url: '//' + document.domain.toString() + '/customer/' + systemLanguageDesk + '/portal/articles/autocomplete?term=' + search_query, | |
dataType: 'json' | |
}).done(apiSuccess).fail(apiFail); | |
} | |
apiSuccess = function(data) { | |
auto_suggest_content = ""; | |
auto_suggest_articles = ""; | |
auto_suggest_questions = ""; | |
$('.autosuggest').html('<span class="form_label">Do these help?</span><ul></ul>'); | |
$.each(data, function() { | |
var html = $(this.label); | |
article_title = html.find(".article-autocomplete-subject").html(); | |
if (this.id.indexOf("questions") !== -1) { | |
auto_suggest_questions += '<li><a target="_blank" href="' + this.id + '" class="discussion">' + article_title + '</a></li>'; | |
} else { | |
auto_suggest_articles += '<li><a target="_blank" href="' + this.id + '" class="article">' + article_title + '</a></li>'; | |
} | |
as_count++; | |
}); | |
if (as_count > 0) { | |
$('.autosuggest ul').append(auto_suggest_articles + auto_suggest_questions); | |
$(".autosuggest").removeClass('hide'); | |
} else { | |
$(".autosuggest").addClass('hide'); | |
} | |
}; | |
apiFail = function(data) { | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The restriction on using custom <script> code presents standard users from deploying this code. Attempting to update an email widget throws the following error on the body input field:
"All script tags must specify a src attribute the value of which must be an approved, whitelisted server and cannot enclose inline script."