VidyoEngage for Genesys Sample Widgets

Transcription

1 VidyoEngage for Genesys Sample Widgets Developers Guide Product Version Document Version A October, 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... 3 Directory Structure... 3 Libraries Used (Third Party and Others)... 4 Click to Vidyo (WebSocket)... 5 Click to Vidyo (REST)... 8 Click to Vidyo (REST Simple)... 9 Chat to Vidyo (eservices) Sample Workflow and Logs Click to Vidyo Chat to Vidyo The ve4gchat Web Application Debugging Web Applications Ve4G Genesys Widgets Click to Vidyo Chat to Vidyo Developers Guide 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 (RESTful implementation) Chat to Vidyo (sample eservices 8.5 chat application with extension for Vidyo messaging handler) Genesys Widgets and GMS integration (in separate main chapter) Click to Vidyo WebSocket client RESTful client Chat to Vidyo 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 Vidyo implementation. For the Chat to Vidyo implementation, the JavaScript file is named ve4g_chat.js. 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 3

4 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 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) 4

5 jersey-core jar (java WS Client lib) jsr311-api jar (java WS lib) webapi jar (Genesys WEB_API) 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" UI Elements //iframe object for embedded mode 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 5

6 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 Function Parameters Description clicktovideo() None Initializes UI elements into the JavaScript _vidyo object and invokes clicktovideofunction to establish the Vidyo interaction in Genesys. cancel() None 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() None Cleans up the UI after the conference is finished. 6

7 Internal ve4g_click.js Functions Function Parameters Description clicktovideofunction showclicktovideo data, key value pair list of data onerror, error callback function 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. 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. Parses the guestlink from the JSON answer and invokes the showvideo method. showvideo() None Checks the _vidyo object setting and invokes the method for the pop-up or embedded show video functionality (). showvideoin(guest Link) and showvideoout(guest Link) generatevidyoframe Src(guestLink) guestlink, meeting room Uri guestlink, meeting room Uri Calls the generatevidyoframesrc method to get the Uri to the Vidyo thin client application and shows the video in the embedded/pop-up mode. 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() None Resets the Vidyo object and objects initialized during the Click to Vidyo session. setuistatus(call_ status) call_status, string parameter reflects the Vidyo request status Sets UI elements based on the current call status. 7

8 log(message), warn(message), error(message), currenttime() message, string log record 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 section only describes the methods that are different from the Web Socket 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" The configuration is set at the very beginning of the JavaScript. JS Functions Exposed to index.jsp Function Type Parameters Description cancel() POST Current session id, the Id is set when the click to video function is successful 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. 8

9 Internal ve4g_click.js Functions Function Type Parameters Description clicktovideofunction POST None 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) GET None 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 Vidyo implementation is explained in the Click to Vidyo section. 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 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. 9

10 Chat to Vidyo (eservices) Sample Chat to Vidyo implementation is developed and tested at single and multi-tenant environments with web-api version 8.5. It uses REST services to open and manage chat sessions. For older web-api releases, it is necessary to follow steps from the Chat to Vidyo Escalation Implementation section. 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. Function Type Parameters Description getmessages() POST sessionid, transcriptposition 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) strmessage, text from last agent s message 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) POST message, is a text message to be sent to chat 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. 10

11 The messaging related to the Chat to Vidyo escalation is done through the chat transcript. It is possible to filter out the messages related to Chat to Vidyo 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 the chat window. All the escalation login is developed in the JavaScript file js\ve4gchat.js released in the Sample application. Request Chat by Customer The customer is requesting escalation by sending "Message:VidyoRequest" to the chat view. To automate this functionality, it is enough to develop a button that will invoke the send message functionality with prefilled text. For testing purposes, it can be typed in manually. In the ve4gchat.js file, there is an escalate2video button for sending a video escalation request to chat. See the code snippet below for more details. //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); } }; Process Guestlink and Open Vidyo Session After WDE creates the meeting and sends the guestlink through the chat, the chat text message is distributed to the customer application. The sample chat 2 vidyo is monitoring every new message and parsing the guestlink. 11

12 //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; } } } } For this purpose, there is a function processmessage(strmessage). The process message function is called from function getmessages(). For integration with older versions of the 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. 12

13 When processmessage identifies the guestlink message from the WDE, it starts the 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(); } } 13

