BRKCCT-2631.Pdf

Home , Spark (XMPP client), Telegram (software)

BRKCCT-2631

Enhancing The Customer Chat Experience Using CCE 11.6 Enterprise Chat & Email

Paul Tindall EMEAR CC Tech Consulting Team @tindallpaul Cisco Spark

Questions? Use Cisco Spark to communicate with the speaker after the session

How 1. Find this session in the Cisco Live Mobile App 2. Click “Join the Discussion” 3. Install Spark or go directly to the space 4. Enter messages/questions in the space

cs.co/ciscolivebot#BRKCCT-2631

© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public Chat has rapidly become the preferred communications channel between individuals, with groups and for customer interaction. The challenge is to provide slick, pain-free chat experiences, supporting the chat client of choice as well as exploiting Artificial Intelligence for chat responses.

• Introduction to ECE

• Chat requirements challenges

• The ECE SDK and building a custom chat client

• Adding a chatbot using Watson

• Agent control of the chat client

• Non-browser based chat clients What is ECE? Enterprise Chat and Email (ECE)

• Web Chat

• Email

• Web Callback

• Included in all CCE deployment models: CCE, PCCE, HCS-CC

• Agent-side: out-the-box integrated Finesse desktop gadgets

• Consumer-side: customisable chat templates for adding to web pages

• Updated Finesse agent gadget to handle multi-session email and chat • Simpler, faster, designed as Finesse gadget • Available on all CCE supported browsers (IE11, Chrome, Firefox)

• Deployment models • Small footprint for up to 400 blended agents • This deployment model is supported ‘on-box’ for 2000 agent PCCE/UCCE TRCs, as well as stand-alone for CCE. • 4000+ agent TRC requires off-box regardless of ECE agent count • >400 ECE agents requires off-box • Dedicated VMs for larger agent counts (1200+) • Available for PCCE (off-box)

• Simplified installation with PCCE

• Single CCE routing engine across channels and locations • Blending, interruptibility, multi-session

• Task-by-task routing based on real-time data • Agent state, task state, task context • Skill Group or Precision Queues

• Context information passed with task

• Use data from email or web forms in routing, reporting

• Use info from CCE for messages while chat queued

• Call variables and expanded call context

• Customisable chat templates • Configuration files • CSS to manipulate layout, look and feel • Localised properties file for text that’s displayed

• Virtually all browsers supported

• Mobile devices

• Three chat phases • Initial chat context web form • Chat session dialogue • Post-chat – save transcript and optional survey

• JavaScript API / SDK • Enables developers to build custom clients for pre-chat form, chat dialogue, and post-chat survey form.

• Backend Web Services • Rest client APIs for access to backend DB, CRM, other systems

• Chat Enhancements • Docked-chat template option rather than pop-up • Secure chat • Attachment sharing

• Enables developers to take total control over the consumer-side chat user interface

• Direct access to session control, messaging, events, hidden in-chat control

• No dependency on out-the-box templates

• JS library and code samples provided

• Opens up integration to any type of chat client

• Customer engages initially with a chatbot

• Artificial Intelligence driven dialogue

• Customer can use natural language and skip preliminary web-form

• For chats that remain unsatisfied by the chatbot conversation – • Seamless transition to agent chat using the same chat user interface • Pass useful context and caller intent derived from the chatbot session

• Customer chats using generic messaging client • Messenger applications such as Telegram, (WhatsApp when interface exposed) • Social media messaging – Twitter, Facebook • SMS text messaging • Cisco Spark (within the enterprise)

• Could also include an AI driven dialogue

• Prior to 11.6 – could have built something with CCE Task Routing, but ... • Have to build a custom desktop gadget • Develop a server-side messaging connector to the Task Routing API

But First ... A Closer Look At What Actually Happens In A Chat Session Step 1 – Establishing The Session

