Revision as of 19:58, August 9, 2016 by Bfriend (talk | contribs) (Configuring Genesys Widgets)
Jump to: navigation, search

Configuring Genesys Widgets

Genesys Widgets supports multiple widgets including Webchat, Web Engagement, and Co-browse. You can configure all widgets and services in the same configuration object. When you add new Genesys products and services, you must update your Genesys Widgets configuration to enable those widgets.

After you deploy the Genesys Widgets on your website, configure the CX Widget by defining the global window._genesys Javascript object.

To include the JavaScript script, you can choose one of the following options:

  • Place the script inline on your website; or
  • Place it in a separate JavaScript file, and then include the file on your page.

The following example is a basic view of the global Genesys Widgets configuration object:

<script>

        if(!window._genesys)window._genesys = {};
        if(!window._gt)window._gt = [];

        window._genesys.widgets = {

                main: {},
                webchat: {},
                cobrowse: {},
                gwe:{}
        };

</script>


The following example is a populated Widget configuration that includes configuration options for Webchat, Web Engagement (GWE), and Co-browse (GCB):

Tip
Note that Web Engagement and Co-browse is optional.
<script>
 
        if(!window._genesys)window._genesys = {};
        if(!window._gt)window._gt = [];
 
        window._genesys.widgets = {
                main: {
 
                        theme: "dark",
                        lang: "en",
                        i18n: "http://HOST:PORT/path/to/languages/file.json",
                        customStylesheetID: "<ANY_ID_NAME>",
                        plugins: [
                                "cx-webchat",
                                "cx-webchat-service",
                                "cx-cobrowse",
                                "cx-gwe",
                                "cx-send-message",
				"cx-send-message-service",
                                 ],
                        mobileMode: 'auto',
                        mobileModeBreakpoint: 600
                        },
                webchat: {
 
                        apikey: "0123456789", // Used for Apigee service only
                        dataURL: "http://HOST:PORT/path/to/chat/service",
                        userData: {},
                        proactive: {
 
                                enabled: true,
                                idleTimer: 5,
                                cancelTimer: 30
                        },
                        chatButton: {
 
                                enabled: true,
                                template: false, 
                                openDelay: 1000,
                                effectDuration: 300,
                                hideDuringInvite: true
                        }
                },
                cobrowse: {
 
                        src: "<COBROWSE_SERVER_URL>/cobrowse/js/gcb.min.js",
                        url: "<COBROWSE_SERVER_URL>/cobrowse"
                },
               gwe: {
                       httpEndpoint: "http://<GWE_SERVER_URL>:<PORT>",
                       httpsEndpoint: "https://<GWE_SERVER_URL>:<PORT>",
                       dslResource: "http://HOST:PORT/path/to/domain-model.xml"
               },
              sendmessage: {

			SendMessageButton : {

				enabled: true,
                                template: false, 
                                openDelay: 1000,
                                effectDuration: 300
			},
                        apikey: "0123456789", // Used for Apigee service only
			dataURL: "http://HOST:PORT/path/to/sendmessage/service"
		},
        };
 
        (function(o){
	var f = function(){
		var d = o.location;
		o.aTags = o.aTags || [];
		for(var i=0;i<o.aTags.length;i++){
			var oTag = o.aTags[i];
			var fs = d.getElementsByTagName(oTag.type)[0], e;
			if(d.getElementById(oTag.id)) return; e = d.createElement(oTag.type); e.id = oTag.id;
			if(oTag.type == "script"){e.src = oTag.path;}
                        else{e.type = 'text/css';e.rel = 'stylesheet';e.href = oTag.path;}
			if(fs){fs.parentNode.insertBefore(e, fs);}else{d.head.appendChild(e);}
		}},ol = window.onload;
		if(o.onload){typeof window.onload != "function"?window.onload=f:window.onload=function(){ol();f();}}else f();
})({location: document, 
     onload: false, 
     aTags: [{type:"script", id:"genesys-cx-widget-script", path:"http://www.yourhost.com/path/to/widgets.min.js"}, 
		 {type:"link", id:"genesys-cx-widget-styles", path:"http://www.yourhost.com/path/to/widgets.min.css"}]});
 
</script>

Main Configuration

