VidyoEngage for Genesys Widgets

Transcription

1 VidyoEngage for Genesys Widgets Developer Guide Product Version Document Version A April, Vidyo, Inc. all rights reserved. Vidyo s technology is covered by one or more issued or pending United States patents, as more fully detailed on the Patent Notice page of Vidyo's websitehttp:// as well as issued and pending international patents. The VIDYO logotype is a registered trademark of Vidyo, Inc. in the United States and certain other countries, and is a trademark of Vidyo, Inc. throughout the world. VIDYO and the Vidyo family of marks are trademarks of Vidyo, Inc. in the United States and throughout the world.

2 TABLE OF CONTENTS Overview...1 Click to Vidyo (WebSocket)... 1 Click to Vidyo (REST)... 4 Click to Vidyo (REST Simple)... 6 Chat to Vidyo (eservices)... 6 Chat to vidyo escalation implementation... 7 Integrate ve4gchat.js to custom web page Installation Guidelines Supported Platforms and Browsers Build Requirements Build Instructions Directory Structure Libraries Used (Third party and others)...17 Sample Workflow and Logs Click to Vidyo Chat to Vidyo The ve4gchat web application Debug Web Applications ii

3 Overview The sample widgets contain information about possible integrations for the customer web page and Genesys Vidyo Server. The sample codes cover the following: Click to Vidyo (WebSocket implementation) Click to Vidyo (REST full implementation) Chat to Vidyo (sample esevices 8.5 chat application with extension for Vidyo messaging handler) The chapters below explain the structure and methods for implementing the ve4g_click.js file. This is a core file that is used for the click to video implementation. For chat to video implementation, the JavaScript file is named as follows: ve4g_chat.js. Click to Vidyo (WebSocket) The configuration section sets the server Uri and path to mandatory vidyo.min.js. The _server_uri and script variables contain Uri to Genesys Vidyo Server host and secured port. The vidyo.min.js script is a mandatory initialization script, which is executed on the Click to Vidyo page load. The Uri should be structured as follows: Make sure this Uri can be loaded by the browser before testing the Click to Vidyo widget. JS Local Variables _guesturi, url for guest access to meeting room, filled with value from Genesys Vidyo Server _popup, popup window object initialized if open video to popup is enabled _popup_style = "height=600, width=800, top=300, left=300, scrollbars=0" _popup_label = "Video chat" frame; _frame_style = "" _frame_width = 650 _frame_height = 700 _topic = "NONE" //iframe object for embedded mode 1

4 Overview UI Elements Objects of the UI elements are loaded from the document when the Click To Video button is clicked, which include the following: _click2videobutton; _click2videocheck; _click2videocancel; _click2videoclose; _click2videoerrorcb; _click2videocmb. JavaScript as well as browser detection are used to determine whether the video meetings needs to be navigated to WebRTC or the web client. The details regarding browser detection are not provided in this document. JS Object _vidyo The following parameters are included: debug : true/false, enables/disables browser console log firstname : "", string identifier of customer, can be empty lastname : "", string identifier of customer, can be empty div_id : "vidyo_div", id of the HTML element that contains embedded video window frame frame_id : "vidyo_frame", id of the HTML embedded video frame element checkbox_id : "ispopupwindow", id of the pop-up checkbox element tovideo_button_id : "click2videobtnid", id of the click to video button element cancel_button_id : "cancelclick2videobtnid", id of the cancel video button element close_button_id : "closevideobtnid", id of the close button element cmb_topic_id : "click2videocmbid", id of the topic selection combo box element is_popup : false/true, boolean value signaling if the video window will be open as a pop-up or embedded frame webrtcurl : base Uri of the webrtc Vidyo client thin application that is opened with the guestlink parameter provided by the Genesys Vidyo Server clicktovideo method, e.g.: " vidyoweburl : base Uri of web vidyo client thin application that is opened with the guestlink parameter provided by the Genesys Vidyo Server clicktovideo method, e.g.: " JS Functions Exposed to index.jsp clicktovideo() Parameters: none Description: Initializes UI elements into the JavaScript _vidyo object and invokes clicktovideofunction to establish the video interaction in Genesys. 2

5 Overview cancel() Parameters: none Description: Sends the request to cancel the vidyo interaction previously created by the customer. It will cause the Genesys interaction to stop or an agent notification message. close() Parameters: none Description: Cleans up the UI after the conference is finished. Internal ve4g_click.js functions clicktovideofunction Parameters data, key value pair list of data onerror, error callback function Description: Initiates user data, sets the error call back function, and invokes the Genesys Vidyo Server API method _gv.api.clicktovidyo(data, showclicktovideo, onerrorfn). The showclicktovideo is a successful callback method. showclicktovideo Parameters: obj, response JSON message from the Genesys Vidyo server. It contains guestlink, a Vidyo meeting room link, which has been started by the agent desktop application. Description: Parses the guestlink from the JSON answer and invokes the showvideo method. showvideo() Parameters: none Description: Checks the _vidyo object setting and invokes the method for the pop-up or embedded show video functionality (). showvideoin(guestlink) and showvideoout(guestlink) Parameters: guestlink, meeting room Uri Description: Calls the generatevidyoframesrc method to get the Uri to the Vidyo thin client application and shows the video in the embedded/pop-up mode. generatevidyoframesrc(guestlink) Parameters: guestlink, meeting room Uri 3

6 Overview Description: Compiles the Uri to the Vidyo via webrtc or the web client that is initialized and used for the video meeting room. The full Uri is a return value. The browser navigates to this Uri and connects to the meeting room. cleanup() Parameters: none Description: Resets the Vidyo object and objects initialized during the Click to Vidyo session. setuistatus(call_status) Parameters: call_status, string parameter reflects the Vidyo request status Description: Sets UI elements based on the current call status. log(message), warn(message), error(message), currenttime() Parameters: message, string log record Description: Console logger methods solely for debugging purposes. The log records are enabled if _vidyo.debug is set to true. Load Data The Load Data button makes it easy to conduct user data testing. A data sample file is copied in the WEB-INF\classes\session.userdata file. One record displays per row within the user data file. For example: Keyname1=Value1 Keyname2=Value2 After clicking the Load Data button, an interaction is created in the JSON compatible string format based on the user data in the file that is attached to the request. Click to Vidyo (REST) The REST client partially uses the same methods as WebSocket. The only difference is the communication to the Genesys Vidyo Server protocol. This chapter only describes the methods that are different from the WebSocket implementation. The implementation uses JQUERY to perform asynchronous REST requests. The Genesys Vidyo Server configuration is as follows: _server_service_uri, link to service core e.g.: " _server_rest_c2v, service Click to Vidyo name as it is configured in the Genesys Vidyo Server application object e.g.: "click-to-vidyo" _server_rest_guestlink, get guestlink Uri method must have value "/guestlink" _server_rest_stop, stop Interaction Uri method must be set to "/stop" 4

7 Overview The configuration is set at the very beginning of the JavaScript. JS Functions Exposed to index.jsp cancel() type: POST Parameters: current session id, the Id is set when the click to video function is successful Description: Sends a POST request to the Uri compiled from the _server_service_uri + _current_session.id + _server_rest_stop. This invokes the STOP interaction or agent notification functionality in Genesys. Internal ve4g_click.js Functions clicktovideofunction type: POST Parameters: none Description: Sends a request to the Uri compiled from the _server_service_uri+_server_rest_c2v. The return value is a JSON response from the Genesys Vidyo Server. It contains information about current sessions that are created in ORS. If the request is successful, then the geturi(_current_session) method is called. geturi(_current_session) type: GET Parameters: none Description: Sends a request to the Genesys Vidyo Server to get the guestlink meeting room Uri. The response is a JSON message that contains Uri information and a success/failed flag. Once the meeting room Uri is obtained from the Genesys Vidyo Server, the same method chain is executed as in the WebSocket implementation. It starts with showvideo() and opens the video window based on the customer s selection (popup/embedded) and the type of browser being used. The response message structure for the click to video implementation is explained in chapter Click to Vidyo. Load Data The Load Data button makes it easy to conduct user data testing. A data sample file is copied in the WEB-INF\classes\session.userdata file. One record displays per row within the user data file. For example: Keyname1=Value1 Keyname2=Value2 5

