ChannelSelector
Contents
Learn how to provide your customers with a configurable list of channels as an entry point for contacting customer service.
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 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)
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
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.
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
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.
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.
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 |