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 XMPP web client, you must provide some connection settings so the application can communicate with your XMPP 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 XMPPServerConfig = {
                    hostPrefix: 'http://',
                    webClientHostURL: '174.129.244.84/ITFramework',
                    XMPPServerLocation: 'st851.instant-tech.com',
                    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:

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('XMPP', { 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 'XMPP'.

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 XMPP ID for the dispatcher account for the queue to contact. If there are spaces in the XMPP ID, those spaces should be encoded with the characters:%20.

Connecting with a user XMPP ID

If a user is authenticated into an internal page and you have access to their XMPP ID, it is possible to connect with a queue using their XMPP 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.

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>