8 Overview After clicking the Load Data button, an interaction is created in the JSON compatible string format based on the user data in the file that is attached to the request. Click to Vidyo (REST Simple) The Simple sample application doesn t contain Load Data functionality. Click to Vidyo covers the same functionality as the Click To Vidyo (REST) sample. Chat to Vidyo (eservices) Sample chat to vidyo implementation is developed and tested at single and multitenant environments with web-api version 8.5. It uses REST services to open and manage chat session. For older web-api releases it is necessary to follow steps from chapter Chat to vidyo escalation implementation. The document doesn't contain information about the chat servlet solution, but focuses on the Chat to Vidyo escalation methods and call cleanup process. The Chat to Vidyo escalation starts in the getmessages() JavaScript function. It reads the last messages from the agent if the message contains the Vidyo meeting room Uri and then the Vidyo session is started. Note The eservices chat client application is delivered with the escalation sample code. However, it is not production-ready code. The application should be used only for demonstration purposes. getmessages() type: POST Parameters: sessionid, transcriptposition Description: Gets the last chat message from the agent. If the message text length is more than 0, then the message content analysis starts in the processmessage() function. processmessage(strmessage) Parameters: strmessage, text from last agent s message Description: The function checks for the presence of the "Message:" string. When the string is found in the message, message parsing checks the start or end Vidyo meeting event. The string starts the Vidyo meeting or cleans up previous Vidyo meeting sessions. The openvidyosession(guestlink) method is called and its functionality is the same for Click to Vidyo use cases. sendmessage(message) type: POST Parameters: message, is a text message to be sent to chat 6

9 Overview Description: Executes the AJAX POST to the WEB-API server to send a message to an agent. The method is used to initiate a Vidyo meeting. If the Escalate To Video button is clicked, the message to the agent chat is distributed. The text is set to "Message:VidyoRequest". If the agent s application detects that the text in the chat transcript is enabled to do video, then the application starts the process of establishing the video meeting. The messaging related to chat to video escalation is done through the chat transcript. It is possible to filter out the messages related to chat to video signaling the returned message in the JavaScript. Current releases do not perform any kind of message filtering due to enhanced debugging of messages exchanged between the agent and customer. Chat to vidyo escalation implementation All the chat to vidyo escalation signaling is done using chat window. All the escalation login is developed in javascript file js\ve4gchat.js released in Sample application. Request chat by customer The customer is requesting escalation by sending "Message:VidyoRequest" to chat view. To automate this functionality, it is enough to develop button that will invoke send message functionality with prefilled text. For testing purposes it can be typed in manually. In ve4gchat.js is there method send message invoked by button. //index.jsp <button id="escalate2vidyo" onclick="_chat2vidyo.escalate2vidyo('message:vidyorequest')">escalate To Video</button> //js/ve4gchat.js _chat2vidyo["escalate2vidyo"] = function(message){ sendmessage(message); }; //send message can be simplified like this, to serve video escalation request only function sendmessage(message) { log("text to be sent="+ message); try{ //send message web-api implementation }catch(e){ error("sendmessage - Failed to execute: "+e); } }; 7

10 Overview Process guestlink and open vidyo session After WDE creates meeting and sends guestlink through the chat, the chat text message is distributed to customer application. The sample chat 2 vidyo is monitoring every new message and parsing guestlink. For this purpose there is function processmessage(strmessage). //js/ve4gchat.js function processmessage(strmessage) { if (strmessage) { if (strmessage.indexof("message:") > -1){ if (strmessage.indexof("flex.html?roomdirect.html") > -1){ var linkidx = strmessage.indexof("http"); _chat2vidyo.vidyoroomurl = strmessage.substring(linkidx); openvidyosession(_chat2vidyo.vidyoroomurl); } if (strmessage.indexof("\/join\/") > -1){ var linkidx = strmessage.indexof("http"); _chat2vidyo.vidyoroomurl = strmessage.substring(linkidx); openvidyosession(_chat2vidyo.vidyoroomurl); } if (strmessage.indexof("message:endvidyorequest") > -1){ _chat2vidyo.vidyosessionactive = false; } } } } The process message function is called from function getmessages(). For integration with older versions of genesys chat implementation, it needs to be placed to method that is processing incoming chat message. The result of processing can be: - Opening of video session by calling openvidyosession and setting active session flag true. - Closing of video view on Message:EndVidyoRequest. Setting of active flag to false. 8

11 Overview When processmessage identifies guestlink message from WDE, it starts video client processing openvidyosession(_chat2vidyo.vidyoroomurl);. //js/ve4gchat.js function openvidyosession(guestlink) { try { if (!_chat2vidyo.vidyosessionactive) { showvideo(); _chat2vidyo.vidyosessionactive = true; } else warn("another chat to vidyo request in progress, don't execute twice"); } catch (e) { error("failed to open vidyo session error="+e); } } function showvideo(){ log("showvideo vidyo popup: "+_chat2vidyo.is_popup+" guestlink: "+_chat2vidyo.vidyoroomurl); if (_chat2vidyo.is_popup) showvideoout(_chat2vidyo.vidyoroomurl); else showvideoin(_chat2vidyo.vidyoroomurl); } Method show video is opening video session embedded or in separate popup. //show embedded video function showvideoin(guestlink){ var vidyosrc = generatevidyoframesrc(guestlink); log("setting up video iframe src: "+vidyosrc); if (frame &&!_chat2vidyo.is_popup) { frame.width = _frame_width; frame.height = _frame_height; frame.style.display = "block"; frame.src = vidyosrc; frame.focus(); } } 9

