ChannelSelector

From Genesys Documentation
Jump to: navigation, search
This topic is part of the manual Widgets API Reference for version Current of Widgets.

Learn how to provide your customers with a configurable list of channels as an entry point for contacting customer service.

Related documentation:

Overview

The ChannelSelector Widget displays a configurable list of channels, as an entry point for customers to contact customer service. In addition to showing multiple channels, ChannelSelector can be configured to display the estimated wait time (EWT) for each channel. You can also use an EWT value to configure channels to hide, or to show, that they disabled. Channels are not limited to Genesys Widgets; you can add your own custom channels to launch applications or open new windows as necessary.

The ChannelSelector widget in light theme.

Note the screenshots in the following section, and visit the configuration section for more information.

Usage

Use the following methods to launch ChannelSelector manually:

  • Call the ChannelSelector.open command
  • Create your own custom button or link to open ChannelSelector (using the "ChannelSelector.open" command)
Important
By default ChannelSelector has no channels configured. The UI will appear empty if not configured. See the configuration section for examples and information on how to set up your own custom channels.

Customization

You can customize and localize all of the static text shown in the ChannelSelector Widget by adding entries into your configuration and localization options.

ChannelSelector supports Themes. You can create and register your own themes for Genesys Widgets.

Namespace

The Channel Selector plugin has the following namespaces tied to each of the following types:

Type Namespace
Configuration channelselector
i18n—Localization channelselector
CXBus—API commands & API events ChannelSelector
CSS .cx-channel-selector

Mobile support

ChannelSelector supports both desktop and mobile devices. Like all Genesys Widgets, there are two main modes: Desktop and Mobile. Desktop is employed for monitors, laptops, and tablets. Mobile is employed for smartphones. When a smartphone is detected, ChannelSelector switches to special full-screen templates that are optimized for both portrait and landscape orientations.

Switching between Desktop and Mobile modes is done automatically by default. You may configure Genesys Widgets to switch between Desktop and Mobile modes manually if necessary.

Screenshots

Dark theme
The ChannelSelector widget in dark theme in mobile landscape view displaying estimated wait time The ChannelSelector widget in dark theme in desktop view displaying estimated wait time The ChannelSelector widget in dark theme in mobile landscape view displaying available status The ChannelSelector widget in dark theme in desktop view displaying available status The ChannelSelector widget in dark theme in mobile portrait view displaying estimated wait time The ChannelSelector widget in dark theme in desktop view displaying estimated wait time The ChannelSelector widget in dark theme in mobile portrait view displaying available status The ChannelSelector widget in dark theme in mobile landscape view displaying estimated wait time The ChannelSelector widget in dark theme in mobile portrait view displaying estimated wait time The ChannelSelector widget in dark theme in mobile landscape view displaying estimated wait time The ChannelSelector widget in dark theme in mobile portrait view displaying estimated wait time

Light theme
The ChannelSelector widget in light theme in mobile portrait view displaying available status The ChannelSelector widget in light theme in mobile landscape view displaying available status The ChannelSelector widget in light theme in desktop view displaying available status The ChannelSelector widget in light theme in mobile landscape view displaying estimated wait time for all channels The ChannelSelector widget in light theme in mobile landscape view displaying estimated wait time for two channels The ChannelSelector widget in light theme in desktop view displaying estimated wait time for all channels The ChannelSelector widget in light theme in mobile landscape view displaying estimated wait time for all channels The ChannelSelector widget in light theme in desktop view displaying estimated wait time for 2 channels The ChannelSelector widget in light theme in mobile portrait view displaying estimated wait time for all channels The ChannelSelector widget in light theme in mobile portrait view displaying estimated wait time for 2 channels The ChannelSelector widget in light theme in mobile portrait view displaying estimated wait time for all channels

Configuration

ChannelSelector shares the _genesys.widgets.channelselector configuration namespace. ChannelSelector has UI options to enable and disable channels, hide channels, add new channels, and display estimated wait time (EWT) details. All the channels are displayed based on the array of objects order defined in the channel's configuration. To hide a particular channel, simply remove the corresponding array object.

Important
EWT can only be configured for WebChat, Callback, ClickToCall, and CallUs channels. It may not be applicable for other channels. If configured for the Send Message channel, it will always be shown as available regardless of any EWT value.

