Customizing the Chat States of the Syndicated Conditional Chat widget

For many customers, the default chat service States displayed by the Oracle Service Cloud Syndicated Conditional Chat widget do not meeting their business needs. A common desire is to have the chat link be available, even if all agent's are busy. This gives the user a chance to wait in the queue if they want.

This can be done easily by setting the 'min_sessions_avail' setting to 0, and the 'wait_threshold' setting to a very high value. I usually put it at 1 day by setting it to 86400 seconds.


RightNow.Client.Controller.addComponent(
  {
      //...
      min_sessions_avail: 0,
      wait_threshold: 86400,
      //...
  },
  "//cx.rightnow.com/ci/ws/get" //

By default, when no agent sessions are available, a clickable link will be displayed that list the wait time. The customer can then chose if they want to wait that long

An agent should be available in 8:20 (8 Minutes and 20 Seconds).

There is one condition I've seen where the OOTB logic breaks down. When enabled, the chat widget will poll the server every few seconds for availablility; the server responds with two metrics during chat hours.

  • The number of available agent sessions
  • Current queue wait time

When the server responds with values of "0" for both these metrics, the widget chooses to interpret this as "All agents are busy".

The OOTB logic is as follows:


if (result.stats)
{
    availableSessionCount = result.stats.availableSessionCount;
    expectedWaitSeconds = parseInt(result.stats.expectedWaitSeconds, 10);
    if (result.q_id > 0 && availableSessionCount >= minSessions && expectedWaitSeconds <= waitThreshold && (availableSessionCount > 0 || expectedWaitSeconds > 0))
    {
        if (expectedWaitSeconds === 0)
        availableImmediately = true;
         else
        availableWithWait = true;
    } 
    else
    {
        unavailableBusy = true;
    }
}

If this logic doesn't work for your business, you can change it using the event system built into the syndicated components

The following code registers a custom handler to the evt_conditionalChatLinkAvailabilityResponse event. The handler modifies the Chat Server response when both Agent Sessions and Queue Wait Time are 0. I choose to override the Queue Wait Time and set it to 1. This will then make the widget display an Available With Wait status message.


RightNow.Client.Controller.addComponent(
{
    chat_login_page_height: 610,
    chat_login_page_width: 460,
    chat_login_page: "/app/chat/chat_launch",
    container_element_id: "myChatLinkContainer",
    label_available_immediately_template: "Agents are available with no wait time.",
    label_unavailable_busy_template: "All agents are busy.",
    label_unavailable_hours: "We're sorry, chat is currently unavailable.",
    ignore_preroute: true,
    min_sessions_avail: 0,
    wait_threshold: 86400,
    info_element_id: "myChatLinkInfo",
    link_element_id: "myChatLink",
    instance_id: "sccl_0",
    module: "ConditionalChatLink",
    type: 7
    },
    "//cx.rightnow.com/ci/ws/get" //<-- Change to your own server
);

//Widget loaded callback
RightNow.Client.Event.evt_widgetLoaded.subscribe(function (type, args) {
    
    //Register event to watch for when avail is checked
    RightNow.Client.Event.evt_conditionalChatLinkAvailabilityResponse.subscribe(function(type, args, instance)
    {
        var result = args[0].data;
        var scope = args[1].scope;
        var eventScope = args[1];

        if (result.stats) //Only set if in Chat hours. Otherwise it won't be set
        {

            //Redefine how the OOTB behavior works. Trick it by setting the expectedWatiSeconds to 1
            var availableSessionCount = result.stats.availableSessionCount;
            var expectedWaitSeconds = parseInt(result.stats.expectedWaitSeconds, 10);
            if(availableSessionCount == 0 && expectedWaitSeconds == 0)
            {
                result.stats.expectedWaitSeconds = "1";
            }
        }


    }); 

    //Reverse the subscribers so that ours fires first before the OOTB
    RightNow.Client.Event.evt_conditionalChatLinkAvailabilityResponse.subscribers.reverse();           

});  

One import thing to note. The chat component internals also use the same event system. In order to get my event handler (which was registered later) to fire before the core chat component's handler I need to reverse the subscribers list.


RightNow.Client.Event.evt_conditionalChatLinkAvailabilityResponse.subscribers.reverse();  

A full working demo of this code can be found on my JSFiddle Account: https://jsfiddle.net/fishnugget77/b7pmy692/

A disclaimer. There is likely a valid reason for Oracle choosing to do what they did. This article shows you how you can override the behavior; you have to determine if you should.

Comments

Thank you very much, this saved me much grief over the last 2 days. This worked like a charm in the 30 seconds it took me to implement and test.

My pleasure. Glad it worked for you.

Hi,
We have created 3 chat queues, and have written business rules for the chat queues like "if Contact.organization equals xxx
Then assign chat queue to xxx, how ever if we are initiating chat from the customer portal the chat queues is routed to default chat queue inspite of the fact that we have mapped the custom field Contact.organization to the respecitve chat launch landing page of the customer portal

Note: We have created (Duplicated) 3 sets of Chats for 3 organizations (Single Interface) and and did the same for other 2 organizations as well. Say for instance if a customer logs into the organization xxx custhelp page and initiates a chat, according to the business requirement it has to land on the respective agent belonging to the organization, but infortunately the chat is not routing to the specific organization's chat launch rather its going to the default chat, kindly help me in this regard as to how to go about.

below is the code where we have mapped the organization using custom field created in the agent desktop

#rn:msg:LIVE_HELP_HDG#

#rn:msg:CHAT_MEMBER_OUR_SUPPORT_TEAM_LBL#

//Mapping the custom menu field and the option for the organization xxx is 50 hence mapped

Thanks in advance
Regards,
Srinath

Srinath

1) Is there any way to "NOT" show anything when NO agents are available?