12 Overview If customer selects popup window show video out is invoked. //show video in popup function showvideoout(guestlink){ var vidyosrc = generatevidyoframesrc(guestlink); log("showvideoout open popup with src: "+vidyosrc); _popup = window.open(vidyosrc, _popup_label, _popup_style); _popup.onbeforeunload = function(e){ _chat2vidyo.vidyosessionactive = false; log("popup unloaded set vidyosessionactive="+_chat2vidyo.vidyosessionactive); return null; }; _popup.focus(); } The flag _chat2vidyo.is_popup is set from combo box at customer web page index.jsp. //index.jsp Enable Popup?<input id="ispopupwindow" type="checkbox" value="0" onchange="_chat2vidyo.ispopup()"></input> //ve4gchat.jsp _chat2vidyo["ispopup"] = function(){ }; if (_click2videocheck.checked) else _chat2vidyo.is_popup = true; _chat2vidyo.is_popup = false; log("_chat2vidyo[ispopup]: "+_chat2vidyo.is_popup); Once the video popup or embedded frame is initialized, the customer will join the video session. For guide how to integrate javascript into custom web page follow instructions in chapter Integrate ve4gchat.js to custom web page. Integrate ve4gchat.js to custom web page For integration of ve4gchat.js to any chat application it is necessary to: Include ve4gchat.js in heading of chat page Find process chat message from genesys method Modify ve4gchat.js to make function processmessage(strmessage) available globally Modify customer chat application to add video session controls 10

13 Overview Step by step instructions are explained in following chapter using empty page and button that is replacing chat handle message function. Create test index.jsp file For a test purpose the web application ve4gchat is created. The index.jsp is in its root folder. <html> <header> </header> <script src="js/jquery.min.js"></script> <script src="js/ve4gchat.js"></script> <body onload="_chat2vidyo.onload()"> <p><label for="ispopupwindow" style="margin-right:5" >Enable Popup?</label><input id="ispopupwindow" type="checkbox" value="0" onchange="_chat2vidyo.ispopup()"></input></p> <p><label for="meetingurl" style="margin-right:25" >Meeting Url</label><input id="meetingurl" type="text" size="50"></p> <p><button id="joinvideobtnid" onclick="_chat2vidyo.processmessage('message:' + document.getelementbyid('meetingurl').value)">join</button></p> <div id="vidyo_div"> <iframe id="vidyo_frame" style="display:none" allow="microphone; camera"> </iframe> </div> </body> </html> The button id="joinvideobtnid" is fake button that will invoke process message method in ve4gchat.js The onclick="_chat2vidyo.processmessage('message:' + document.getelementbyid('meetingurl').value)" will be inside of other chat application placed into incoming chat messages handler. Copy javascript files The javascript files must be copied: Find chattovidyo\js\ve4gchat.js and copy it into ve4gchat/js folder Find chattovidyo\js\jquery.min.js and copy it into ve4gchat/js folder Final web application folder file structure is: ve4gchat (root folder) index.jsp js jquery.min.js ve4gchat.js 11

14 Overview These files can be zipped into ve4gchat.zip and unzipped to tomcat webapps folder to deploy. Modify ve4gchat.js Modification of ve4gchat.js is required for creating external function process message and test purposes. The external function process message will be then included in chat message handler of 3 rd party chat solution. Create processmessage function: //inteface for integration with chat solutions _chat2vidyo["processmessage"] = function(guestlink){ // _chat2vidyo.vidyosessionactive is only for test with join button purpose. // it is normally reset on page load or message "Message:EndVidyoRequest" _chat2vidyo.vidyosessionactive = false; log("guestlink="+guestlink); processmessage(guestlink); }; Remove unnecessary elements from onload function _chat2vidyo["onload"] = function(){ log("on load executed"); _click2videocheck = document.getelementbyid(_chat2vidyo.checkbox_id); //_startchatbtn = document.getelementbyid(_chat2vidyo.start_chat_id); //_stopchatbtn = document.getelementbyid(_chat2vidyo.stop_chat_id); //_sendchatmsgbtn = document.getelementbyid(_chat2vidyo.send_chat_msg_id); //_getmsgbtn = document.getelementbyid("getmessagesbtnid"); //_esc2videobtn = document.getelementbyid(_chat2vidyo.esc_2_video_id); frame = document.getelementbyid(_chat2vidyo.frame_id); //sendframe = document.getelementbyid("chatwrite"); //textframe = document.getelementbyid("chatview"); // if (_getmsgbtn) // _getmsgbtn.style.display = "none"; }; //setuistatus("onload"); The ve4gchat.war is packaged into install package for vidyo adapter from version

15 Installation Guidelines The sample codes are tested with Tomcat 9, the eservices 8.5 chat solution, and the latest release of the WEB-API server. The eservices chat solution is not compatible with the GMS chat solution. A separate eservices chat application needs to be released. Supported Platforms and Browsers The web client applications have been tested using the following platforms and browsers: Compatible Platforms Windows 7 32-bit and 64-bit Windows 8 32-bit and 64-bit Windows bit and 64-bit Windows bit and 64-bit Mac OS X macos Sierra Compatible Browsers Chrome version 48 and later Firefox version ESR and earlier than version 52 Internet Explorer version 11 Safari version and later Build Requirements The build requirements are as follows: Supported Operating system: Windows 2008, CentOS 6.6 Genesys: Chat Server 8.5, Web-API Server 8.5, WDE 8.5 configured with Vidyo Adapter, eservices 8.1 and higher (compatible with the Genesys Vidyo Adapter ) Vidyo Software: Genesys Vidyo Adapter release Third Party: Apache Tomcat 9.0, JDK 1.8 and higher Build Instructions All of the applications need to be deployed to the web server. You must deploy the war files and perform manual configuration changes to set up the Genesys and Vidyo backend components. The deployment process will be explained with the Tomcat web container. 13

16 Installation Guidelines Click to Vidyo (WebSocket) 1. Deploy the webclient_websocket.war to web container webapps. 2. Locate the js/ve4g_click.js JavaScript file. 3. Set the _server_uri variable. Point the _server_uri variable to the Genesys Vidyo Server host and install the secured port at your test environment. 4. Set the webrtcurl variable. Point the webrtcurl variable to the Vidyo thin client application, which is capable of handling WEBRTC based Vidyo calls. 5. Set the vidyoweburl variable. Point the vidyoweburl to the Vidyo thin client application, which is capable of handling non- WEBRTC based Vidyo calls. 6. Make sure you can access the /scripts/vidyo.min.js via the Genesys Vidyo Server from your browser. Note If the Genesys Vidyo Server is running with the self-signed keystore, then you must import the certificate into your local repository so that the solution can function better. Click to Vidyo (REST) 1. Deploy the webclient_rest.war to web container webapps. 2. Locate the js/ve4g_click.js JavaScript file. 3. Set the _server_service_uri variable. Point the _server_service_uri variable to the Genesys Vidyo Server host and install the secured port at your test environment. 4. Set the _server_rest_c2v service name based on the configuration of your Vidyo server in the Genesys Administrator application object. 5. Set the webrtcurl variable. Point to the Vidyo thin client application, which is capable of handling WEBRTC based Vidyo calls. 6. Set the vidyoweburl variable. Point to the Vidyo thin client application capable of handling non-webrtc based Vidyo calls. 7. Make sure you can access the /scripts/vidyo.min.js via the Genesys Vidyo Server from your browser. 14

17 Installation Guidelines Note If the Genesys Vidyo Server is running with the self-signed keystore, you must import the certificate into your local repository so that the solution can function better. Chat to Vidyo 1. Deploy the chattovidyo.war to web container webapps. 2. Locate the js/ve4g_chat.js JavaScript file. 3. Locate the WEB-INF/classes/WebAPIServer.properties. 4. Set the following Genesys WEB-API server parameters: webapisrvhost=<hostname> webapisrvport=<port> webapicntxpath=<context-path> secured=<true/false>, if WEB_API server has opened https port, true can be used tenantname=<genesystenantname>, for single tenant deployment use Resources chatendpointname=<chat-endpoint>, optional if other than default endpoint is used at chat server. Expected value is endpoint option name. 5. Set the webrtcurl variable. Point to the Vidyo thin client application, which is capable of handling WEBRTC-based Vidyo calls. 6. Set the vidyoweburl variable. Point to the Vidyo thin client application, which is capable of handling non-webrtc based Vidyo calls. Deploy ve4gchat Sample 1. Copy ve4gchat.war into webapps folder 2. Start tomcat if it is not running 3. Navigate to 4. Insert meeting URL into text box 5. Click join button to start join meeting procedure Note Use Vidyo Neo or connect to set up the meeting and receive URL. The ve4gchat application will join the meeting. This way it is possible to verify whether web integration works from test environment. 15

18 Installation Guidelines Directory Structure The directory structure for both the click-to-vidyo and chat-to-vidyo solutions is the same. Click to Vidyo <web-application-root> index.jsp (customer User Interface) js ve4g_click.js (vidyo2genesys escalation functionality, client of Genesys Video Server) jquery.min.js WEB-INF web.xml Chat to Vidyo <web-application-root> index.jsp js (customer chat UI) ve4gchat.js (chat javascript client, chat 2 video functionality methods) jquery.min.js WEB-INF classes eservices (chat client classes) WebAPIServer.properties (WEB-API server configuration) lib (chat client libraries, WEB_API server library) web.xml (web configuration file) The ve4gchat Sample <web-application-root> index.jsp js (customer chat UI) ve4gchat.js (test javascript client) jquery.min.js WEB-INF 16

19 Installation Guidelines classes web.xml (web configuration file) Libraries Used (Third party and others) Click to Vidyo: jquery.min.js (JQuery JavaScript library used mostly for AJAX calls) Chat to Vidyo: jquery.min.js (JQuery JavaScript library used mostly for AJAX calls) jackson-core-asl jar (JSON Parser lib) jackson-mapper-asl jar (JSON Parser lib) javax.servlet-api jar (java Servlet lib) jersey-client jar (java WS Client lib) jersey-core jar (java WS Client lib) jsr311-api jar (java WS lib) webapi jar (Genesys WEB_API) 17

20 Sample Workflow and Logs The Click to Vidyo use case is from the user s perspective, which also applies to the Click to Vidyo WebSocket and Click to Vidyo Rest samples. Only one workflow applies to this use case. Note The widget code is an interface between the browser/genesys Vidyo Server and the Genesys backend. The process of opening the Vidyo thin client is separate. If the signaling and establish/escalate interaction function works correctly, the sample widget will work as intended. If the Vidyo call initialization fails after successfully navigating to the meeting room, you should investigate the thin Vidyo client deployed at the webrtcurl and vidyoweburl to identify a root cause. Click to Vidyo The customer does the following: 1. Navigates to one of the following Click to Vidyo web pages: Clicks the Click-to-Vidyo button. 18

21 Sample Workflow and Logs The agent then does the following: 1. Accepts the Vidyo interaction. 2. Starts the Vidyo meeting by clicking the Vidyo ( ) button. The application may also automatically start the Vidyo meeting. 19

22 Sample Workflow and Logs The Workspace Desktop Edition (WDE) sends a request to distribute the Meeting URL to the customer s browser and then the browser navigates to the meeting room. The customer or agent releases the video meeting and leaves the room. Finally, the customer clicks the close button to get back to step 1. The screen is cleared and a new Vidyo meeting request can now be sent. 20

23 Sample Workflow and Logs Chat to Vidyo The customer does the following: 1. Navigates to 2. Clicks the Start Chat button. The chat interaction is delivered to an agent. 21

24 Sample Workflow and Logs 3. Clicks the Escalate To Video button to send a video escalation request. The agent is notified and creates the video meeting room by clicking the video button. The meeting room is created and the URL is automatically pushed to the chat window. 22

25 Sample Workflow and Logs The customer chat client parses the URL from the chat message and navigates to the client to connect to the meeting room. 23

26 Sample Workflow and Logs The agent closes the meeting room. The customer s browser is notified and a UI cleanup is performed, which causes the video window to close. The agent and customer can continue with their chat or end it. The ve4gchat web application For quick test it is possible to deploy ve4gchat.zip content into Tomcat webapps folder. Follow instructions to set it up properly. You will need vidyo client to create meeting and join it. Use Vidyo Neo or Vidyo Connect for that purpose. 1. Unzip content of ve4gchat.zip into tomcat webapps folder 2. Start Vidyo Neo or Vidyo Connect application and join meeting 3. Navigate to ve4gchat/index.jsp 4. Copy meeting URL from application to Meeting Url text box 5. Click join buton Expected result is web application will join meeting established by Vidyo Neo or Connect application. 24

