Chat widget article suggest. Be sure to replace "YOUR-SITE.desk.com" with your Desk.com URL.

1-Header.html

<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">

.customer_inner_widget

{

padding-top:0px;

padding-bottom:20px;

padding-right:20px;

padding-left:20px;

}

</style>

2-Body.html

<div id="customer_widget_main" class="customer_widget">

<div class="inside_title" style="font-size:25px">{{site.company_name}} {{system.snippets.help_center}}</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 style="clear: both;"></div>
  
<div id="autosuggest" style="display: none;"></div>
<div id="common">
  <h4>Common Questions</h4>
  <p><i>This will show on page-load and if no results are found based on what the user is typing. You can optionally put links to common articles here.</i></p>
</div>

<script>
$(function() {
  
  // Skip pre-create
  $('#new_chat').attr('action','/customer/portal/chats');
  
  // Real-time auto-suggest
  $('#chat_subject').on("keyup paste",function() {
    if ($('#chat_subject').val().length > 3 && $('#chat_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 = $('#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('<h2 class="muted">Do these help?</h4><ul class="unstyled"></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);
    $("#common").hide();
    $(".autosuggest").removeClass('hide');
  } else {
    $(".autosuggest").addClass('hide');
    $("#common").show();
  }
};
  
apiFail = function(data) {
    
};
</script>

{{hidden_parameters }}

{{ submit_button }}

{{ interaction_info }}

</div><!--customer_inner_widget-->

</div><!--customer_widget_main-->