If your users will be using Lync/Skype for Business, this is a great choice. It's not only the easiest but the quickest as well. A user can simply start a chat with the dispatcher with will then route that chat to an agent in the queue.

Example: sip:servicedesk.english@instant-tech.com

Pros:	Quickest and easiest. Users don't have to go to a web page to get help.
Cons:	Some features are unavailable when not using the web client. E.g. Session rating.

This button can either point to the web client, or be used to open a Lync to Lync chat with the dispatcher.

Pros:	More control over where users can come from. Can link to the web client or the Dispatcher's sip uri which would start a Lync/S4B chat.
Cons:	Not as easy as simply adding the dispatcher to your Lync/S4b buddy list.

Live Demo Page

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://Chime.server/Chime/webclient?id=1
Note* - Chime.server is a reference to your internal IP address where Chime is stationed

Opening the web client using JavaScript

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

Here are some examples on how you might open a chat session with a queue. These examples assume you have jQuery on your page.

Sample Button Markup - The queueId (integer) is included in the markup data-queueid="queueId"

<button id="chat-btn" data-queueid="1">Chat Now!</button>

<!--Using the data-queueid attribute allows the use of the same script for all buttons.
Changing the data-queueid will change which queue the button is referencing. -->
<button id="chat-btn" data-queueid="1">Chat Now!</button>
<button id="chat-btn" data-queueid="2">Chat Now!</button>
<button id="chat-btn" data-queueid="3">Chat Now!</button>

            

Sample Script Launching New Window (using jQuery)

$(document).ready(function() {

    // In this example, we leave off the last number in the URL which signifies the queueId.
    // It will be concatenated when we call our startChat() function.
    var chatURL = "http://Chime.server/Chime/webclient?id=";

    var chatWindow = null;
    var windowFeatures = "width=600,height=600,locationbar=no,toolbar=no,menubar=no,resizable=yes";


   function startChat(queueId){
        if (chatWindow === null || chatWindow.closed) {
            chatWindow = window.open(
                chatURL + queueId,
                "LetsChat",
                windowFeatures
            );
        }else {
            chatWindow.focus();
        }
    }

   // Call function to start chat
    $('#chat-btn').click(function() {
        startChat($(this).data('queueid'))
    });
});

            

Sample Script Using Iframe (using jQuery)

$(document).ready(function() {
    var iframeChatWindow = null;

    var startiframeChat = function() {
        if(iframeChatWindow === null) {
            $('#input-iframe').html('<iframe src="http://Chime.server/Chime/webclient?id=1" id="chat"></iframe>');
        }
        iframeChatWindow = true;
    };

    $(#chat-btn).click(function() {
        startiframeChat();
    });

});

This is probably the simplest example of using the web client. All you have to do is add a web link that points to the web client url.

Demo example:

To get help, click Chat Now!

<!-- The Number in ?id=<Number> below represents the Queue ID -->
 <a href="https://chime.instant-tech.com/Chime/webclient?id=2">Chat Now!</a>

<!-- Be sure to include target="_blank" if you want it to open in a new browser window -->
<a href="https://chime.instant-tech.com/Chime/webclient?id=2" target="_blank">Chat Now!</a>

            

This is probably the simplest example of initiating a Lync/S4B chat from a web page. All you have to do is add a web link that points to the SIP address of the queue's dispatcher.

Example: sip:support.english@instant-tech.com or IM:<sip:support.spanish@instant-tech.com>

Demo: Chat Now!

Note - If the link above does not open a Lync/S4B chat window, then this feature will not work for you.

<a href="sip:instantsupport@instant-tech.com">Chat Now!</a>

<a href="IM:<sip:instantsupport@instant-tech.com>">Chat Now!</a>

            

Chime Hub provides a cloud based service to quickly extend your Chime on-premise installation to support external websites and portals. You no longer need to deploy machines in a DMZ, proxy servers, or other complex server configurations – Chime Hub connects you quickly with external sites.