1. Customer enters details and submits. 3 2 2. Initialise and start chat session. (Optional check for agent availability as part of initialisation) 3. Chat is routed and offered to agent who can now accept. Client side is notified when the agent joins the chat.

1. Customer text input 2. Send message to agent 3. Display sent message in local chat 4. Display incoming response from agent

2 3

1 1. Customer ends the chat session, or agent hits Complete. 2. Post-chat interaction is invoked. 1

Customer can keep chat transcript and complete survey form.

• Methods to control sessions • Initialise, Start and End chat session • Reconnect an existing chat session

• Methods to perform chat operations • Send message to agent • Start/stop typing indication • Exchange attachments

• Generate events and invoke handlers, for example: • Agent message received • Agent joined • Chat initialized, connected successfully, session complete

Components We Build

• HTML to define an embedded chat box and its component parts – status bar, chat bubble output area, text input field

• CSS – stylesheet to define the look and feel of the chat box elements

• Custom chat client JavaScript • Uses ECE SDK to handle the chat messaging and events • Dynamic web page changes using jQuery Components That Exist

• ECE JavaScript Chat SDK – a single JS file to be included

• jQuery – JS library for dynamic web document manipulation and Ajax interface for HTTP requests to back-end servers

On detecting the Enter key, use jQuery to get value Capture customer input from input text field in web page

Send message to agent JS SDK SendMessageToAgent() method

Using jQuery, append content to chat output element Add customer message to dialogue output in web page and scroll output to always display latest JS SDK OnAgentMessageReceived handler is Receive agent message invoked and is passed the message text Using jQuery, append content to chat output element Add agent message to dialogue output in web page and scroll output to always display latest Use jQuery to set the status bar content to include a Chat completed “Save Transcript” button

On detecting the Enter key, use jQuery to get value Capture customer input from input text field in web page

Send message to agent JS SDK SendMessageToAgent() method

HTML + CSS =

#chatbox-header { background-color: #70a6d5; height: 10%; top: 0; } For clarity, style not shown for parent #chatbox-output { container and all the child background-color: #f0f0f0; elements. height: 80%; overflow: auto; scroll-behavior: smooth; Note that the output element will be allowed to padding-left: 5px; overflow and scroll as we padding-right: 5px; add chat bubbles to it. }

#chatbox-input { Now let’s add some JS to background-color: #fdd060; make it all work. height:10%; bottom: 0; }

Configure basic settings for ECE chat library var librarySettings = new eGainLibrarySettings(); The ECE server URL to connect to librarySettings.CORSHost = 'http://rmlab-eceweb.cisco.com/system'; librarySettings.eGainContextPath = '/cfaweb/ece/';

The path to the localised /l10n/messaging_.properties files on the server from which this JS is retrieved. The properties files are customisable and contain things such as system message text.

Using the setting above and if the locale is en_US, if this JS file is http://localhost:8082/cfaweb/ece/demo/mychat.js, the resultant properties file will be read from http://localhost:8082/cfaweb/ece/l10n/messaging_en_US.properties

Create a new chat object using those settings and prepare to add event handlers var myLibrary = new eGainLibrary(librarySettings); var myChat = new myLibrary.Chat(); var myEventHandlers = myChat.GetEventHandlers();