14 //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(); } If customer selects popup window, show video out is invoked. The flag _chat2vidyo.is_popup is set from the combo box at the 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) _chat2vidyo.is_popup = true; else _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 information about how to integrate JavaScript into the custom web page, see the following section. Integrate ve4gchat.js to Custom Web Page For integration of ve4gchat.js to any chat application, it is necessary to: Include ve4gchat.js in the heading of the 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 14

15 Step-by-step instructions are explained in the following chapter using an empty page and button to replace the chat handle message function. Create Test index.jsp File For test purposes, 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 a fake button that will invoke the process message method in ve4gchat.js. The onclick="_chat2vidyo.processmessage('message:' + document.getelementbyid('meetingurl').value)" will be inside the other chat application placed into the incoming chat messages handler. Copy JavaScript Files The JavaScript files must be copied: Find chattovidyo\js\ve4gchat.js and copy it into the ve4gchat/js folder. Find chattovidyo\js\jquery.min.js and copy it into the ve4gchat/js folder. Final web application folder file structure is: ve4gchat (root folder) index.jsp js jquery.min.js 15

16 ve4gchat.js These files can be zipped into ve4gchat.zip and unzipped to the tomcat webapps folder to deploy. Modify ve4gchat.js Modification of ve4gchat.js is required for creating the external function process message and for test purposes. The external function process message will then be included in the chat message handler of the third-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); }; _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"); Remove unnecessary elements from the onload function. The ve4gchat.war is packaged into the install package for the Vidyo adapter with version and later. 16

17 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. 17

18 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. 18

19 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. 19

20 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. 20

21 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. 21

22 The customer chat client parses the URL from the chat message and navigates to the client to connect to the meeting room. 22

23 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 a quick test, it is possible to deploy ve4gchat.zip content into a Tomcat webapps folder. Follow instructions to set it up properly. You will need the Vidyo client to create a meeting and join it. Use VidyoConnect for that purpose. 1. Unzip the content of ve4gchat.zip into a Tomcat webapps folder. 2. Start the VidyoConnect application and join the meeting. 3. Navigate to ve4gchat/index.jsp. 4. Copy the meeting URL from the application to the Meeting Url text box. 5. Click the Join button. Expected result is that the web application will join the meeting established by the VidyoConnect application. 23

24 Debugging 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: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: 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 tovideo_button_id:click2videobtnid ve4g_click.js:274:4 24

