Staging External Web Client With Chime Hub

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

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:

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

    

$(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: