Chat Has Rapidly Become the Preferred Communications Channel Between Individuals, with Groups and for Customer Interaction

#CLUS Enhancing Customer Chat Experience Using AI & CCE Enterprise Chat and Email (ECE)

Paul Tindall @tindallpaul BRKCCT-2010

#CLUS 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 and the ECE 12.0 REST API

Questions? Use Cisco Webex Teams to chat with the speaker after the session How 1 Find this session in the Cisco Live Mobile App 2 Click “Join the Discussion” 3 Install Webex Teams or go directly to the team space 4 Enter messages/questions in the team space

Webex Teams will be moderated cs.co/ciscolivebot#BRKCCT-2010 by the speaker until June 16, 2019.

• Non-voice channels for CCE (Contact Center Enterprise)

• 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

• Customisable chat templates • Configuration files • CSS to manipulate layout, look and feel • Localised properties file for text 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 a path for integrating any type of chat client

• HTTP / REST Asynchronous Messaging API • Server-side chat API • Integration of non-browser based chat clients • Any text messenger with an API

• Finesse desktop Chat & Email workflow triggers

• ECE now part of “SPOG” PCCE admin

• Agent availability granularity

• Define which precision queues and skill groups are used to service ECE Queues

• 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 if API access granted) • Social media messaging – Twitter, Facebook • SMS text messaging • Webex Teams, Jabber (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.

#CLUS BRKCCT-2010 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 19 The ECE JavaScript SDK Some of the key functionality • 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 from Capture customer input input text field in web page

Send message to agent JS SDK SendMessageToAgent() method

Using jQuery, append content to chat output element in Add customer message to dialogue output web page and scroll output to always display latest

JS SDK OnAgentMessageReceived handler is invoked Receive agent message and is passed the message text

Using jQuery, append content to chat output element in Add agent message to dialogue output 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 from Capture customer input input text field in web page

Send message to agent JS SDK SendMessageToAgent() method

Using jQuery, append content to chat output element in Add customer message to dialogue output web page and scroll output to always display latest

JS SDK OnAgentMessageReceived handler is invoked Receive agent message and is passed the message text

Using jQuery, append content to chat output element in Add agent message to dialogue output 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

Add the static elements into HTML

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 padding-left: 5px; to overflow and scroll as padding-right: 5px; we add chat bubbles. }

#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 myChat.Start(); with 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 Constant ‘v11’ used 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 Event handlers object just configured Selector

• 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 in 11.6 – this doesn’t 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 $('#chatbox-status').text(agent); the chat box status field

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

#CLUS BRKCCT-2010 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 33 This Is What You Get 1. Chat session started, waiting for agent to accept the request 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

#CLUS BRKCCT-2010 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 34 • 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.

#CLUS BRKCCT-2010 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 35 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 onuser the info chat 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 the first 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();

#CLUS BRKCCT-2010 © 2019 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 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 custEmail.eGainParamName = "email_address"; the 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); 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 Dialogflow, Azure Bot Service, Amazon Lex, IBM Watson Assistant, Cisco MindMeld

• 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 Assistant?

• 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 Node-RED (flow-based wiring tool)

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

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

• Browse to IBM Cloud and sign-up

• Browse to the catalog of Watson services and add Watson Assistant • https://cloud.ibm.com/catalog?search=assistant • https://www.ibm.com/cloud/watson-assistant/

• Navigate to your IBM Cloud dashboard / services • https://cloud.ibm.com/

• Select the Assistant service

• Retrieve / create access credentials to use with the API

• Create a new skill by importing a ready-built sample

• Get the ID for use in Postman to test manually

View the API details to get the ID to include in the request URL path

Workspace ID determines the assistant dialogue that is invoked (API v1)

Assistant ID is used in API v2

• Simply use Postman to send a hand-crafted JSON request

• Assistant API Docs https://cloud.ibm.com/apidocs/assistant • Example using Assistant API v1

Set basic authorisation Kick-off new conversation – using the assistant service access credentials • JSON format body • Containing empty input text • No existing conversation ID

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

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 Assistant?

• Node-RED front-ending Assistant 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 Assistant Node

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

• Node-RED in the path does support CORS

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

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

Map chat input text to Assistant input

Set HTTP response header for CORS and send Assistant 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 Assistant 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 addCustomerMessage(msg); process 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 Assistant 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 botrslt.eGainParamName = "bot_result"; returned 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 = ""; customer.AddCustomerParameter(botrslt); Add the new item to the customer object to be configured on the chat request

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

In CCE Chat and Email Global admin, 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

In CCE Chat and Email Service admin, add the call variable bot_result and map it to the custom 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 Message 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 • Insert real-time translation service • 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 • Meet-Me codes for web-content sharing

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

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

• 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 video solution JS 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

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

Map it to the work_extension attribute

Macro user_extension provides a way we can reference the User Data field that was configured as the destination DN

#CLUS BRKCCT-2010 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 75 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 video session.

Note. Field names to be substituted are prefixed by double back-tick characters (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.

#CLUS BRKCCT-2010 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 76 Adding Quick Response In CCE Chat and Email Service admin, Apps  Chat  Quick Responses, add a new response containing the command that will be sent to the chat client to trigger the video session.

#CLUS BRKCCT-2010 © 2019 Cisco and/or its affiliates. All rights reserved. Cisco Public 77 Adding Quick Response In CCE Chat and Email Service admin, Apps  Chat  Quick Responses, add a new response containing the command that will be sent to the chat client to trigger the video session.

Response content comprises static text with field substitution. user_extension is the macro containing the agent video device DN.

Note. Field names to be substituted are prefixed by double back-tick characters (ASCII code 96 characters, not single quotes)

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 if (srch == null) { optional

element (on quick responses) 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