25 DEBUG: vidyo: cancel_button_id:cancelclick2videobtnid ve4g_click.js:274:4 DEBUG: vidyo: close_button_id:closevideobtnid ve4g_click.js:274:4 DEBUG: vidyo: cmb_topic_id:click2videocmbid ve4g_click.js:274:4 DEBUG: vidyo: is_popup:false ve4g_click.js:274:4 DEBUG: vidyo: webrtcurl: ve4g_click.js:274:4 DEBUG: vidyo: 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: DEBUG: vidyo: Cleaning up resources and setting to the initial state... ve4g_click.js:274:4 DEBUG: vidyo: User selected topic: NONE ve4g_click.js:274:4 DEBUG: vidyo: 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: LOG: {"id":"4463ea6e-0f93-46fe-af9f- 6f8da5e13021","orsSessionId":"01ABP054F4CK5BJOG41AHG5AES000001","guestLink":"{\"url\":\"ht 25

26 tps://manusteam.api.vidyocloud.com/flex.html?roomdirect.html\",\"key\":\"hec5m7luzf\"}"} vidyo.min.js:1:2305 DEBUG: vidyo: Click to video event response received [{"id":"4463ea6e-0f93-46fe-af9f- 6f8da5e13021","orsSessionId":"01ABP054F4CK5BJOG41AHG5AES000001","guestLink":"{\"url\":\"ht tps://manusteam.api.vidyocloud.com/flex.html?roomdirect.html\",\"key\":\"hec5m7luzf\"}"}] ve4g_click.js:274:4 DEBUG: vidyo: showvideo vidyo popup: false guestlink: ve4g_click.js:274:4 DEBUG: vidyo: Setting up video iframe src: vidyocloud.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: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: DEBUG: vidyo: 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 DEBUG: vidyo: webrtcurl: ve4g_click.js:320:4 DEBUG: vidyo: vidyoweburl: Click to Vidyo button clicked Browser Console: 26

27 DEBUG: vidyo: clicktovideofunction start server uri: ve4g_click.js:320:4 DEBUG: vidyo: User selected topic: NONE ve4g_click.js:320:4 DEBUG: vidyo: clicktovideofunction success server id:ebe44012-fda8-478f-9268-b8ff7107ce35, ors sessionid:01abp054f4ck5bjog41ahg5aes ve4g_click.js:320:4 DEBUG: vidyo: geturi method started data.id: ebe44012-fda8-478f-9268-b8ff7107ce35 ve4g_click.js:320:4 DEBUG: vidyo: 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 Vidyo meeting successfully DEBUG: vidyo: geturi success message: {"id":"ebe44012-fda8-478f b8ff7107ce35","orssessionid":"01abp054f4ck5bjog41ahg5aes000003","guestlink":"{\"url\":\"htt ps://manusteam.api.vidyocloud.com/flex.html?roomdirect.html\",\"key\":\"3las6tqtkb\"}"} ve4g_click.js:320:4 DEBUG: vidyo: Click to video event response received [{"id":"ebe44012-fda8-478f b8ff7107ce35","orssessionid":"01abp054f4ck5bjog41ahg5aes000003","guestlink":"{\"url\":\"htt ps://manusteam.api.vidyocloud.com/flex.html?roomdirect.html\",\"key\":\"3las6tqtkb\"}"}] ve4g_click.js:320:4 DEBUG: vidyo: showvideo vidyo popup: false guestlink: ve4g_click.js:320:4 DEBUG: vidyo: Setting up video iframe src: vidyocloud.com/flex.html?roomdirect.html&key=3las6tqtkb&guestname=chloe Varnet" ve4g_click.js:320:4 DEBUG: vidyo: 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 enclosed in <> must match the configuration set in the WebAPIServer.properties file. Chat page load Web browser console Message "DEBUG: on load executed" says that page is loaded. 27

28 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,"messag e":[{"datetime":" ","participantname":"janko","text":null,"type":"participantjoined","ind ex":1}],"vidyoroomlink":null,"vidyomessagetype":null} Escalate To Video Browser Console: DEBUG: getmessages success message: {"sessionid":"2eb6d54d5e66b8c409139a6718f098c0","code":200,"transcriptposition":3,"messag e":[{"datetime":" ","participantname":"irobot","text":"message: oomlink":null,"vidyomessagetype":null} ve4g_chat.js:411:4 DEBUG: text message=message: NlnKbe 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,"messag 28

29 e":[{"datetime":" ","participantname":"irobot","text":"message:endvidyorequest","typ e":"message","index":4}],"vidyoroomlink":null,"vidyomessagetype":null} ve4g_chat.js:411:4 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,"messag e":[{"datetime":" ","participantname":"irobot","text":null,"type":"participantleft","index" :5},{"dateTime":" ","participantName":"janko","text":null,"type":"ParticipantLeft","index" :6}],"vidyoRoomLink":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. 29

30 Ve4G Genesys Widgets The integration of the Vidyo channel into Genesys Widget 9 is yet way to implement Click to Vidyo and Chat to Vidyo use cases. It uses Genesys Widgets configured and customized to communicate to the Vidyo server and implements the Vidyo thin client to handle the video session. This chapter explains the solution architecture and details about how to use sample code for integration with the customer environment. All the code provided is meant to be sample code; it can be used for demonstration purposes and as an example of how Genesys Widgets can be customized for Vidyo purposes. The widgets are customer-facing interface only; the agent interface functionality is not changed. The solution is backward compatible with previous versions of Vidyo Adapter. The solution begins with a Sample Welcome screen, and it navigates the user to the Click to Vidyo or Chat to Vidyo samples. Desktop Mobile 30

31 Click to Vidyo This chapter explains how the customization of widgets operates and provides information about the Click to Vidyo customization code. The customization is a combination of Widgets configuration and additional plugins registered with CX Bus. Customer Interface - Desktop The Click to Vidyo Home screen allows: Home Page navigates back to welcome screen Open Click to Vidyo opens Click to Vidyo start toaster view Close Click to Vidyo closes Click to Vidyo start toaster view Side Bar on a right side: Opens live Assistance Channel Selector button Opens Click to Vidyo toaster view Live Assistance is so called channel selector, here multiple communication channels can be configured. 31

32 In the Click to Vidyo case, there is just a single button. The button opens Click to Vidyo toast view Request Video. After filling in all the information and clicking the Send button, the routing screen appears. Click to Vidyo is now looking for an agent to assign the Vidyo interaction. If the agent is found and the video session is established, the guestlink (meeting URL) is delivered to widget customization code and it opens the overlay Video View. 32

33 The alternate flow for routing of the Vidyo session is routing timeout. When no agents are available, an error that is delivered from ORS is displayed in Widget. Customer Interface Mobile The Channel Selector is available with options to select a communication channel in the mobile version of Click to Vidyo. In the sample code, Video Chat is the only configured channel. 33

34 Clicking the Video Chat button causes the Request Video toaster view to open. Fill mandatory information and click the Send button to start Vidyo routing. The routing screen of the requested video will appear. If the Vidyo session is successfully delivered to an agent and the WDE updates the solution with the new guestlink, the guestlink is processed by Widget customization and the Vidyo view is opened. The Vidyo view opens in the Overlay window. 34

35 An alternate flow to the successful routing is timeout or error from the Genesys backend. In such cases, the Routing Error message from the Genesys backend is displayed. Chat to Vidyo Customer Interface Desktop The Home screen of Chat to Vidyo allows the customer to open a live chat with the Open Chat button or from the side bar. 35

36 This page routes the customer to the Registration form, where the customer sets data and sends chat requests to the Genesys backend. After routing selects an agent and chat is established, the customer can see the chat window as shown below. The customer can use the video icon request for a video session. under the chat send message text box and send Clicking the video icon button sends a video request to the chat transcript. The Agent and customer can see the Message:VideoRequest message in the chat window. Agent must click the Vidyo button at the agent desktop to initiate the video session and join the meeting room. Only after the agent joins the meeting room, the meeting url is copied into the chat transcript. Customer Widget opens a video frame automatically or opens the invitation screen. In the invitation screen, the user can select one of following actions: Open Embedded (video frame is embedded in Genesys Overlay Widget) 36

37 Open video frame in popup window Cancel video meeting After the video view is open, the video screen appears at the customer desktop. The chat toaster view remains open. When an agent makes a decision to close the video view from WDE, the video session is destroyed and all participants are disconnected. After the close video session procedure is finished, the message Message:EndVidyoRequest is sent from WDE to the chat transcript. The video session is ended and the Genesys Widget closes the video view. The screenshot below shows the status after the video session is ended. 37

38 Customer Interface Mobile The video chat home screen contains the chat view at the sidebar and live assistance view in right bottom corner. The display mode of Genesys widget is set by configuration of widget elements. 38

39 When the chat is established, the Live Chat toaster view is displayed. The customer can request a video session by clicking under the message text box. After the video is requested, the Message:RequestVideo appears in the chat transcript. The Genesys WDE opens the video meeting and joins the session. Then WDE sends the guestlink to the chat transcript. Genesys Widget customization for mobile devices opens the video view automatically to overlay the screen and the chat toaster is minimized. The screen below shows the video view in portrait and landscape mode. 39

40 After the agent releases the video session and the Vidyo client is stopped successfully, the Message:VidyoRequestEnd is distributed. The customer widget closes the overlay view and the toaster chat view is maximized. The customer can request a Chat to vidyo escalation multiple times for each single chat session. A new guestlink is delivered to the chat transcript for each new video session. 40

41 Developers Guide The mobile and desktop versions use the same code for handling video session and guestlink delivery. The switch between mobile and desktop views and functionalities is driven by switch IsMobile. This switch is maintained by ve4gutils.js. See the ve4gutils.js section for more details. Code Structure The Click to Vidyo code is in separate files. The developer can take Click to Vidyo files and use them standalone without Chat to Vidyo code present in the solution. After the ve4g-widget-sample.war file is deployed into the container, the source code root application folder is ve4g-widget-sample and contains the following files: css (styles folder) ve4gwclick.css, ve4g widget styles can be customized by developer widgets.min.css, Genesys Widgets styles js (JavaScript folder) plugins, folder with Genesys Widgets plugins ve4g, folder with ve4g JavaScript files for click to vidyo and chat to vidyo click2vidyo.js, click to vidyo Genesys Widget configuration and handler chat2vidyo.js, chat to vidyo Genesys Widget configuration and handler ve4gclick.js, click to vidyo escalation initialization ve4gclient.js, Vidyo Server WebSocket client code ve4gclientrest.js, Vidyo Server REST Full client code ve4gchat.js, chat to vidyo escalation initialization ve4gutils.js, contains vidyo thin client configuration and logger utilities. ve4gview.js, contains view for click and chat to vidyo widgets.min.js, Genesys Widgets script cxbus.min.js, Genesys Widgets CX bus jquery.min.js, third party jquery script click2vidyo.jsp, Click To Vidyo home screen chat2vidyo.jsp, Chat To Vidyo home screen index.jsp, Genesys Widgets Home screen 41

42 ve4gutils.js This contains configuration of WebRTC and native VidyoWorks thin clients. These clients display the video frame and handle all communication from the browser to the VidyoWorks platform. The public variables are: ve4gutils.clientwebrtc, webrtc client url ve4gutils.clientweburl, native client url ve4gutils.ismobile, flag that detects mobile devices ve4gutils.currenttime, returns current time for better debugging. Logger uses this public function as prefix in log records ve4gutils.clientwebrtc = " ve4gutils.clientweburl = " ve4gutils.iswebrtc = false; ve4gutils.ismobile = /iphone ipad ipod Android/i.test(navigator.userAgent); if(navigator.useragent.indexof("chrome")!= -1 ) { ve4gutils.iswebrtc = true; } else if(navigator.useragent.indexof("firefox")!= -1 ) { ve4gutils.iswebrtc = true; } if (ve4gutils.iswebrtc) { ve4gutils.clienturl = ve4gutils.clientwebrtc; } else { ve4gutils.clienturl = ve4gutils.clientweburl; } The ve4gutils are used in both the Click to Vidyo and Chat to Vidyo solutions. ve4gview.js This initiates the Genesys Widget Extension and registers the commands to operate the video view. Video view is the Vidyo frame, which may be embedded into Genesys Overlay view or opened in a separate popup window. All the actions are driven by setting Click to Vidyo and Chat to Vidyo options explained later in this guide and in the Deployment guide. For mobile devices, popup windows are disabled and the video view opens in the Genesys Overlay view only. 42

43 window._genesys.widgets.extensions["ve4gview"] = function($, CXBus, Common){ ve4gviewplugin = CXBus.registerPlugin("Ve4GView"); ve4gviewplugin.registercommand("open" - opens overlay View with Video Frame openoverlay(e.data.guestlink, e.data.actor); ve4gviewplugin.registercommand("close" closes overlay view with video frame closeoverlay(e.data.actor); ve4gviewplugin.registercommand("openpopup" opens popup window with Video Frame openpopup(e.data.guestlink, e.data.actor); ve4gviewplugin.registercommand("closepopup" closes popup window with Vidyo Frame closepopup(); ve4gviewplugin.registercommand("openinvite" opens invite Toaster view with options offered to user openinvitation(e.data.guestlink, e.data.actor); ve4gviewplugin.registercommand("closeinvite" closes invite Toaster view with options offered to user The commands use private JavaScript functions to perform the operations. openpopup(vidyosrc, actor) Opens Vidyo Frame in popup window. Input parameters: vidyosrc, is URL to Vidyo Server thin client with parameters pointing to meeting room. actor, is the source of request (it can be click2v or chat2v). It stands forclick to Vidyo and Chat to Vidyo use cases. For Chat to Vidyo escalations and auto open video view disabled, must be toaster invitation view closed after popup is opened. closepopup() Closes popup window if it is defined. openoverlay(vidyosrc, actor) Opens overlay view with video source and defines overlay view body. If the body must be updated with new text or buttons, this is the place where it can be done. Input parameters: vidyosrc, is URL to Vidyo Server thin client with parameters pointing to meeting room. 43

44 actor, is the source of request (it can be click2v or chat2v). It stands for click to vidyo of chat to vidyo use cases. If actor equals to chat2v and device equals to mobile, the chat view is minimized and the overlay opens. closeoverlay(actor) Closes the overlay view with Video frame in it. Input parameters: actor If actor equals to chat2v and device is mobile, the chat view is maximized after the overlay is closed. openinvitation(vidyosrc, actor) Open invitation opens the Toaster View with options to open popup or Overlay view. It offers possibility to cancel vidyo request. The toaster body is defined here and can be adjusted for more text or functionality. Input parameters: vidyosrc, is URL to Vidyo Server thin client with parameters pointing to meeting room. actor, is the source of request (it can be click2v or chat2v). It stands for click to vidyo of chat to vidyo use cases. If the cancel button is pressed the cancel message is sent to Vidyo Server or Chat transcript. The determination is done based on actor value. The ve4gview and ve4gutils are common namespaces used for both click to vidyo ad chat to vidyo escalation scenarios. Click to Vidyo The architecture of the Click to Vidyo solution components is not changed from the Vidyo Adapter perspective. From the Genesys solution architecture perspective, the Genesys Widgets are a new product within the solution. 44

45 Web Container (Genesys Widgets, Click To Vidyo, Chat To Vidyo) Vidyo Server Interaction Server Workspace Desktop (Vidyo Plugin) Orchestration Server click2vidyo.jsp Contains the buttons for Click to Vidyo and the initialization script for the Click to Vidyo solution. The initialization script must be in the html body tag, otherwise Genesys Widgets don t load the scripts correctly. The load command is <script src="js/ve4g/ve4gclick.js" defer></script>. ve4gclick.js Loads files required for configuration of the Click to Vidyo use case. It contains the configuration relevant to Click to Vidyo. var serveruri=" ve4gclick.serveruri = serveruri; ve4gclick.pluginname = "Ve4G"; //possible values "Ve4GREST", "Ve4G" ve4gclick.vidyoautoopen = true; ve4gclick.routingerrscrtout = 5000; For more information about the configuration, refer to deployment guide of Click to Vidyo Vidyo Adapter solution. Initialization of user interface elements stores the elements based on ID into local variables for future handling. var commands_div = document.getelementbyid("c2vcommands"); var loading_div = document.getelementbyid("c2vloading"); var error_div = document.getelementbyid("c2verror"); commands_div.style.display = "none"; loading_div.style.display = "block"; error_div.style.display = "none"; 45

46 Initialization of Genesys Vidyo Server input parameters is required before the Vidyo Server API is called. window._gv = window._gv {}; _gv.config = { serverurl:ve4gclick.serveruri, debug:true, donotusews:true }; The loading of scripts is developed in sequence. All scripts loaded in this file are required for the Click to Vidyo use case: Vidyo Server JavaScript file /scripts/vidyo.min.js (ensure that vidyo server is reachable) js/ve4g/ve4gutils.js, utils JavaScript required for logger and vidyo thin client js/ve4g/click2vidyo.js, click to vidyo configuration, manager and event handlers js/ve4g/ve4gview.js, Widgets toaster, overlay and popup windows js/ve4g/ve4gclient.js, WebSocket Client of Vidyo Server js/ve4g/ve4gclientrest.js, REST Full client of vidyo server js/widgets.min.js, Genesys Widget code In order to keep the sequence right, loading of the script is developed with handlers. The handlers ensure whether the script was loaded successfully and the Vidyo Server Click to Vidyo functionality is available. For example, Vidyo Server script file Loaded and ErrorHandler: var s = document.createelement('script'); s.setattribute('src', serveruri+"/scripts/vidyo.min.js"); s.defer = true; s.onload = handleload; s.onerror = handleerror; document.head.appendchild(s); The handleload() function handles the Vidyo Server loaded successfully event. The same pattern is reused for other scripts and their dependencies. The last loaded script is and must be js/widgets.min.js, Genesys Widget code. Because all the plugin modules must be initialized before this plugin module is loaded. 46

47 function handleload() { if (!done) { done = true; console.info("vidyoserver vidyo.min.js loaded successfully"); commands_div.style.display = "block"; loading_div.style.display = "none"; error_div.style.display = "none"; s = document.createelement('script'); s.setattribute('src', "js/ve4g/click2vidyo.js"); s.onload = handleloadc2v; s.defer = true; document.head.appendchild(s); } } The HandleError resolves the situation, when the Vidyo Server is not available and displays an error message. If the Vidyo Server is not available, the loading of the Widget configuration is skipped and Genesys Widgets are active. function handleerror() { if (!done) { done = true; console.info("vidyoserver vidyo.min.js not loaded"); commands_div.style.display = "none"; loading_div.style.display = "none"; error_div.style.display = "block"; } } The following chapters explain each JavaScript namespace in detail. click2vidyo.js Local variables: vidyoinvitebody, invitation Toaster window body is defined here. It contains user information div id="vidyosubmit" wait for interaction routing div id="vidyowait" error screen div id="waiterror" ispopup = false, specifies whether Video View should be opened to popup or overlay, set by public function setpopup = function(){ } 47