-
-
Save DeskWOW/712dab58d4688b461bc5 to your computer and use it in GitHub Desktop.
Chat Widget "New Chat Screen" 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
<script> | |
document.cookie="chat_id=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;domain=.desk.com;"; | |
</script> | |
<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 }}' /> | |
<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, .widget_button_extra_chat { | |
text-align: left; | |
position: static; | |
margin: 0; | |
border-radius: 3px; | |
cursor: pointer; | |
line-height: 19px; | |
text-align: center; | |
color: white; | |
text-shadow: 0 -1px 0 rgba(0,0,0,0.25); | |
background: #25b160; | |
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" style="font-size:25px"> | |
<img src="http://www.desk.com/resources/common/css/img/desk-logo.png"> | |
</div> | |
<div class="inside_desc">{{system.snippets.chat_support}}</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 class="form_label_required">({{system.snippets.optional}})</span></span> | |
{{ interaction_email }} | |
</div> | |
{% endif %} | |
<div class="input"><span class="form_label">{{system.snippets.question}}:</span> | |
{{ chat_subject }} | |
</div> | |
<div class="input autosuggest hide"> | |
<div class="article-links"></div> | |
</div> | |
{{hidden_parameters }} | |
{{ submit_button }} | |
{{ interaction_info }} | |
</div><!--customer_inner_widget--> | |
</div><!--customer_widget_main--> | |
<script> | |
$(function() { | |
// Real-time auto-suggest | |
$('#chat_subject').on("keyup paste",function() { | |
if ($('#chat_subject').val().length > 3) { | |
clearTimeout(window.timer); | |
window.timer=setTimeout(function(){ // setting the delay for each keypress | |
articleSuggest(); | |
}, 500); | |
} | |
}); | |
}); | |
articleSuggest = function() { | |
as_count = 0; | |
var search_query = $('#chat_subject').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