Overview

The sample widgets contain information about possible integrations for the customer web page and Genesys VideoEngager Server. The sample codes cover the following topics:

• Video Flow
• Chat Flow
• add to channel selector

The chapters below explain the structure and methods for implementing the videoengager.widget.js file. This is a core file that is used for the VideoEngager integration.

The configuration section sets the server Uri and path to mandatory videoengager.widget.js.

The videoengager.widget.js script is a mandatory initialization script, which is executed on the VideoEngager page load. The Uri should be structured as follows: http(s)://<host>:<port>/videoengager/js/videoengager.widget.js.

It can be also loaded from the genesys load script by adding:

{

type: "script",

id: "videoengager-widgets-script",

path: "videoengager/js/videoengager.widget.js"

}

When the videoengager widget script is loaded it registers a global variable videoengager and fires an event VideoEngagerReady, so it needs a listener, so it can fire the initialization command:

document.addEventListener('VideoEngagerReady', function (e) { 

videoengager.init(tenantId, veUrl, formData, userData, audioOnly, autoAccept, hideChat);

}, false);

Where:

• tenantId  - unique identifier in the VideoEngager platform;
• veUrl  - VideoEngager API URL, default to https://videome.leadsecure.com 
• fromData – JSON object with the Genesys provided form data:  {firstName: string, lastName: string, autoSubmit: Boolean, email:string, subject: string, message: string};
• userData – JSON object with the custom data from the client site;
• audioOnly – the video call is limited to audio only streaming, default is false;
• autoAccept – the client is not accepting the calls automatically, default is true;
• hideChat – display or not the chat section in the VideoEngager video page. Default is true;

There are two types of flows that VideoEngager interaction manager supports:

Video Flow (Simplified)

• Customer requests chat using Genesys WEB-API.
• VideoEnager waiting screen is opened as popup.
• Chat is created in chat server.
• Chat is delivered to an agent.
• Agent responds to request and video room is created.
• Customer joins the meeting.

Chat Flow (Simplified)

- Customer requests chat using Genesys WEB-API.

- Chat is created in chat server.

- Chat is delivered to an agent.

- If the agent wishes he can start a video call with the visitor.

- Widget processes URL in chat message and uses thin client to join the meeting.

- Customer joins the video meeting in a popup.

Video Flow

The script registers VideoEngager extension in the scope of Genesys ans subscribes to listen for Genesys events. The VideoEngager extension is listening for the following Genesys and custom events:

• WebChat.opened
• SendMessage.opened
• WebChatService.ended
• WebChatService.messageReceived
• SendMessage.opened
• SendMessageService.messageSent
• WebChatService.started

It registers the custom command VideoEngager.open that can be called within the website from any Genesys modules like sidebar or channel selector.

The sample code includes adding the VideoEngager interaction to the Genesys channel selector if present:

window._genesys.widgets.channelselector.channels.push(
{
     enable: true,
     clickCommand: 'VideoEngager. startVideo',
     readyEvent: 'VideoEngager.ready',
     displayName: 'Video Chat',
     i18n: 'VideoTitle',
     icon: 'videochat',
     ewt: {
           display: true,
           queue: 'Omnichannel',
           availabilityThresholdMin: 300,
           availabilityThresholdMax: 480,
           hideChannelWhenThresholdMax: false
          }
});

Upon clicking on the Video Chat icon, the VideoEngager.open command is triggered and there are three scenarios:

• With autoSubmit = true, the video call is directly started;
• If firstName/lastName are filled in and autoSubmit = false, it shows modal with Start Video and Cancel buttons. The HTML is located in videoengager/html/buttonBlank.html;
• If userData is blank, or not provided the mini form is loaded from videoengager/html/button.html 

The VideoEngager Server allows customer applications to use a Rest API for communication to the Genesys framework. The successful Rest API connection triggers the VideoEngager Server to initiate the creation of a VideoEngager interaction using Interaction Server (Ixn Server). The VideoEngager Server attaches a Key Value Pair (KVP) shortURL with the session id to allow Workspace to respond with a guest link. The VideoEngager interaction is placed into a Virtual Queue while waiting to be routed.

There is an option of starting directly a VideoEngager audio only call, by calling the command

VideoEngager.startAudio on readyEvent: 'VideoEngager.ready'

Chat Flow

The chat flow is using the WebChat API that can be escalated to video call by the agent.

Once the Workspace creates a video room, either automatically based on configuration or manually as selected by the agent,  and receives a guest link from the VideoEngager Platform, it then forwards the guest link. The Workspace does this by setting the value of KVP guestLinkURL to the guest link and posting another HTTP message to visitor.

The VideoEngager Server now forwards the guest link over the Rest API connection to the customer application to allow the customer to join the video conference.

Once the button is clicked a popup joining to the video room is opened. The wording and the UI of the button are controlled from the registered preprocessor of the message:

WebChatService.registerPreProcessor

It is searching for a guestLinkURL in the messages and is replacing it with a button.

If you have any questions, please contact our support team, and we will be happy to help.