Chat with us if you have any questions!

How To Deploy

Easy to use developer API for Chime

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.

Variable Where To Locate
chatURL The Internal Web Client Address found in Queue Settings / Advanced
Ex: http://Chime.server/Chime/webclient?id=1
queueId The Integer at the end of the Internal Web Client Address
Ex: http://Chime.server/Chime/webclient?id=1

Here is an example on how you might open a chat session with a queue. This example assumes 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();
    });

});

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 development@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

Queue API

Chime for Lync® has an API available to determine queue availability and wait times, which may be useful when exposing click-to-chat links out on various portal pages. This guide should outline the API calls available, and their responses.

All API calls are made as GET requests to ChimeServer/Api/MethodName

Queue Info

Method GetQueueInfo
Parameters queueID (int)
Response 

{
    "queueID": 1,
    "queueName": "Main Engineering",
    "isAvailable": true,
    "onlineAgentCount": 1,
    "averageWaitTime": "00:00:00",
    "longestWaitTime": "00:00:00"
}
Sample (using jQuery) 

$.get('http://Chime.server/Chime/Api/GetQueueInfo',
    { queueID: 1 },
    function(response){
        //Do something with the response
    }
);

Queue Wait Time

Method GetQueueWaitTime
Parameters queueID (int)
Response 

{
    "averageWaitTime": "00:00:00",
    "longestWaitTime": "00:00:00"
}
Sample (using jQuery) 

$.get('http://Chime.server/Chime/Api/GetQueueWaitTime',
    { queueID: 1 },
    function(response){
        //Do something with the response
    }
);

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

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

Method isQueueAvailable
Parameters engineID (string), queueID (int)
Response 

    {
    "isAvailable": true,
    }
Sample (using jQuery) 

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

The following steps only pertain to Chime 2.3 and earlier. As of Chime 2.4, we've included the ability to customize web clients directly from the Admin UI, and will no longer require files to be edited directly on the Chime server. If you have any questions, please contact us at support@instant-tech.com.

Customizing the Web Client

* Note - Any changes made might be overwritten with future updates of Chime and should be backed up in a separate location.

* Note - Customizing your web client will change it's appearance for all queues on your server. Web client customization on a per-queue basis is currently not supported.

Video Example:

Customizing the Web Client (4:13)

Screen Shots with Instructions:

The examples below demonstrate how to switch out the Chime logo with your own.

Steps to complete:

  1. Add your brand or logo image to the images folder in the directory.
    • Note - Ideal image size is 50px tall x 50-100px wide.
  2. In the CSS file, change the #brand background url to point to the new image file in the directory.
  3. In the HTML file, change the image source to point to the new image file in the directory to accommodate for legacy browsers IE8 and before.
  4. Restart the Chime For Lync service.

Before:

After:

Step 1: Add your brand or logo image to the images folder in the directory.

  • Add your logo or brand image to the images folder.
    • Remember the ideal image size is 50px tall x 50-100px wide, but this example will use an image that is 50px tall x 323px wide just to demonstrate it can be done as well. The width adjustment will take place in Step 3.2.
  1. ..
  2. Program Files
  3. Instant Technologies
  4. Chime For Lync
  5. Content
  6. images
  7. yourBrand.image

Step 2: Change the #brand background url to point to the new image file in the directory.

  • Make changes to webchat.css to reference the new path to your brand/logo image.
  1. ..
  2. Program Files
  3. Instant Technologies
  4. Chime For Lync
  5. Content
  6. css
  7. webchat.css

Before:


    #brand {
        height: 50px;
        /*width: 100px;*/
        background: url("../images/chime3.png") no-repeat;
        -ms-background-size: contain;
        background-size: contain;
    }

After:

  • Change the background url to reference the newly added brand/logo image from Step 1. 

    #brand {
        height: 50px;
        /*width: 100px;*/
        background: url("../images/yourBrand.image") no-repeat;
        -ms-background-size: contain;
        background-size: contain;
    }

Result:

Step 2.1 (Optional): Get rid of the Moto robot hanging on the left side of the window.

Before:


    /*
    Moto Styling information
    */
    .chat-moto {
        position: fixed;
        float: left;
        margin-left: -44px;
        top: 150px;
        height: 120px;
        width: 67px;
        background: url("../images/chatClient/form_bot.png") no-repeat;
        -ms-background-size: contain;
        background-size: contain;
    }

After:

  • Delete or comment out the following code found a few lines below the code mentioned above. 

    /*
    Moto Styling information
    */
    /*.chat-moto {
    position: fixed;
    float: left;
    margin-left: -44px;
    top: 150px;
    height: 120px;
    width: 67px;
    background: url("../images/chatClient/form_bot.png") no-repeat;
    -ms-background-size: contain;
    background-size: contain;
    }*/

Result:

Step 3: Change the image source to point to the new image file in the directory to accommodate for legacy browsers IE8 and before.

  • Make changes to webClient.cshtml to reference the new path to your brand/logo image for users with versions of IE8 or earlier.
  1. ..
  2. Program Files
  3. Instant Technologies
  4. Chime For Lync
  5. Views
  6. webClient.cshtml

Before:


    <div class="col-xs-3">
        <div id="brand">
            <!--[if LTE IE 8]>
                <img src="/Chime/Content/images/chime3.png" height="50" width="100" alt="Chime"/>
            <![endif]-->
        </div>
    </div>

After:

  • Change the 'img src' path to point to your newly added brand/logo image from Step 1. 

    <div class="col-xs-3">
        <div id="brand">
            <!--[if LTE IE 8]>
                <img src="/Chime/Content/images/yourBrand.image" width="100" alt="Chime"/>
            <![endif]-->
        </div>
    </div>