27 Sample Workflow and Logs Debug Web Applications A file logger is not being introduced with the sample application. To debug the sample clients, you must use the Tomcat console logs and Browser Console logs. Click to Vidyo WebSocket On the web page load Browser console: debug:true ve4g_click.js:274:4 firstname:chloe ve4g_click.js:274:4 lastname:varnet ve4g_click.js:274:4 div_id:vidyo_div ve4g_click.js:274:4 frame_id:vidyo_frame ve4g_click.js:274:4 checkbox_id:ispopupwindow ve4g_click.js:274:4 25

28 Sample Workflow and Logs tovideo_button_id:click2videobtnid ve4g_click.js:274:4 cancel_button_id:cancelclick2videobtnid ve4g_click.js:274:4 close_button_id:closevideobtnid ve4g_click.js:274:4 cmb_topic_id:click2videocmbid ve4g_click.js:274:4 is_popup:false ve4g_click.js:274:4 webrtcurl: ve4g_click.js:274:4 vidyoweburl: ve4g_click.js:274:4 GET [HTTP/ OK 200ms] LOG: init() vidyo.min.js:1:2305 LOG: init() jquery has been loaded vidyo.min.js:1:2305 GET [HTTP/ OK 0ms] LOG: init() sockjs has been loaded vidyo.min.js:1:2305 GET [HTTP/ OK 0ms] LOG: init() stomp has been loaded Click To Vidyo button clicked Browser Console: Cleaning up resources and setting to the initial state... ve4g_click.js:274:4 User selected topic: NONE ve4g_click.js:274:4 UserData set ve4g_click.js:274:4 LOG: [object Object] vidyo.min.js:1:2305 LOG: window._gv.config.donotusews:true At this point the interaction is created and routed to an agent. Once the agent accepts the interaction, then it is possible to establish the video meeting. Agent established vidyo meeting successfully Browser Console: 26

29 Sample Workflow and Logs LOG: {"id":"4463ea6e-0f93-46fe-af9f- 6f8da5e13021","orsSessionId":"01ABP054F4CK5BJOG41AHG5AES000001","guestLink":"{\"url\":\" manusteam.api.vidyocloud.com/flex.html?roomdirect.html\",\"key\":\"hec5m7luzf\"}"} vidyo.min.js:1:2305 Click to video event response received [{"id":"4463ea6e-0f93-46fe-af9f- 6f8da5e13021","orsSessionId":"01ABP054F4CK5BJOG41AHG5AES000001","guestLink":"{\"url\":\" manusteam.api.vidyocloud.com/flex.html?roomdirect.html\",\"key\":\"hec5m7luzf\"}"}] ve4g_click.js:274:4 showvideo vidyo popup: false guestlink: ve4g_click.js:274:4 Setting up video iframe src: ud.com/flex.html?roomdirect.html&key=hec5m7luzf&guestname=chloe Varnet" At this point the browser navigates to the Vidyo web client application. This application connects the customer to the meeting room established by an agent. Click to Vidyo REST On web page load Browser Console: debug:true ve4g_click.js:320:4 firstname:chloe ve4g_click.js:320:4 lastname:varnet ve4g_click.js:320:4 div_id:vidyo_div ve4g_click.js:320:4 frame_id:vidyo_frame ve4g_click.js:320:4 checkbox_id:ispopupwindow ve4g_click.js:320:4 tovideo_button_id:click2videobtnid ve4g_click.js:320:4 cancel_button_id:cancelclick2videobtnid ve4g_click.js:320:4 close_button_id:closevideobtnid ve4g_click.js:320:4 cmb_topic_id:click2videocmbid ve4g_click.js:320:4 is_popup:false ve4g_click.js:320:4 webrtcurl: ve4g_click.js:320:4 vidyoweburl: Click To Vidyo button clicked 27

