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 below to expand for screenshot examples. (uses Chime 2.3 screenshots)

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

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.

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:


<button class="btn btn-primary startChimeChat" data-queueid="2">
    Chat Now!
</button>

    
Using jQuery, you might stage out links like this:

$(function(){
    var chatWindow = null;

    var chatURL = 'https://chimehub.com/chat/ChimeDemo/';

    var windowFeatures = 'height=500,width=575,locationbar=no,toolbar=no,menubar=no,resizable=yes';

    $('body').on('click', '.startChimeChat', function(){
        startChimeChat($(this).data('queueid'));
    });

    function startChimeChat(queueID){
        if(chatWindow === null || chatWindow.closed){
            chatWindow = window.open(chatURL + queueID, '_blank', windowFeatures);
        } else {
            chatWindow.focus();
        }
    }
})();

    

ChimeHub also allows you to query the service to see if the desired Queue is currently available, which allows you to conditionally show or hide your click-to-chat buttons.

Make an AJAX POST to https://chimehub.com/Webclient/isQueueAvailable with the parameters engineID and queueID.

The service should response with a boolean, and you can then conditionally show or hide your click-to-chat links.


var checkForChat = function(){
    var available = false;
    $.post('https://chimehub.com/Webclient/isQueueAvailable', {
        engineID: 'ChimeDemo',
        queueID: 2
    }, function(data){
        available = data;
    }).done(function(){
        if(available){
            $('.startChimeChat').show();
        } else{
            $('.startChimeChat').hide();
        }
    });
};

    

Want to modify the appearance of your web client?

If you would like to modify the appearance of your web client such as customizing the form data, the use of your company's logo, or change the colors we will be happy to change it for you. Please contact us via email to support@instant-tech.com with any questions or concerns about how we might change the look of the web client to better suit your company's preference. For example if you would like to use your company's logo or change the colors, please send us a URL to your company's logo and any hex color codes you wish for us to use to and we can modify those settings for you.

Current Web Client appearance:

Web Client