Initialise event handlers to perform the required actions on session and chat dialogue events. Check the SDK docs for the complete list but these are some of the more important ones. myEventHandlers.OnAgentMessageReceived = function (agentMsgRecEvent) { // Append agent message to the chat dialogue output as a chat bubble addAgentMessage(agentMsgRecEvent.Message); }; myEventHandlers.OnSystemMessageReceived = function (sysMsgRecEvent) { // Actions to extract agent joined and other system info }; myEventHandlers.OnConnectionComplete = function () { // Chat complete actions, present option to save transcript };

Initialisation method talks to the ECE server and retrieves some additional settings / status. When the initialised event fires, add the customer object and start the session. myEventHandlers.OnConnectionInitialized = function(initData) { $('#chatbox-status').text('Initialised'); var customer = new myLibrary.Datatype.CustomerObject(); myLibrary.SetCustomer(customer); Add a customer object even if it’s not configured with myChat.Start(); any customer data and chat is anonymous. Not }; documented as essential but failure to do it will result in bad-request errors and much frustration. myEventHandlers.OnConnectSuccess = function() { $('#chatbox-status').text('Please wait ...'); addInfoMessage("Hi, an advisor will join as soon as possible"); // Capture customer input }; Connection successful so update the chat box UI and start to capture customer messages

Call the Initialize() method on the chat object to kick-off the session. Invoke the Start() method from your event handler once the initialisation step has completed. myChat.Initialize('1003', 'en', 'US', myEventHandlers, 'aqua', 'v11');

Lang and country locale used Constant ‘v11’ for lookup of properties file Template name (only used for post-chat email) Idientifies the particular chat service, mapping to ECE queue and ICM Script Selector Event handlers object just configured

• Enable input detection in web page element with ID chat-text, send entered text to the agent and also add it to the chat box output

$('#chat-text').keydown(function (event) { Add keydown event handler for text entry field if (event.keyCode == 13) { var msg = $('#chat-text').val(); Get the input text if CR / Enter was pressed if (msg.length > 0) { myChat.SendMessageToAgent(msg); Use Chat SDK to send message to agent addCustomerMessage(msg); Call function to add the chat bubble $('#chat-text').val(''); Empty the text input field ready for the next } message return false; } });

• Using jQuery add HTML to the chat box dialogue output area

• Add a timestamp and the new message text

• Use the same approach but with different CSS for agent messages and system info var addCustomerMessage = function (msg) { var chatout = $('#chatbox-output'); Use jQuery to access the chat box output area

chatout.animate({scrollTop: chatout[0].scrollHeight}, 100); Ensure current content is fully scrolled-up

var timestamp = '

You ’ + gettime() + '

'; var chatbubble = '

' + msg + '

'; Build HTML for timestamp and chat bubble chatout.append(timestamp + chatbubble); } Add the timestamp and chat bubble HTML to the dialogue output

• A chat session event handler is configured to invoke a function when a message is received from the agent

• The incoming message is appended to the chat box dialogue output in the same way as for the customer message

• Done using a different object ID and associated style to distinguish it from a customer message bubble myEventHandlers.OnAgentMessageReceived = function(agentMsgRecEvent) { addAgentMessage(agentMsgRecEvent.Message); }; OnAgentMessageReceived handler is set to add incoming messages to the chat box output

• Be aware – this doesn’t currently work as you’d expect

• The OnAgentJoined event does not fire; use OnSystemMessageReceived instead

• Use regex match to extract name and update the chat box status field myEventHandlers.OnSystemMessageReceived = function(sysMsgRecEvent) { var msg = sysMsgRecEvent.Message; var srch = /You are now chatting with (.*)/.exec(msg); Try to parse agent name from system message if (srch != null) { agent = srch[1]; If found, use jQuery to set the agent name in the $('#chatbox-status').text(agent); chat box status field

} else { addInfoMessage(sysMsgRecEvent.Message); } For anything else, just add it to the output }; dialogue as a different type of bubble

BRKCCT-2631 © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 34 1. Chat session started, waiting for agent to accept the request This Is What You Get and join 2. Status field updated when agent joined and chat dialogue populated with general info, customer and agent messages 3. Agent side showing corresponding messages

BRKCCT-2631 © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 35 • Can collect using a pre-chat form or use logged-in user Add Customer Details details where web-site supports it. • Populate the customer object added before chat starts, adding email address, first-name, last-name.

Chat can be personalised and existing customer is looked-up or new one created at server-side.

BRKCCT-2631 © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 36 Add Customer Details Before Chat Starts var customer = new myLibrary.Datatype.CustomerObject(); customer.SetPrimaryKey(customer.PrimaryKeyParams.PRIMARY_KEY_EMAIL, customerInfo.email); Add primary key for customer lookup var custEmail = new myLibrary.Datatype.CustomerParameter(); custEmail.eGainParentObject = "casemgmt"; Set the eGain/ECE object containing the item custEmail• .eGainChildObjectWhat the code looked= "email_address_contact_point_data like with no customer details to" ;be included custEmail.eGainAttribute• Simply create= customer"email_address object and"; assign it to chat request custEmail.eGainValue = customerInfo.email; Set the email address using website logged-in custEmail• .eGainParamNameNow include some= "email_address customer data"; items on theuser chatinfo request custEmail.eGainMinLength• Create customer= "1" object; custEmail.eGainMaxLength = "50"; Presentation related fields that appear to be custEmail.eGainRequired• Create and =configure "1"; a parameter for each datalegacy item items (email, from firstthe template and last approach. names) Will custEmail.eGainFieldType• Add parameters= "1" to; customer get errors if not set but appear to have no real custEmail.eGainPrimaryKey• Assign customer= "1" to ;chat request use in the API. custEmail.eGainValidationString = ""; Add the new item to the customer object to be customer.AddCustomerParameter(custEmail); configured on the chat request myLibrary.SetCustomer(customer); myChat.Start();

BRKCCT-2631 © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 37 Add Customer Details Before Chat Starts var customer = new myLibrary.Datatype.CustomerObject(); customer.SetPrimaryKey(customer.PrimaryKeyParams.PRIMARY_KEY_EMAIL, customerInfo.email); Add primary key for ECE customer lookup Repeat to create and add first and last name params plus any custom activity data items var custEmail = new myLibrary.Datatype.CustomerParameter(); custEmail.eGainParentObject = "casemgmt"; Set the eGain/ECE object containing the item custEmail.eGainChildObject = "email_address_contact_point_data"; custEmail.eGainAttribute = "email_address"; custEmail.eGainValue = customerInfo.email; Set the email address using info we hold for the custEmail.eGainParamName = "email_address"; user logged-in to the website custEmail.eGainMinLength = "1"; custEmail.eGainMaxLength = "50"; Presentation related fields that appear to be custEmail.eGainRequired = "1"; legacy items from the template approach. custEmail.eGainFieldType = "1"; Will get errors if not set but appear to have no custEmail.eGainPrimaryKey = "1"; real use in the API. custEmail.eGainValidationString = ""; Add the new item to the customer object to be customer.AddCustomerParameter(custEmail); customer.AddCustomerParameter(custEmail); configured on the chat request myLibrary.SetCustomer(customer); myChat.Start();

What Do We Have To Do?

• Select a chatbot / AI-driven dialogue engine • Many options to pick from, just a few of the big names ... • Google Cloud AI + Dialogflow (API.AI), Azure Bot Service, Amazon Lex, Watson Conversation

• Establish an interface to it from the web page chat component

• Direct initial customer messaging to/from chatbot rather than hold dialogue with the agent • AI conversation to determine customer intent and capture entities from the conversation • For example, wanting to make a reservation and capturing the itinerary details

• Shift the customer chat dialogue to the agent at the determination of the chatbot

• Pass context derived from the chatbot phase to the agent

Why Watson Conversation?

• Simple and quick to get started

• Pre-built sample AI conversation to get started with – simply add the chat messaging

• Easy to interface with directly or via NodeRED (flow based wiring tool)

• Watson is widely known about and many people ask about CCE integrations

• Have already integrated CVP with Watson Conversation to demonstrate AI-driven IVR

NodeRED is used here to expose a simplified interface and also overcome CORS issues when the customer website is hosted on different domain. (NodeRED will run on any platform) NodeRED Watson Conversation

Chatbot Dialogue

Context Data

Agent Chat Session

Customer-Side Web Chat Agent ECE Chat Desktop

• Browse to IBM Cloud and sign-up

• Browse to the catalog of Watson services and add Conversation • https://console.bluemix.net/catalog/?category=watson • https://www.ibm.com/watson/services/conversation/

• Navigate to your IBM Cloud dashboard • https://console.bluemix.net/dashboard/apps

• Select the service

• Create new access credentials to use with the API

{ "url": "https://gateway.watsonplatform.net/conversation/api", "username": "55a09f9f-5d1f-4557-b47e-c83f8c40a238", "password": "vzbfjwePsV" }

• Simply use Postman or Watson API Explorer to send a JSON request • https://watson-api-explorer.mybluemix.net/apis/conversation-v1

View the workspace details to get the ID to include in the request URL path.

Workspace is essentially the particular application you want to execute.

Set basic authorisation with the access credentials just created

Kick-off new conversation – empty input and no existing conversation ID BRKCCT-2631 © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 45 Watson Conversation The response and its data

• JSON response to initial message (so no derived intent / entities yet)

• Full API developer guide https://www.ibm.com/watson/developercloud/conversation/api/v1/

Response includes: • Output text to display in chat bubble • Conversation ID to send on next request to continue the dialogue with the same session context • Intents and entities derived from the dialogue using AI and rules • Other context data items created based on the actual dialogue (date-time, places, names, reference IDs, etc)

Why Not Send HTTP Requests Directly To Watson Conversation?

• NodeRED front-ending Conversation allows us to just send the chat text

• We don’t have to include all the dialogue context in the request back to the server

• Access credentials / workspace ID all handled by the Conversation Node

• Some Watson services support CORS – Conversation not currently one of them

• NodeRED in the path does support CORS

• Useful tool to perform any other integration and data manipulation required

Incoming HTTP request handler for Watson Conversation specific URL path request / response

Map chat input text to Conversation input

Set HTTP response header for CORS and send Conversation response JSON back to chat client

Build the flow by dragging-and-dropping nodes from the palette, joining-up and configuring their properties

• Browse to the IBM Cloud service catalog

• Add Node-RED to your services

• Browse to http://host@domain you configured for your service

• Launch the Flow Editor and build flows

{ "text": "", ”username": "Harry" }

{ "intents": [ { "intent": "BookFlight", "confidence": 0.2341093420369586 } ], "entities": [], "input": { "text": "Hi" }, "output": { "text": [ "Hi Harry, I can help you plan a new trip, manage an existing reservation or deal with any travel problems." ], "nodes_visited": [ "Welcome" ], "log_messages": [] }, "context": { "username": "Harry", "conversation_id": "79e7deaa-9204-471d-8cc9-c55835cb5700", "system": {

• Triggering the chat option on the web page starts dialogue with Watson Conversation rather than with an agent

• New AI dialogue is triggered using an empty input string and no existing context

function startChatBot() { agent = 'CFA-Bot'; Show in status and timestamps the connected $('#chatbox-status').text(agent); party as “CFA-Bot”

sendMessageToBot(''); Send the empty start message to Watson

Use common input method for both bot and startChatboxInput(sendMessageToBot); agent phases but pass-in the input handler } function so customer input is sent to the right destination

• Processing is the same as before with just agent chat, apart from dynamically passing in the input message handler depending on the bot or agent dialogue phase function startChatboxInput(sendAction) { Reset the input handling when we change the $('#chat-text').off("keydown"); send handler from bot to agent $('#chat-text').keydown(function (event) { if (event.keyCode == 13) { var msg = $('#chat-text').val(); if (msg.length > 0) { sendAction(msg); Use handler passed into this function to process addCustomerMessage(msg); the customer input $('#chat-text').val(''); } return false; } }); }

• Use jQuery.ajax to perform HTTP POST to Node-RED Watson flow

• Sends the input chat text passed into the function

• Sends the customer name as incoming context so Watson can personalise output

• Content type is x-www-form-urlencoded by default (avoids pre-flight OPTIONS requests when making cross-domain requests) function sendMessageToBot(msg) { $.ajax({ type: "POST", url: "http://ptclbarc.eu-gb.mybluemix.net/cfabot", data: { text: msg, username: customerInfo.firstname }, ... } }); };

• The JSON format response is automatically exposed as a JS object

• Add a chat message bubble, concatenating multiple output strings if necessary function sendMessageToBot(msg) { $.ajax({ type: "POST", url: "http://ptclbarc.eu-gb.mybluemix.net/cfabot", data: { text: msg, username: customerInfo.firstname }, success: function (rspdata) { addAgentMessage(rspdata.output.text.join(' ').trim()); }, error: function (jqXHR, status, error) { // Display error text as info bubble in chat } }); };

• Watson Conversation built to identify conditions when transfer to agent is needed

• Examine context in Watson response, looking for transfer flag and data to be passed success: function (rspdata) { addAgentMessage(rspdata.output.text.join(' ').trim()); if (rspdata.context.transferReason) { xferMessage = 'Transfer From Bot: ’ + rspdata.context.transferReason + ', ' + rspdata.context.fromLocation + ' -> ' + rspdata.context.toLocation + ', Departing: ’ + rspdata.context.departDate;

startChatAgent(); Build a message to be sent to the agent once the agent chat phase has } started, containing useful context derived from the Watson dialogue },

• ECE Chat SDK is used as previously to initialise and start the agent chat session

• Once started, send hidden transfer message from customer-side and start dialogue myEventHandlers.OnConnectSuccess = function() {

Update status field and add an informational chat bubble $('#chatbox-status').text('Please wait ...'); addInfoMessage("Hi, an advisor will join as soon as possible");

Restart chat input, but this time passing a handler that will send to the agent startChatboxInput(function(msg) {myChat.SendMessageToAgent(msg);});

Send the transfer information from Watson as a chat message to the agent if (xferMessage) myChat.SendMessageToAgent(xferMessage); };

• ECE Chat SDK is used as previously to initialise and start the agent chat session

• Once started, send hidden transfer message from customer-side and start dialogue myEventHandlers.OnConnectSuccess = function() {

Update status field and add an informational chat bubble $('#chatbox-status').text('Please wait ...'); addInfoMessage("Hi, an advisor will join as soon as possible");

Restart chat input, but this time passing a handler that will send to the agent startChatboxInput(function(msg) {myChat.SendMessageToAgent(msg);});

Send the transfer information from Watson as a chat message to the agent if (xferMessage) myChat.SendMessageToAgent(xferMessage); };

What If We Want To Make Routing Decisions Based On Chatbot Output?

• Send custom data fields on the start chat request

• For example, bot_result containing the reason for transferring to agent

• Done the same way as for customer data included in the chat request

• But, also have to create the custom activity data item in ECE Admin ...

• ... And map it into the ICM routing request for an agent

... add customer data items as done previously Create a new data item to add to the customer var botrslt = new myLibrary.Datatype.CustomerParameter(); botrslt.eGainParentObject = "casemgmt"; Set the eGain/ECE parent object containing the botrslt.eGainChildObject = "activity_data"; new item and the item object type botrslt.eGainAttribute = "bot_result"; botrslt.eGainValue = botOutcome; Set the bot_result data item to the value returned botrslt.eGainParamName = "bot_result"; in the chatbot context data: var botOutcome = botrslt.eGainMinLength = "1"; rspdata.context.transferReason; botrslt.eGainMaxLength = "32"; botrslt.eGainRequired = "1"; botrslt.eGainFieldType = "1"; botrslt.eGainPrimaryKey = "0"; botrslt.eGainValidationString = ""; Add the new item to the customer object to be customer.AddCustomerParameter(botrslt); configured on the chat request

In the Tools console, add a new Activity Data Custom item with attribute name bot_result

Under Call Variables administration, add the call variable bot_result and map it to the Activity Data attribute just created

Under Queues administration, configure which ECE data items are passed to ICM, in this example bot_result  CV4

Using The SDK Gives Control Over Customer-Side Messaging Processing ...

• We can send messages from the agent that are interpreted but not displayed • Can invoke anything that’s possible using JavaScript in the customer’s browser session • Agent triggers customer-side actions without customer involvement

• But, what are the use cases? ... • Enable/disable capability in the chat client, turning features on/off • Pop-up web content for specific functions such as sensitive data collection or authentication • Page-pushing possible as standard but this provides a greater level of control • Seamless escalation to voice / video • Remote Expert Mobile Meet-Me for sharing

• Just send chat messages with a simple command syntax, for example ...

//COMMAND arg1 arg2 arg3 ... //START_VIDEO 4507 //OPEN_URL http://host/webcontent

• The customer chatbox JS can inspect incoming messages and detect commands

• Processes command rather than adding as message bubble to the chat dialogue

• Ideally want to trigger commands using custom buttons on ECE agent desktop • Non-trivial work to customise the ECE desktop JS and clearly unsupported

• So, compromise solution possible using Quick Responses

Message processed as command rather than added to chat dialogue

Implementation Steps

• Assumes Remote Expert Mobile (REM) already implemented

• WebRTC voice/video calling and content sharing from web browser and mobile devices (Detail is out-of-scope for this session)

• Agent Side • Configure the agent extension for the User object in ECE Admin (no automatic way to get it) • Add a Quick Response to insert the start video command into the chat dialogue

• Customer Side • Add JavaScript to intercept start video command • Use REM SDK to invoke voice/video session to the agent

• Destination DN or SIP URI needed to make direct call to agent video endpoint

• Not possible to access this automatically

• Compromise is to read it from an agent data item

• Using work_extension attribute in this example

• Under User Data category of Business Objects, add a new item user_extension

• Map it to the work_extension attribute

• Provides a way we can reference the User Data field that was configured as the destination DN

BRKCCT-2631 © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public 71 Adding Quick Response Under ECE Knowledge Base  Chat  Quick Responses, add a new response containing the command that will be sent to the chat client to trigger the REM video session.

Note. Field names to be substituted are prefixed by double ASCII code 96 characters, not single quotes. Response content comprises static text with field substitution. user_extension is the macro containing the agent video device DN.

Under Queues administration, add the Video Escalation quick response to the pull-down list visible on the agent desktop.

myEventHandlers.OnAgentMessageReceived = function (agentMsgRecEvent) { var msg = agentMsgRecEvent.Message;

var srch = /(?:

)?\/\/(START_VIDEO|OPEN_URL)([^<]*)(?:<\/p>)?/.exec(msg); OnAgentMessageReceived handler fires and the agent message is added to the chat dialogue if (srch == null) { addAgentMessage(msg);

} else if (srch[1] == 'START_VIDEO') { TocmdStartVideo implement hidden(srch commands:[2]); • Inspect message for command keywords at start of message } else if (srch[1] == 'OPEN_URL') { •cmdOpenUrlCall required(srch command[2]); handler and pass remainder of the message to it } };

myEventHandlers.OnAgentMessageReceived = function (agentMsgRecEvent) { var msg = agentMsgRecEvent.Message;

var srch = /(?:

)?\/\/(START_VIDEO|OPEN_URL)([^<]*)(?:<\/p>)?/.exec(msg); Regex search for command keywords, ignoring optional

element (on quick responses) if (srch == null) { addAgentMessage(msg); Not command so add chat bubble as normal

} else if (srch[1] == 'START_VIDEO') { Execute START_VIDEO command cmdStartVideo(srch[2]);

} else if (srch[1] == 'OPEN_URL') { Execute OPEN_URL command cmdOpenUrl(srch[2]); } };

function cmdStartVideo(cmd) { var cmdarg = /(\d+)/.exec(cmd); Regex search to parse agent DN

if (cmdarg != null) { var remscript = document.createElement('script');

Create new HTML