Result:

* Note - Unless you are working in IE8 or before, you shouldn't see any changes.

Step 3.1 (Optional): Change the phrase at the top - 'In order to better serve you...'

  • Locate the following code just below the code from the example above and make your desired changes within the '<p>...</p>' tags.

Before:


    <!-- PreChat Questionaire -->
    <form class="form-horizontal prechat" role="form">
        <input type="hidden" id="referrerURL" value="@RenderContext.Context.Request.Headers.Referrer">
        <p>In order to better serve you, please provide us with the following information</p>
        @if (Model.RouteMethod == RouteMethods.SkillNoPriority || Model.RouteMethod == RouteMethods.SkillPriority) {

After:

  • Change the text within the '<p>...</p>' tags. 

    <!-- PreChat Questionaire -->
    <form class="form-horizontal prechat" role="form">
        <input type="hidden" id="referrerURL" value="@RenderContext.Context.Request.Headers.Referrer">
        <p>Please enter the following information</p>
        @if (Model.RouteMethod == RouteMethods.SkillNoPriority || Model.RouteMethod == RouteMethods.SkillPriority) {

Result:

Step 3.2 (Optional): Change the HTML to accommodate a longer image

  • We use the Bootstrap Grid system in our HTML markup. The grid is made up of 12 columns. In order to increase the width allowed for a longer image, you need to increase the grid number to accommodate accordingly.

Before:

* Note - We use the same code from Step 3.1 


    <div class="col-xs-3">
        <div id="brand">
            <!--[if LTE IE 8]>
                <img src="/Chime/Content/images/yourBrand.image" width="100" alt="Chime"/>
            <![endif]-->
        </div>
    </div>

After:

  • Increase the 3 in "col-xs-3" to a larger number. 

    <div class="col-xs-8">
        <div id="brand">
            <!--[if LTE IE 8]>
                 <img src="/Chime/Content/images/yourBrand.image" width="100" alt="Chime"/>
            <![endif]-->
        </div>
    </div>

Result:

Step 4: Restart the Chime For Lync service

  • You must restart the Chime for Lync service before any of the above changes can take effect.

Example Code Using Queue Info

Sample code for below examples (using jQuery)


$.get("http://Chime.server/Chime/Api/GetQueueInfo", { queueID: 1 }, function(data){

   //Queue Name
   $('#name').html(data.queueName);

   //Queue Status
   if(data.isAvailable){
      $('#status').html('Online').css({
         'color': 'green',
         'font-weight': '700'
      });

      $('#btn-1').removeClass('btn-default').addClass('btn-success').html('Click to Chat')
          .click(function() {
              window.open(
                  "https://chimehub.com/chat/LynconPremiseTesting/1",
                  "LetsChat",
                  ",width=600,height=600,resizable,scrollbars,status,"
              );
           });
    } else {
        $('#status').html('Offline').css({
            'color': 'red',
            'font-weight': '700'
        });
        $('#btn-1').removeClass('btn-success').html('Queue Offline');
    }

    //Agents Available
    if (data.onlineAgentCount > 9) {
        $('#num-agents').html(data.onlineAgentCount).css('color', 'green');
    } else if(data.onlineAgentCount > 0) {
        $('#num-agents').html(data.onlineAgentCount).css('color', 'red');
    } else {
        $('#num-agents').html('n/a');
    }

    //Average Wait Time
    $('#avg-wait').html(data.averageWaitTime);

    //Longest Wait Time
    $('#long-wait').html(data.longestWaitTime);

});

Using Example Code From Above Note* - Buttons are disabled

Online Queue

Lorem ipsum dolor sit amet, aenean nunc, blandit vivamus tincidunt iaculis vulputate vitae, adipiscing praesent, dictum quis metus. Suscipit scelerisque viverra maecenas nunc praesent. Dolor sagittis eu ac ut, faucibus purus, dolor montes venenatis nec sapien montes etiam, justo dolor, vehicula egestas magna. Eleifend sed curabitur, orci ullamcorper imperdiet magna lacinia, tristique suspendisse id metus malesuada et wisi. Nam ac rhoncus nec sapien nisl. At wisi mauris. Amet volutpat nam lacus sodales justo ligula, ut tortor fermentum, dolor mi, magna deserunt magnis rutrum in erat amet. Vivamus montes eget metus adipiscing, wisi tempus ultricies risus, eu non.

Click to Chat
Queue Name: IT Helpdesk
Queue Status: Online
Agents Available: 24
Avgerage Wait: 00:04:23
Longest Wait: 00:09:07

Offline Queue

Lorem ipsum dolor sit amet, aenean nunc, blandit vivamus tincidunt iaculis vulputate vitae, adipiscing praesent, dictum quis metus. Suscipit scelerisque viverra maecenas nunc praesent. Dolor sagittis eu ac ut, faucibus purus, dolor montes venenatis nec sapien montes etiam, justo dolor, vehicula egestas magna. Eleifend sed curabitur, orci ullamcorper imperdiet magna lacinia, tristique suspendisse id metus malesuada et wisi. Nam ac rhoncus nec sapien nisl. At wisi mauris. Amet volutpat nam lacus sodales justo ligula, ut tortor fermentum, dolor mi, magna deserunt magnis rutrum in erat amet. Vivamus montes eget metus adipiscing, wisi tempus ultricies risus, eu non.

Queue Offline
Queue Name: IT Helpdesk
Queue Status: Offline
Agents Available: n/a
Avgerage Wait: 00:00:00
Longest Wait: 00:00:00