Pros:	Allows you to expose your queue to the DMZ while keeping Chime behind your company's firewall.
Cons:	The ChimeHub web client does not contain all the features as the regular web client for security reasons.

Live Demo Page

Staging External Web Client With Chime Hub

To stage out a click-to-chat link to route conversations through ChimeHub, you will need two pieces of information:

1. Your Chime Engine name
2. The Queue ID of the queue you want to expose

The engine name is the name registered with the ChimeHub service, in the Admin > Advanced settings area within the Chime application. The Queue ID is an integer representing the internal ID of the Queue in your Chime system. This can be seen retrieved from the Advanced tab in the Queue Settings for the queue, where Chime displays the URL needed to open a chat window through ChimeHub.

Click steps to expand for screen shot examples.

Note: User must have admin rights to follow instructions below.

For a PDF of the instructions click here » Staging_External_Web_Client_With_Chime_Hub.pdf

1) Click the Admin section in the upper right hand corner.

2) Click the Settings tab on the left side.

3) Click the Advanced tab.

4) In the form labeled Engine ID: please create your own custom ID.

5) Click Check Engine ID to make sure the ID you created is available.

6) If the ID is available, click the Request Activation to bring up an information modal.

7) Fill out your company name and please use a good contact email address for us to notify you when your Chime Hub URL is ready to be used.

8) Click Request Activation to notify us about your request.

9) Click Save to finish the initial setup.

Before going forward, you MUST wait for a confirmation email from us notifying you that the Chime Hub url is up and ready to be staged.

10) After confirmation, click Queues at the top right corner.

11) Click the Queue Settings icon.

12) Click the Advanced tab at the top.

13) At the bottom is the necessary URL for the Chime Hub web client. Copy it for its appropriate use.

After completing the steps above, here is way you could stage the Chime Hub URL:

A click to chat button might look like this:

The markup might look like this:

Queue Info

    {
    "isAvailable": true,
    }

                    

    $.get('https://chimehub.com/Webclient/isQueueAvailable', {
        engineID: 'ChimeDemo',
        queueID: 1
    }, function(data){
        if(data.isAvailable){
            $('.startChimeChat').show();
        } else{
            $('.startChimeChat').hide();
        }
    });


                    

What is Skill Tag Routing?

Skill Tag Routing, or specifically Skill Best-Match Hunt, is one of Chime's 3 routing methods that will route guests with specific problems to agents who have matching skill sets (tags). For example, a guest who needs help with their hardware starts a chat with the queue. Chime will first try and route to an available agent with the matching hardware skill tag before routing to the next available agent. Adding custom information to the inbound session is easier than you think. All you need to do is add it to the URL via one or more query string parameters. It is through this mechanism that the web client grabs the queue ID and routes the guest to the appropriate queue. For example, with the URL https://chime.instant-tech.com/Chime/webclient?id=2, the web client knows to route the guest to the queue with an ID of 2.

The Chime web client will automatically grab all query string parameters and display them to the agent with the other information in the MetaData tab of the Agent Context Window. This means you are not limited to just one or two but can add several different parameters if you wish.

Adding query string parameters can be done in one of two ways; Adding it directly on the URL in the link or add it via javascript. In the examples that follow we are going to demonstrate how each of these works.

See the screenshots for a look at how query parameters in the example URL and others below will be rendered to the agent in the Agent Context Window.

Screenshots (3)

Example URL: https://chime.instant-tech.com/Chime/webclient?id=2&request=software%20installation

Now that we have more information, let's move forward with our example!

Example URL: https://chime.instant-tech.com/Chime/webclient?id=2&request=software%20installation

Using HTML

In this example we are adding the query string parameter directly to the URL of the web link. Both links have the same URL and open the web client in a new window (target="_blank") and add the query string parameter &request=software%20installation.

Example Web Links:

• Start Chat!
• Software Installation

<!-- This code corresponds to the two web links above....Notice we replaced the space with %20-->
<a href="https://chime.instant-tech.com/Chime/webclient?id=2&request=software%20installation" target="_blank">
    Start Chat!
</a>

<a href="https://chime.instant-tech.com/Chime/webclient?id=2&request=software%20installation" target="_blank">
    Software Installation
</a>

    

Using JavaScript

In this example, we will launch the web client via JavaScript and add the query string corresponding to the button we click. Unlike the first example, this one will launch the web client in a new window with different query string parameters.

Note - While both examples start a chat with the same queue, they demonstrate how different queue ID's can be used to initiate chats with different queues.

Example Buttons: Start Chat! Hardware

<!--This code corresponds to the two buttons above.
    Notice we are storing values for both the queue ID and the request in an HTML data attributes.-->

<button class="btn btn-primary start-chat" data-queueid="2" data-request="software installation">
    Start Chat
</button>

<button class="btn btn-primary start-chat" data-queueid="2" data-request="hardware">Hardware</button>

    

(function() {

    //base URL for the web client WITHOUT a queue ID
    var chatURL = "https://chime.instant-tech.com/Chime/webclient";
    var chatWindow = null;

    //these are the features for the new window we are going to open and can be changed if you want
    var windowFeatures = "width=600,height=600,locationbar=no,toolbar=no,menubar=no,resizable=yes";

    //When we call the startChat function, we want to first make sure the chatWindow doesn't exist
    //or has been closed....otherwise bring that window into focus and prevent duplicate chat windows
    function startChat(queueId, request){
        if (chatWindow === null || chatWindow.closed) {
            //Compose the URL with the parameters
            var fullURL = chatURL + '?id=' + queueId + '&request=' + request;
            chatWindow = window.open(
                fullURL,
                "LetsChat",
                windowFeatures
            );
        }else {
            chatWindow.focus();
        }
    }

    // Add an event listener to each element with the class "start-chat" to call
    //our startChat function when the button is clicked
    var buttons = document.getElementsByClassName('start-chat');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function() {
            //Grab the values for queueid and request from the button that was clicked
            var id = this.dataset.queueid;
            var req = this.dataset.request;
            //Start the chat......Yay!
            startChat(id, req);
        });
    }
})();

    

$(function() {

   //base URL for the web client WITHOUT a queue ID
    var chatURL = "https://chime.instant-tech.com/Chime/webclient";
    var chatWindow = null;

    //these are the features for the new window we are going to open and can be changed if you want
    var windowFeatures = "width=600,height=600,locationbar=no,toolbar=no,menubar=no,resizable=yes";

    //When we call the startChat function, we want to first make sure the chatWindow doesn't exist
    //or has been closed....otherwise bring that window into focus and prevent duplicate chat windows
    function startChat(queueId, request){
        if (chatWindow === null || chatWindow.closed) {
            //Compose the URL with the parameters
            var fullURL = chatURL + '?id=' + queueId + '&request=' + request;
            chatWindow = window.open(
                fullURL,
                "LetsChat",
                windowFeatures
            );
        }else {
            chatWindow.focus();
        }
    }

    //With jQuery there is no need to manually add event listeners to each button as jQuery does that
    //for us behind the scenes.

    $('.start-chat').click(function() {
        //Grab the values for queueid and request from the button that was clicked
        var id = $(this).data('queueid');
        var req = $(this).data('request');
        //Start the chat......Yay!
        startChat(id, req);
    });
});

    

Adding custom information to the inbound session is easier than you think. All you need to do is add it to the URL via one or more query string parameters. It is through this mechanism that the web client grabs the queue ID and routes the guest to the appropriate queue. For example, with the URL https://chime.instant-tech.com/Chime/webclient?id=2, the web client knows to route the guest to the queue with an ID of 2.

The Chime web client will automatically grab all query string parameters and display them to the agent with the other information in the MetaData tab of the Agent Context Window. This means you are not limited to just one or two but can add several different parameters if you wish.

Adding query string parameters can be done in one of two ways; Adding it directly on the URL in the link or add it via javascript. In the examples that follow we are going to demonstrate how each of these works.

See the screenshots for a look at how query parameters in the example URL and others below will be rendered to the agent in the Agent Context Window.

