f you’re reading this you’ve probably already seen the chat capability that ServiceNow provides. This is a great feature but it’s only currently available if you deploy the ServiceNow content management system (CMS) along with it. I recently worked with a co-worker, Greg Willis, to develop a way to add end-user Help Desk chat capability to a standard homepage. This article explains how you can do it too!
The basic concept behind this is to leverage a CMS site page with a chat link inside of the standard frameset on a homepage. This is accomplished by setting up the CMS site, page and content, and then putting that page inside of an iframe widget on a homepage. Here are the step-by-step instructions.
1) Install the Content Management and Chat Plugins
This solution doesn’t change the fact that end-user chat capability is only supported by the CMS plugin. You don’t have to set up a full-fledged CMS site, but you will need to install the plugin. Here’s the CMS wiki link for more information. You’ll also need to make sure you have the chat plugin installed.
2) Set up a new ‘Site’ record
This tutorial assumes that you don’t want to use a full CMS implementation. In order to get the chat functionality we need, you can set up a basic CMS site with a single page. Navigate to ‘Content Management->Sites’ and create a new site record. You only need to fill in the following information…
Name: Standalone Chat
IMPORTANT!!! You’ll need to come back to your site record after completing step 3 below to fill in the ‘Home page’ value for your site!
3) Create a new page for your chat site
The page is what will actually display the chat widget. The important thing here is to choose a layout that will look good in the widget we’ll create later and to make sure to associate the page to the site you created in step 2. Here are the page settings you should use based on the input from step 2 above.
Name: Chat page
URL suffix: chat
Layout: CMS 1 Column
Content site: Standalone Chat
IMPORTANT!!! Once you’ve created this page you should go back to the site record created in step 2 and set this page as the ‘Home page’ value in your site record!
4) Add a new Dynamic Content block to your page
Your Dynamic Content block should be configured with the following settings…
<div style="margin:0;padding:1px 4px;" class="live_workqueue_button cms_menu_vertical_blocks_container">
<a href="#" onclick="CustomEvent.fire(LiveEvents.LIVE_EVENT, LiveEvents.LIVE_WINDOW_JOIN_QUEUE_QUERY, 'c54f0abf0a0a0b452db84664f409c79c', 'Help Desk Chat'); return false;">
<span class="i32 i32_support"></span>
<td style="vertical-align:middle;white-space:nowrap;" class="cms_menu_vertical_blocks_title">
<span class="cms_menu_vertical_blocks_title"><h2>Help Desk Chat</h2></span>
5) Create a UI page with an iframe for your chat page
This is really the key to the entire solution. As I’ve explained above, the ESS chat queue only works in the CMS setup. That’s why we’ve gone through all of the trouble of steps 1-4 :). Now we just need to put our CMS page in an iframe so that we can view it on a regular homepage. You can do this with a simple UI page created by navigating to ‘System UI->UI pages’, but if you want it to work in a homepage widget this step needs to be followed exactly.
There are 3 important parts of this UI page. The first is the name. Because we want this to be included as a homepage widget, we need to name our UI page starting with ‘render_gadget_’. Second is the ‘src’ value from the iframe tag. This points to the suffix name of the CMS site set up in step 2 above. The third important piece is the height of the iframe. You can adjust this to meet your specific needs, but I’ve found that it should be no less than 320 pixels if you want it to look right.
6) Create or modify a Widget record
This step is only necessary if you want to display the chat button on a homepage. I’ve explained how to set up a widget and a UI page like this before so I’ll link to that solution for the instructions. Just follow the part about the widget, not the UI page there.
7) Add the widget to a homepage
Once youâ€™ve set up your UI page and Widget record correctly you can open up a homepage and click the â€˜Add contentâ€™ link in the top-left corner of the page. Youâ€™ll see your widget category name followed by the name of your widget in the second box to add to a homepage.
Because the entire chat functionality is part of a dynamic content block, you can change the look of the button any way you like by modifying that HTML. Here’s a quick example I came up with to change the icon and the text a bit.