WID/Current/SDK/ChannelSelector-combined

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

Related documentation:

• How Widgets works

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.

Note the screenshots in the following section, and visit the configuration page 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 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

ChannelSelector_Dark01.png

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

<br class="mw_emptyline">window._genesys.widgets.channelselector = {<br class="mw_emptyline_first">	ewtRefreshInterval: 10,<br class="mw_emptyline_first">	channels: [{<br class="mw_emptyline_first">		enable: true, <br class="mw_emptyline">		clickCommand: 'CallUs.open', <br class="mw_emptyline">		displayName: 'Call Us', <br class="mw_emptyline">		i18n: 'CallusTitle', <br class="mw_emptyline">		icon: 'call-outgoing', <br class="mw_emptyline">		html: '<img src="http://placehold.it/100x100">', <br class="mw_emptyline">		ewt: {<br class="mw_emptyline">			display: true, <br class="mw_emptyline">			queue: 'callus_ewt_test_eservices', <br class="mw_emptyline">			availabilityThresholdMin: 300, <br class="mw_emptyline">			availabilityThresholdMax: 480, <br class="mw_emptyline">			hideChannelWhenThresholdMax: false<br class="mw_emptyline">			}<br class="mw_emptyline">		}, <br class="mw_emptyline_first">		{<br class="mw_emptyline">		enable: true, <br class="mw_emptyline">		clickCommand: 'WebChat.open', <br class="mw_emptyline">		displayName: 'Web Chat', <br class="mw_emptyline">		i18n: 'ChatTitle', <br class="mw_emptyline">		icon: 'chat', <br class="mw_emptyline">		html: '', <br class="mw_emptyline">		ewt: {<br class="mw_emptyline">			display: true, <br class="mw_emptyline">			queue: 'chat_ewt_test_eservices', <br class="mw_emptyline">			availabilityThresholdMin: 300, <br class="mw_emptyline">			availabilityThresholdMax: 480, <br class="mw_emptyline">			hideChannelWhenThresholdMax: false<br class="mw_emptyline">			} <br class="mw_emptyline">		}, <br class="mw_emptyline_first">		{<br class="mw_emptyline">		enable: true, <br class="mw_emptyline">		clickCommand: 'SendMessage.open', <br class="mw_emptyline">		displayName: 'Send Message', <br class="mw_emptyline">		i18n: 'EmailTitle', <br class="mw_emptyline">		icon: 'email', <br class="mw_emptyline">		html: ''<br class="mw_emptyline">		},<br class="mw_emptyline_first">		{<br class="mw_emptyline">		enable: true, <br class="mw_emptyline">		clickCommand: 'Callback.open', <br class="mw_emptyline">		displayName: 'Receive a Call', <br class="mw_emptyline">		i18n: 'CallbackTitle', <br class="mw_emptyline">		icon: 'call-incoming', <br class="mw_emptyline">		html: '', <br class="mw_emptyline">		ewt: {<br class="mw_emptyline">			display: true, <br class="mw_emptyline">			queue: 'callback_ewt_test_eservices', <br class="mw_emptyline">			availabilityThresholdMin: 300, <br class="mw_emptyline">			availabilityThresholdMax: 480, <br class="mw_emptyline">			hideChannelWhenThresholdMax: false<br class="mw_emptyline">			}<br class="mw_emptyline">		}, <br class="mw_emptyline_first">		{<br class="mw_emptyline">		enable: true, <br class="mw_emptyline">		name: 'CoBrowse', <br class="mw_emptyline">		clickCommand: 'CoBrowse.open', <br class="mw_emptyline">		displayName: 'Co-browse', <br class="mw_emptyline">		i18n: 'CobrowseTitle', <br class="mw_emptyline">		icon: 'cobrowse', <br class="mw_emptyline">		html: ''<br class="mw_emptyline">		}]<br class="mw_emptyline">};<br class="mw_emptyline">

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[].readyEvent	string	Subscribes to this ready event published by a plugin and enables the channel when that plugin is ready.	none	n/a
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
chat.ewtMax	number	If EWT is greater than ewtMin and less this value (seconds), Wait time is shown with a red alert icon.	480	n/a
channels[].ewt.display	boolean	To display estimated wait time details.	true	n/a
channels[].ewt.queue	string	EWT service channel virtual queue.	none	Always
channels[].ewt.availabilityThresholdMin	number	If EWT is greater than 0 and less than this minimum threshold value (seconds), estimated wait time is shown with a yellow warning icon.	300	n/a
channels[].ewt.availabilityThresholdMax	number	If EWT is greater than the minimum threshold value and less than the maximum threshold value (seconds), estimated wait time is shown with a red alert icon.	480	n/a
channels[].ewt.hideChannelWhenThresholdMax	boolean	Hides this channel when estimated wait time is greater than the maximum threshold value.	true	n/a

Localization

Important

For information on how to set up localization, refer to the Localization Guide.

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",
			"UnavailableTitle": "Unavailable",
			"CobrowseButtonText": "CobrowseSubTitle",
			"CallbackTitle": "Receive a Call",
			"CobrowseSubTitle": "Agent connection is required for this.",
			"minute": "min",
			"minutes": "mins"
		}
	}
}

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 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	When ChannelSelector is successfully closed	n/a
rejected	When 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	When ChannelSelector Widget is successfully opened	n/a
rejected	When ChannelSelector Widget is already open	'Already open'

configure

Modifies the ChannelSelector configuration.

Example

oMyPlugin.command('ChannelSelector.conifugre', {

	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	If EWT is greater than 0 and less than the minimum threshold value (seconds), the EWT is shown with a yellow warning icon.
channels[].ewt.availabilityThresholdMax	number	If EWT is greater than the minimum threshold value and less than the maximum threshold value (seconds), the EWT is shown with a red alert icon.
channels[].ewt.hideChannelWhenThresholdMax	boolean	Hides this channel when EWT is greater than the maximum threshold value.

Resolutions

Status	When	Returns
resolved	When configuration options are provided and set	n/a
rejected	When 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	When EWT is displayed successfully	n/a
rejected	When StatsService fails to retrieve EWT data	'Unable to display EWT Stats in ChannelSelector'
rejected	When 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	When ChannelSelector Widget is successfully opened	n/a
rejected	When ChannelSelector Widget is not opened	'ChannelSelector not opened to disable stats details'
rejected	When 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	When ChannelSelector Widget is successfully opened	n/a
rejected	When EWT details are already displayed	'Stats already enabled'
rejected	When 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 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