Screenshots (3)

Example URL: https://chime.instant-tech.com/Chime/webclient?id=2&request=software%20installation

Now that we have more information, let's move forward with our example!

Example URL: https://chime.instant-tech.com/Chime/webclient?id=2&request=software%20installation

Using HTML

In this example we are adding the query string parameter directly to the URL of the web link. Both links have the same URL and open the web client in a new window (target="_blank") and add the query string parameter &request=software%20installation.

Example Web Links:

• Start Chat!
• Software Installation

<!-- This code corresponds to the two web links above....Notice we replaced the space with %20-->
<a href="https://chime.instant-tech.com/Chime/webclient?id=2&request=software%20installation" target="_blank">
    Start Chat!
</a>

<a href="https://chime.instant-tech.com/Chime/webclient?id=2&request=software%20installation" target="_blank">
    Software Installation
</a>

    

Using JavaScript

In this example, we will launch the web client via JavaScript and add the query string corresponding to the button we click. Unlike the first example, this one will launch the web client in a new window with different query string parameters.

Note - While both examples start a chat with the same queue, they demonstrate how different queue ID's can be used to initiate chats with different queues.

Example Buttons: Start Chat! Hardware

<!--This code corresponds to the two buttons above.
    Notice we are storing values for both the queue ID and the request in an HTML data attributes.-->

<button class="btn btn-primary start-chat" data-queueid="2" data-request="software installation">
    Start Chat
</button>

<button class="btn btn-primary start-chat" data-queueid="2" data-request="hardware">Hardware</button>

    

(function() {

    //base URL for the web client WITHOUT a queue ID
    var chatURL = "https://chime.instant-tech.com/Chime/webclient";
    var chatWindow = null;

    //these are the features for the new window we are going to open and can be changed if you want
    var windowFeatures = "width=600,height=600,locationbar=no,toolbar=no,menubar=no,resizable=yes";

    //When we call the startChat function, we want to first make sure the chatWindow doesn't exist
    //or has been closed....otherwise bring that window into focus and prevent duplicate chat windows
    function startChat(queueId, request){
        if (chatWindow === null || chatWindow.closed) {
            //Compose the URL with the parameters
            var fullURL = chatURL + '?id=' + queueId + '&request=' + request;
            chatWindow = window.open(
                fullURL,
                "LetsChat",
                windowFeatures
            );
        }else {
            chatWindow.focus();
        }
    }

    // Add an event listener to each element with the class "start-chat" to call
    //our startChat function when the button is clicked
    var buttons = document.getElementsByClassName('start-chat');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function() {
            //Grab the values for queueid and request from the button that was clicked
            var id = this.dataset.queueid;
            var req = this.dataset.request;
            //Start the chat......Yay!
            startChat(id, req);
        });
    }
})();

    

$(function() {

   //base URL for the web client WITHOUT a queue ID
    var chatURL = "https://chime.instant-tech.com/Chime/webclient";
    var chatWindow = null;

    //these are the features for the new window we are going to open and can be changed if you want
    var windowFeatures = "width=600,height=600,locationbar=no,toolbar=no,menubar=no,resizable=yes";

    //When we call the startChat function, we want to first make sure the chatWindow doesn't exist
    //or has been closed....otherwise bring that window into focus and prevent duplicate chat windows
    function startChat(queueId, request){
        if (chatWindow === null || chatWindow.closed) {
            //Compose the URL with the parameters
            var fullURL = chatURL + '?id=' + queueId + '&request=' + request;
            chatWindow = window.open(
                fullURL,
                "LetsChat",
                windowFeatures
            );
        }else {
            chatWindow.focus();
        }
    }

    //With jQuery there is no need to manually add event listeners to each button as jQuery does that
    //for us behind the scenes.

    $('.start-chat').click(function() {
        //Grab the values for queueid and request from the button that was clicked
        var id = $(this).data('queueid');
        var req = $(this).data('request');
        //Start the chat......Yay!
        startChat(id, req);
    });
});