Genesys Widgets is a hub for multiple Genesys products and services. Some configuration options are set globally and therefore apply to all products and services running on the CX Widget platform. In the following object, you can configure options such as visual theme and language.

main
Type: object
Default: none
Requirement: Optional
Description: General global settings for the CX Widget

main.theme
Type: string
Default: "light"
Requirement: Optional
Description: Choose between dark and light themes. This changes the color scheme of the CX Widget.

main.lang
Type: string
Default: none
Requirement: Optional
Description: Set the current language using a language code. For more information about localization, see localization.

main.i18n
Type: string or object
Default: none
Requirement: Optional
Description: Set the localization language pack. Specify a URL string that points to a JSON file or define the JSON inline.

Important
The 4 options below are only available beginning at version 8.5.002.05

main.customStylesheetID
Type: string
Default: none
Requirement: optional
Description: You can define a unique Id to Genesys Widgets style sheet tag.

main.plugins
Type: array
Default: none
Requirement: optional
Description: Mention the list of plugins that needs to launch on the webpage. If a particular plugin is not mentioned here it will not appear on the webpage. By default, all the plugins will be launched if this option is not set. Use this option to set and launch only the plugins you need. Do not leave this as empty array. If not needed just exclude this option completely.
values: "cx-webchat", "cx-webchat-service", "cx-cobrowse", "cx-gwe"

main.mobileMode
Type: string or boolean
Default: 'auto'
Requirement: optional
Description: By default mobile phones are auto detected and corresponding layouts are launched. This is also true if this option is explicitly set to 'auto' (string). Setting it to true (boolean) will launch mobile layouts irrespective of mobile or desktop. Setting it to false (boolean), will launch desktop layouts irrespective of any device.

main.mobileModeBreakpoint
Type: number
Default: 600
Requirement: optional
Description: All the screens falling below this breakpoint will take mobile layouts, provided above mobileMode option is set to 'auto'.

WebChat Configuration

Genesys WebChat utilizes the Genesys Mobile Services (GMS) Chat API v2. For the purposes of chat, GMS can be installed in Chat-only mode (without Cassandra).

Chat Service Configuration in GMS

In order to configure your chat service in GMS, please follow these instructions.

Important
The GMS configuration section referring to your chat service must follow the Chat v2 conventions. For example, if you want a chat service called "mychatservice", your configuration section must be called "chat.mychatservice" (not "service.mychatservice", as was the case for Chat v1 services).

For more information on configuring chat support in GMS, please see the following links:

WebChat Configuration Options

Plugin Configuration Options

Blocking Pages from Agent View

Having the co-browse instrumentation removed from certain pages allows customers to block those pages from the agent view completely. In order to block certain pages, use one of the following methods:

Method 1: Do not configure co-browse on that page. CX Widgets only initializes and injects co-browse instrumentation when co-browse configuration is set.

Method 2: Override loaded plugins using configuration:

Examples
Normal pages
_genesys.widgets.main.plugins = ["cx-webchat", "cx-webchat-service","cx-cobrowse"]

Bypass Cobrowse
_genesys.widgets.main.plugins = ["cx-webchat", "cx-webchat-service"]

Can I modify the Chat Registration Form?

The Chat Registration Form does not currently support modifications. To implement a custom chat registration, you must create your own form, and then use the Widget Bus API to launch the Widget with your custom user data, thus bypassing the default Chat Registration Form.

Launcher

Launcher is a sample page which shows how widgets display on any host website.

Using a sample page has the following advantages:

  • Viewing Genesys Widgets with your own configuration.
  • Copying Configuration Script. Using the details you entered on the form, the configuration script is generated in the Need Configuration Script box. You can copy this script and use it on your website to launch widgets.

How to use Launcher

Webchat
Click the checkbox next to Webchat to enable it. Enter the mandatory field URL (marked with an asterisk) and click on the Launch button. Other values are optional and self explanatory.

Co-browse
Click the checkbox next to the Co-browse heading to enable it. Enter required fields (marked with an asterisk) and click on the Launch button.

GWE
Click the checkbox next to the GWE heading to enable it. Enter required fields (marked with an asterisk) and click on the Launch button.

Send Message
Click the checkbox next to the Send Message heading to enable it. Enter required fields (marked with an asterisk) and click on the Launch button.

Launcher tool (click to enlarge)
Comments or questions about this documentation? Contact us for support!