2) Is there any workaround by which if agents are online, I can display and if no agents are available then hide DIV completely?

3) Also - Is there any way to hide the same outside the defined hours? So basically only show DIV when agents are online available. In not, hide DIV in all other cases.




So basically - instead of using this IF condition for hours (if (result.stats))



I am looking for a workaround in which I can check:

(IF any agent is ONLINE)
{
show div id="online"
}
else
{
hide div id="online"
}

The short answer is "yes you can".

There are a couple of ways. Natively the SCC widget adds some classes to the HTML to indicate certain states. These might be descriptive enough for you to apply some css rules (i.e. display:none;).

If memory serves me correctly, these CSS classes are a little lacking.
In that case, you have access to the container DOM element via instance._containerElement.

In the event callback, you can run your own logic to either directly modify the Container, or apply your own custom CSS classes to the container.

Hope this helps.

Thank you for this and it works well as long as I only have 1 interface that I am trying to do this for.

My issue is that I have two different languages that each have their own interface and therefore different Chat hours. The issue is that this doesn't seem to like it when I put two instances of it on the page (they interfere with each other).

I have need for this exact behavior but one site is English and the other is German. I need to have the links shown for both and there will be times when both are available. But the German interface does not have the same chat availability and I can't seem to get it to work. We are supposed to be able to have multiple instances of the widget on the same page as long as they have different instance ID.
To summarize what I have done is that I have taken the code above and put it on the page twice but the instances and other "tags" each have language specific tags "_en" / "_de" but the logic seems to cross over between the two and if one should be unavailable and one should be available they good "boom" and can't make up their minds if they are active or inactive.

is that possible to pops up external page instead of chat launch page when click on chat launch page ?

The short answer is yes, you can probably do this. When the widget loads, it contains a property called data.base_url that is set to the OSC Site root (i.e https://XXX.custhelp.com).

If you reset data.base_url to be empty (i.e. ""), then you should be able to use an external url (with http/https) as your chat_login_page parameter.

I quickly put together an example of how this could be done:

https://jsfiddle.net/fishnugget77/f3pozg59/

Zircon - This is a contributing Drupal Theme
Design by WeebPal.