30 Sample Workflow and Logs Browser Console: clicktovideofunction start server uri: ve4g_click.js:320:4 User selected topic: NONE ve4g_click.js:320:4 clicktovideofunction success server id:ebe44012-fda8-478f-9268-b8ff7107ce35, ors sessionid:01abp054f4ck5bjog41ahg5aes ve4g_click.js:320:4 geturi method started data.id: ebe44012-fda8-478f-9268-b8ff7107ce35 ve4g_click.js:320:4 clicktovideofunction Callback execution completed The interaction is created and routed to an agent. The agent must now establish the video meeting with the agent desktop application. Agent established video meeting geturi success message: {"id":"ebe44012-fda8-478f b8ff7107ce35","orssessionid":"01abp054f4ck5bjog41ahg5aes000003","guestlink":"{\"url\":\" anusteam.api.vidyocloud.com/flex.html?roomdirect.html\",\"key\":\"3las6tqtkb\"}"} ve4g_click.js:320:4 Click to video event response received [{"id":"ebe44012-fda8-478f b8ff7107ce35","orssessionid":"01abp054f4ck5bjog41ahg5aes000003","guestlink":"{\"url\":\" anusteam.api.vidyocloud.com/flex.html?roomdirect.html\",\"key\":\"3las6tqtkb\"}"}] ve4g_click.js:320:4 showvideo vidyo popup: false guestlink: ve4g_click.js:320:4 Setting up video iframe src: ud.com/flex.html?roomdirect.html&key=3las6tqtkb&guestname=chloe Varnet" ve4g_click.js:320:4 geturi callback execution completed At this point the customer application invokes the Vidyo web client application, which connects the customer to the meeting room. Chat to Vidyo Startup Start checking the Tomcat logs for a message on the Tomcat Container "WebAPI host=<hostname> port=<port> contextpath=<cntxpath>" The values closed in <> must match configuration set in WebAPIServer.properties file Chat page load Web browser console Message "DEBUG: on load executed" says that page is loaded. 28

31 Sample Workflow and Logs Start Chat Browser Console: DEBUG: startchat success message: {"sessionid":"2eb6d54d5e66b8c409139a6718f098c0","code":200,"message":"success"} ve4g_chat.js:411:4 DEBUG: return value sessionid assigned to vidyo object=2eb6d54d5e66b8c409139a6718f098c0 ve4g_chat.js:411:4 DEBUG: code=200 ve4g_chat.js:411:4 startchat callback execution completed ve4g_chat.js:411:4 Get Messages Browser Console: DEBUG: getmessages request, sessionid=2eb6d54d5e66b8c409139a6718f098c0 ve4g_chat.js:411:4 DEBUG: return value code=200 ve4g_chat.js:411:4 DEBUG: getmessages success message: {"sessionid":"2eb6d54d5e66b8c409139a6718f098c0","code":200,"transcriptposition":1,"message":[{"da tetime":" ","participantname":"janko","text":null,"type":"participantjoined","index":1}],"vi dyoroomlink":null,"vidyomessagetype":null} Escalate To Video Browser Console: DEBUG: getmessages success message: {"sessionid":"2eb6d54d5e66b8c409139a6718f098c0","code":200,"transcriptposition":3,"message":[{"da tetime":" ","participantname":"irobot","text":"message: com/flex.html?roomdirect.html&key=ppxjnlnkbe","type":"message","index":3}],"vidyoroomlink":null,"vid yomessagetype":null} ve4g_chat.js:411:4 DEBUG: text message=message: ve4g_chat.js:411:4 DEBUG: Close Vidyo Call ve4g_chat.js:411:4 DEBUG: showvideo vidyo popup: false guestlink: Close Video Browser Console: DEBUG: getmessages success message: {"sessionid":"2eb6d54d5e66b8c409139a6718f098c0","code":200,"transcriptposition":4,"message":[{"da tetime":" ","participantname":"irobot","text":"message:endvidyorequest","type":"messag e","index":4}],"vidyoroomlink":null,"vidyomessagetype":null} ve4g_chat.js:411:4 29

32 Sample Workflow and Logs DEBUG: text message=message:endvidyorequest ve4g_chat.js:411:4 DEBUG: Close Vidyo Call ve4g_chat.js:411:4 DEBUG: transcript position: 4 Stop Chat Browser Console: DEBUG: getmessages success message: {"sessionid":"2eb6d54d5e66b8c409139a6718f098c0","code":200,"transcriptposition":6,"message":[{"da tetime":" ","participantname":"irobot","text":null,"type":"participantleft","index":5},{"date Time":" ","participantName":"janko","text":null,"type":"ParticipantLeft","index":6}],"vidyoR oomlink":null,"vidyomessagetype":null} ve4g_chat.js:411:4 DEBUG: text message=null ve4g_chat.js:411:4 DEBUG: getmessages request, sessionid=2eb6d54d5e66b8c409139a6718f098c0 ve4g_chat.js:411:4 DEBUG: return value code=404 ve4g_chat.js:411:4 DEBUG: getmessages callback execution completed ve4g_chat.js:411:4 DEBUG: _chat2vidyo.sessionid is null don't execute get messages! After the chat has stopped, the chat object is released from the server memory. Therefore, the 404 message is sent from the backend. The JavaScript continues checking in loop to see if there is an active chat. It will not send requests to the backend until the Start chat button is clicked again. 30