Persisting Customizable Chat Widget with Article Suggestions

Last Updated -

The Desk.com chat widget is highly customizable both in terms of styling and functionality. You would want to familiarize yourself with the Desk.com chat feature before reviewing these instructions.

What is Persisting the Chat Widget?
Persisting the Chat Widget means  that if your customer has a chat window open,  and decides to navigate around your support center, the chat window will follow them until they close it,  or until they end the chat. This means when a user clicks onto a new page, the chat pops back up and the chat session isn't interrupted.

What  are the requirements for Persisting the Chat Widget?
This persistence functionality is intended for use within your Desk.com hosted support center.  You can, however, embed this widget on external pages (i.e. your main website), but in order for the persistence functionality to work externally, the domain of the webpage you embed this widget on must match your Desk.com domain. For this reason, you'll need to set up a CNAME for your Desk.com site for the persistence to work when embedding this widget on external webpages. More info on this here.

Allow Frame Embedding
Because this chat widget does embed pages from your Desk.com site into other pages, you'll want to ensure 'Allow Frame Embedding' setting on your Desk.com Admin Panel is 'On'. To check this, visit Desk.com Admin   Channels  Support Center  Advanced Settings and turn 'Allow Frame Embedding' to 'On'.

Enable Scripting
Scripting needs to be  enabled for your site. If you have not already done so, you will need to contact Desk.com support to enable scripting for your site. If you receive this message while customizing the chat "All script tags must specify a src attribute the value of which must be an approved, whitelisted server and cannot enclose inline script."  Then you do not have scripting enabled.

What are Article suggestions?
When a customer types in their initial question in the chat widget, you can present them with a list of possible articles that already exist on your knowledge base that might address their question. A search is performed based on what the customer type in and a set of results are returned on screen in real time, as shown below:



We figured this custom chat solution might be useful to our customers too, so we've posted the full source code below. The 1st and 2nd code snippets below are for your chat widget theme. The 3rd link is the code your developer will need to insert onto your website. 

Source Code

  1. This is the code that you would copy and paste into the "New Chat Screen" . Enter this Header and Body code into the Chat Widget "New Chat Screen" theme.  Navigate to Admin Panel Channels  Chat Widgets New Chat Screen Add Theme. Select this as the default "New Chat Screen" theme. Here is the code: [View Source Code
  2. This is the code that you would copy and paste into the "Chat Connected Screen". Enter this Header and Body code into the Chat Widget "Chat Connected Screen" theme.  Navigate to Admin Panel  Channels  Chat  Widgets Chat Connected Screen  Add Theme). Select this as the default "Chat Connected Screen" theme. Here is the code: [View Source Code
  3. Here is the Embed Code that you would place on your main website if you were placing the widget externally or on your own website (ie: www.mycompany.com) . You would want your web developer to add this to the pages where the chat widget will  be displayed. Here is the code: [View Source Code