Customizing the Live Chat Button

Last Updated -

Overview provides a Chat channel that you can use to communicate with your customers in real time.

Note: Before you start editing or adding a new Chat Widget theme, you first need to have scripting enabled (whitelisted) for your Desk site. To do this, email and request scripting enablement for your site.

If you use the Chat Widget, you can change the "Live Chat" button's availability with the following options:
  • Always Available 
  • Only when Agents are online 
  • When Routing is enabled  
  • Offer email if chat is unavailable 
To conveniently let users know when Chat is available, different images can be used. For efficiency, these images can be compiled into one file. The "on" and "off" states of the button are contained within this image, also known as "sprite".  By shifting the background position, it is possible to display the button in its different states. To add this feature on your Help Center, follow these steps.

First, go to the Admin Panel, click the Channels tab and select Chat. Open and copy the "Embed Code". Next, go to Support Center > Web Themes" and open your default theme. Once inside your default theme, click on "Advanced Themes" and select "Layout". Find the section for the "Live Chat!" and replace the existing block of code below with the widget's embed code you copied.

Note: The default template adds the widget on the right side of the page, but the widget can be added anywhere on your Support Center. If you wish to place it elsewhere, make sure to add the Liquid statement that changes the button's availability.

{% if site.chat_enabled_config %}
-- Chat code goes here --
{% endif %}

Second, create a sprite. The image should contain 3 states: link, hover and offline.

Note: You will need to create or use your own custom images. The buttons shown below are examples: 

Next, go back to Channels > Support Center > Web Themes and select your default theme. In Advanced Themes, you can override the existing sprite with your own. Upload the image to a server and create a new styling sheet.  ".assistly-widget" is the class used to control the widget's image. Reference the sprite in the URL section of your code and add an important value (!important) to replace the current image. Tweak the background-position to display the desired part of the sprite. ".assistly-widget a" is for normal link state; ".assistly-widget a:hover" is for hover; ".assistly-widget span" displays offline mode. When you are done, the code should look along these lines:

The final step is to modify the widget's script to not be available at all times. In this example, chat will only be available when Agents are online. Go to "Layout" and edit the script accordingly:

True/False Settings:
  • Always Available  -> offerAlways
  • Only when Agents are online -> offerAgentsOnline
  • When Routing is enabled  -> offerRoutingAgentsAvailable
  • Offer email if chat is unavailable -> offerEmailIfChatUnavailable

The final results will look something like this:
                                                ONLINE                                OFFLINE

Alternatively, you can bypass the use of a sprite by creating buttons with CSS border-radius, shadow and gradients.
As an alternate method, you can create a link directly to the chat form with this URL: 

Note: If your widget displays as a blank white box after doing everything here, you may need to enable the iFrame embedding option under AdminChannelsSupport CenterAdvanced Settings > Allow Frame Embedding