Chime Webclient

This is a guide to outline the usage and implementation of the Chime web client. If after using this guide you still have questions, contact Instant Technologies .

Enabling the Chime Web client

The Chime web client is a lightweight HTML page hosted on the same server that Chime is installed on.

Configuring the Web client

Configure server connection

To enable usage of the Chime for Sametime web client, you must provide some connection settings so the application can communicate with your Sametime server. The first file you will need to configure are located in the \ITFramework\ChimeClient\js directory, and is named settings.js.

Navigate to the directory and open settings.js in a text editor. The file should look something like this:
        
            var sametimeServerConfig = {
            hostPrefix: 'http://',
            webClientHostURL: 'ChimeServer.domain/ITFramework',
            sametimeServerLocation: 'sametimeserver.domain',
            servletPrefix: '/webclient',
            hashedUsernames: true
            };
        
        

The settings contained within this JavaScript object provide the connection info that the web client uses to connect with the Chime engine. The settings are detailed here:

Name Type Description
hostPrefix string The protocol used to connect to the servlet URL
web ClientHostURL string The server address where the web client is hosted
sametimeServerLocation string The server address of the Sametime server
servletPrefix string The directory where the servlet controller is hosted
hashedUsernames boolean If set to true, any Sametime IDs passed to the web client need to be Base64 encoded

Configure web client

The web client code needs to be initialized after the page has loaded. At the bottom of the page, right before the closing body tag there should be a <script> tag with a jQuery $(document).ready() function handler. Inside that handler, there should be a call to initialize the chat client.

        
            Webchat.init('sametime', { chatForm: false });
        
        

The first parameter for this Webchat.init function is the platform the chat service runs on, in this case it should always be 'sametime'.

The second parameter if a configuration object, which will allow you to specify certain options for the chat client. The setting chatForm: false will disable the pre-chat form.

Other options will be added in future updates to Chime.

Customizing the web client

The Chime web client can be customized and branded to suit your specific needs. Chime installs a default web client with the HTML and CSS content commented to explain what the major elements do. If you wish to customize the web client experience, it is recommended that you begin by creating copies of the webClient.html and webchat.css files.

In your new HTML file, change the old reference to webchat.css to match the new copy you have created.

Changing the Chime logo

Changing the logo displayed in the web client is easy. You should have a logo sized 100x50 pixels in .png format named "logo.png". Place the logo in the \ITFramework\ChimeClient\css\img directory. The logo should now be displayed in all Chime web clients hosted on your server.

If you want to have different logos for different queues, you will need to create copies of webClient.html

Connecting to the web client

The web client is accessed by opening a browser window to the url for the webClient.html file, with parameters for the queue to hit, and optionally the user connecting to the chat.

The URL for the web client might look something like:
http://<SERVERFQDN>/ITFramework/ChimeClient/webClient.html?userName=Dispatcher%20UserName

The userName parameter should be the Sametime ID for the dispatcher account for the queue to contact. If there are spaces in the Sametime ID, those spaces should be encoded with the characters:%20.

Connecting with a user Sametime ID

If a user is authenticated into an internal page and you have access to their Sametime ID, it is possible to connect with a queue using their Sametime ID by passing an additional parameter stid to the web client URL.

The full URL might look something like:
http://<SERVERFQDN>/ITFramework/ChimeClient/webClient.html?userName=Dispatcher%20UserName&stid=SeekerID

If hashedUsernames is set to true, you will need to Base64 encode the name before passing it to the URL.
http://<SERVERFQDN>/ITFramework/ChimeClient/webClient.html?userName=Dispatcher%20UserName&stid=U2Vla2VySUQ=

Encoding the Seeker username

The web client uses native JavaScript to Base64 encode and decode the username.

        
            var seekerUsername = "James T. Kirk";
            seekerUsername = window.btoa(seekerUsername);
        
        

Opening the web client using JavaScript

To open the web client, first we need to know a few values.

clientAddress The URL where the web client is hosted
queue The Sametime ID of the dispatcher for the queue
seekerUsername (optional) The plain text or Base64 encoded Sametime ID for the user accessing the web client

Here is an example on how you might open a chat session with a queue. This example assumes you have jQuery on your page.

        
            <a href="#" class="start-chat">Chat now!</a>

            <script type="text/javascript">
            var clientAddress = "//chime.company.domain/ITFramework/ChimeClient/webClient.html";
            var queue = "Helpdesk%20Support";
            var seekerUsername = "James T. Kirk";
            seekerUsername = btoa(seekerUsername);

            $(".start-chat").on("click", function(){
            window.open(clientAddress + "?userName=" + queue + "&stid=" + seekerUsername, "_blank");
            });
            </script>