Example

 window._genesys.widgets.channelselector = {
 
 	ewtRefreshInterval: 10,
 
 	channels: [{
 
 		enable: true, 
 		clickCommand: 'CallUs.open', 
 		displayName: 'Call Us', 
 		i18n: 'CallusTitle', 
 		icon: 'call-outgoing', 
 		html: '<img src='http://placehold.it/100x100'>', 
 		ewt: {
 			display: true, 
 			queue: 'callus_ewt_test_eservices', 
 			availabilityThresholdMin: 300, 
 			availabilityThresholdMax: 480, 
 			hideChannelWhenThresholdMax: false
 			}
 		}, 
 
 		{
 		enable: true, 
 		clickCommand: 'WebChat.open', 
 		displayName: 'Web Chat', 
 		i18n: 'ChatTitle', 
 		icon: 'chat', 
 		html: '', 
 		ewt: {
 			display: true, 
 			queue: 'chat_ewt_test_eservices', 
 			availabilityThresholdMin: 300, 
 			availabilityThresholdMax: 480, 
 			hideChannelWhenThresholdMax: false
 			} 
 		}, 
 
 		{
 		enable: true, 
 		clickCommand: 'Callback.open', 
 		displayName: 'Receive a Call', 
 		i18n: 'CallbackTitle', 
 		icon: 'call-incoming', 
 		html: '', 
 		ewt: {
 			display: true, 
 			queue: 'callback_ewt_test_eservices', 
 			availabilityThresholdMin: 300, 
 			availabilityThresholdMax: 480, 
 			hideChannelWhenThresholdMax: false
 			}
 		}, 
 
 	 };

Options

Name Type Description Default Required
ewtRefreshInterval number EWT is updated for every time interval (seconds) defined here. 10 n/a
channels[].enable boolean Enable/disable a channel. true n/a
channels[].clickCommand string The CXBus command name for opening a particular Widget when this channel is clicked. none Always
channels[].displayName string A channel name to display on ChannelSelector Widget. none Always
channels[].i18n string To support localization of the channel display name, this takes a key parameter of the channelselector section in the language pack file. Overrides above displayName. none n/a
channels[].icon string Select from one of the Genesys Widgets icons by specifying icon css class name. none Always
channels[].html string Overrides and replaces the icon section of a channel with the html (image tag) defined here. none n/a
channels[].ewt.display boolean To display EWT details. true n/a
channels[].ewt.queue string EWT service channel virtual queue. none Always
channels[].ewt.availabilityThresholdMin number (seconds) If EWT is greater than 0 minutes and less than this minimum threshold value (in minutes), then the EWT is shown with a yellow warning icon.
Important
Comparison is made after converting the threshold value in seconds to minutes.
300 n/a
channels[].ewt.availabilityThresholdMax number (seconds) If EWT is greater than this minimum threshold value (in minutes) and less than the maximum threshold value (in minutes), then the EWT is shown with a red alert icon.
Important
Comparison is made after converting the threshold value in seconds to minutes.
480 n/a
channels[].ewt.hideChannelWhenThresholdMax boolean Hides this channel when EWT is greater than the maximum threshold value. true n/a

Localization

Important
For information on how to set up localization, refer to Localize widgets and services.

Usage

Use the channelselector namespace when you define localization strings for the ChannelSelector plugin in your i18n JSON file.

The following example shows how to define new strings for the en (English) language. You can use any language codes you wish; there is no standard format. When selecting the active language in your configuration, you must match one of the language codes defined in your i18n JSON file. You must only define a language code once in your i18n JSON file. Inside each language object you must define new strings for each Widget.

Example i18n JSON

{
	"en": {
		"channelselector": {
			"Title": "Live Assistance",
			"SubTitle": "How would you like to get in touch?",
			"WaitTimeTitle": "Wait Time",
			"AvailableTitle": "Available",
			"AriaAvailableTitle": "Available",
			"UnavailableTitle": "Unavailable",
			"CallbackTitle": "Receive a Call",
			"AriaClose": "Live Assistance Close",
			"AriaWarning": "Warning",
			"AriaAlert": "Alert",
			"minute": "min",
			"minutes": "mins",
			"AriaWindowLabel": "Live Assistance Window"
		}
	}
}

API commands

Once you've registered your plugin on the bus, you can call commands on other registered plugins. Here's how to use the global bus object to register a new plugin on the bus.

Important
The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see Genesys Widgets Extensions for more information about extending Genesys Widgets.
var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');

oMyPlugin.command('ChannelSelector.open');

close

Closes the ChannelSelector UI.

Example

oMyPlugin.command('ChannelSelector.close').done(function(e){

	// ChannelSelector closed successfully

}).fail(function(e){

	// ChannelSelector failed to close
});

Resolutions

Status When Returns
resolved ChannelSelector is successfully closed n/a
rejected ChannelSelector is already closed Already closed


open

Opens the ChannelSelector UI.

Example

oMyPlugin.command('ChannelSelector.open').done(function(e){

	// ChannelSelector opened successfully

}).fail(function(e){

	// ChannelSelector failed to open
});

Resolutions

Status When Returns
resolved ChannelSelector Widget is successfully opened n/a
rejected ChannelSelector Widget is already open 'Already open'


configure

Modifies the ChannelSelector configuration.

Example

oMyPlugin.command('ChannelSelector.configure', {

	channels: [
		{
			enabled: true,
			clickCommand: 'CallUs.open',
			readyEvent: 'CallUs.ready',
			displayName: 'Call Us',
			i18n: 'CallusTitle',
			icon: 'call-outgoing',
			html:  '',
			ewt:{

				display: true,
				queue:'chat_ewt_test_eservices',
				availabilityThresholdMin:60,
				availabilityThresholdMax:600
			}
		}
	]

}).done(function(e){

	// ChannelSelector configured successfully

}).fail(function(e){

	// ChannelSelector failed to configure
});

Options

Option Type Description
ewtRefreshInterval number EWT is updated for every time interval (seconds) is defined.
channels array Array containing each channel configuration object. The order of channels is displayed based on the order defined here.
channels[].enable boolean Enable/disable chat channel.
channels[].clickCommand string The CXBus command name for opening a particular Widget when this channel is clicked.
channels[].readyEvent string Subscribes to this ready event published by a plugin and enables the channel when that plugin is ready.
channels[].displayName string A channel name to display in the ChannelSelector Widget.
channels[].i18n string To support localization of channel display name, this takes a key parameter of the channelselector section in the language pack file. Overrides above displayName.
channels[].icon string Select from one of the Genesys Widgets icons by specifying icon css class name.
channels[].html string Overrides and replaces the icon section of a channel with the html (image tag) defined here.
channels[].ewt.display boolean To display EWT details.
channels[].ewt.queue string EWT service channel virtual queue name.
channels[].ewt.availabilityThresholdMin number (seconds) If EWT is greater than 0 minutes and less than this minimum threshold value (in minutes), then the EWT is shown with a yellow warning icon.
Note: Comparison is made after converting the threshold
value in seconds to minutes.
channels[].ewt.availabilityThresholdMax number (seconds) If EWT is greater than this minimum threshold value (in minutes) and less than the maximum threshold value (in minutes), then the EWT is shown with a red alert icon.
Note: Comparison is made after converting the threshold
value in seconds to minutes.
channels[].ewt.hideChannelWhenThresholdMax boolean Hides this channel when EWT is greater than the maximum threshold value.


Resolutions

Status When Returns
resolved Configuration options are provided and set n/a
rejected No configuration options are provided 'Invalid configuration'


displayStats

Displays estimated wait time (EWT) and availability details for each channel.

Example

oMyPlugin.command('ChannelSelector.displayStats').done(function(e){

	// ChannelSelector displayed stats successfully

}).fail(function(e){

	// ChannelSelector failed to display stats
});

Resolutions

Status When Returns
resolved EWT is displayed successfully n/a
rejected StatsService fails to retrieve EWT data 'Unable to display EWT Stats in ChannelSelector'
rejected enableEwt config is disabled or when required channel plugins are not ready 'Either EWT config is disabled or plugins not yet ready'


disableStats

Clears the UI of any EWT. Disables EWT fetching for the defined time interval.

Example

oMyPlugin.command('ChannelSelector.disableStats').done(function(e){

	// ChannelSelector disabled stats successfully

}).fail(function(e){

	// ChannelSelector failed to disable stats
});

Resolutions

Status When Returns
resolved ChannelSelector Widget is successfully opened n/a
rejected ChannelSelector Widget is not opened 'ChannelSelector not opened to disable stats details'
rejected EWT is disabled for all channels 'Stats already disabled'


enableStats

Displays EWT and availability details in the UI. Enables fetching EWT for the defined time interval.

Example

oMyPlugin.command('ChannelSelector.enableStats').done(function(e){

	// ChannelSelector enabled stats successfully

}).fail(function(e){

	// ChannelSelector failed to enable stats
});

Resolutions

Status When Returns
resolved ChannelSelector Widget is successfully opened n/a
rejected EWT details are already displayed 'Stats already enabled'
rejected ChannelSelector Widget is not opened 'ChannelSelector not opened to enable stats details'

API events

Once you've registered your plugin on the bus, you can subscribe to and listen for published events. Here's how to use the global bus object to register a new plugin on the bus.

Important
The global bus object is a debugging tool. When implementing Widgets on your own site, do not use the global bus object to register your custom plugins. Instead, see Genesys Widgets Extensions for more information about extending Genesys Widgets.
var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');

oMyPlugin.subscribe('ChannelSelector.ready', function(e){});
Name Description Data
ready ChannelSelector plugin is initialized and ready to accept commands n/a
opened ChannelSelector Widget has appeared on screen n/a
closed ChannelSelector Widget has been removed from the screen n/a
Comments or questions about this documentation? Contact us for support!