Difference between revisions of "WID/Current/SDK/App-combined"

From Genesys Documentation
Jump to: navigation, search
(Published)
 
(Published)
Line 2: Line 2:
 
|Standalone=No
 
|Standalone=No
 
|DisplayName=App
 
|DisplayName=App
−
|Role=Developer
+
|Platform=PureEngage
 
|TocName=App
 
|TocName=App
−
|Platform=PureEngage
 
 
|ComingSoon=No
 
|ComingSoon=No
 
|Context=Learn how to control your widgets.
 
|Context=Learn how to control your widgets.
 
|Section={{Section
 
|Section={{Section
 +
|sectionHeading=Overview
 
|Type=Structured
 
|Type=Structured
−
|sectionHeading=Overview
 
 
|alignment=Vertical
 
|alignment=Vertical
−
|structuredtext=App is the main controller for Genesys Widgets and has no UI. It controls all startup routines, global configurations, Extensions, executes the onReady event, and distributes changes to theme, language, mobile mode, and other application-wide effects.
+
|gif=No
 +
|structuredtext=App is the main controller for Genesys Widgets and has no UI. It controls all startup routines, global configurations, and extensions, and it executes the onReady event and distributes changes to theme, language, mobile mode, and other application-wide effects.
 
===Usage===
 
===Usage===
 
App's main interface is its configuration. You set all global defaults using the window._genesys.widgets.main property.  
 
App's main interface is its configuration. You set all global defaults using the window._genesys.widgets.main property.  
Line 19: Line 19:
 
===Mobile Support===
 
===Mobile Support===
 
App has built-in mobile detection and can automatically notify all widgets to switch to mobile mode. You can also control this manually.
 
App has built-in mobile detection and can automatically notify all widgets to switch to mobile mode. You can also control this manually.
−
|advanced=No
+
|fullwidth=No
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 +
|sectionHeading=Configuration
 
|Type=Structured
 
|Type=Structured
−
|sectionHeading=Configuration
+
|anchor=config
 
|alignment=Vertical
 
|alignment=Vertical
−
|anchor=config
+
|gif=No
 
|structuredtext====Description===
 
|structuredtext====Description===
 
App uses the configuration property '_genesys.widgets.main'. App controls the Genesys Widgets product as a whole, handling themes, languages, and mobile devices.
 
App uses the configuration property '_genesys.widgets.main'. App controls the Genesys Widgets product as a whole, handling themes, languages, and mobile devices.
  
 
===Example===
 
===Example===
−
<pre><br class="mw_emptyline">window._genesys.widgets.main = {<br class="mw_emptyline_first"> theme: 'dark',<br class="mw_emptyline"> themes: {<br class="mw_emptyline_first"> dark: 'cx-theme-dark',<br class="mw_emptyline"> light: 'cx-theme-light',<br class="mw_emptyline"> blue: 'cx-theme-blue',<br class="mw_emptyline"> red: 'cx-theme-red'<br class="mw_emptyline"> },<br class="mw_emptyline"> lang: 'en',<br class="mw_emptyline"> i18n: '/i18n.json',<br class="mw_emptyline"> mobileMode: 'auto',<br class="mw_emptyline"> mobileModeBreakpoint: 600,<br class="mw_emptyline"> debug: true<br class="mw_emptyline">}<br class="mw_emptyline_first"></pre>
+
<pre>
 +
window._genesys.widgets = {
 +
 
 +
main: {
 +
theme: 'dark',
 +
themes: {
 +
 
 +
dark: 'cx-theme-dark',
 +
light: 'cx-theme-light',
 +
blue: 'cx-theme-blue',
 +
red: 'cx-theme-red'
 +
},
 +
lang: 'en',
 +
i18n: 'i18n.json',
 +
mobileMode: 'auto',
 +
mobileModeBreakpoint: 600,
 +
debug: true,
 +
header: {'Authorization': 'value'},
 +
cookieOptions: {
 +
secure: true,
 +
domain: 'genesys.com',
 +
path: '/'
 +
}
 +
},
 +
onReady: function(){
 +
 
 +
// Do something on Widgets ready
 +
}
 +
}
  
−
{{AnchorDiv|configoptions}}
+
</pre>
 
===Options===
 
===Options===
−
 
 
{{{!}} class="wikitable"
 
{{{!}} class="wikitable"
 
{{!}}-
 
{{!}}-
Line 42: Line 70:
 
!{{!}}Default
 
!{{!}}Default
 
!{{!}}Required
 
!{{!}}Required
 +
!{{!}}Introduced/Updated
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}main.themes
 
{{!}}{{!}}main.themes
 
{{!}}{{!}}object
 
{{!}}{{!}}object
−
{{!}}{{!}}An object list containing the CSS classname for each Theme. The property names are used to select the theme in the 'theme' property. such as
+
{{!}}{{!}}An object list containing the CSS classname for each theme. The property names are used to select the theme in the 'theme' property, for example
−
 
+
{dark:'cx-theme-dark', light:'cx-theme-light', 'red':'cx-theme-red', 'blue':'cx-theme-blue'}.
−
{
 
−
dark:'cx-theme-dark',
 
−
light:'cx-theme-light',
 
−
'red':'cx-theme-red',
 
−
'blue':'cx-theme-blue'}
 
  
 
Where 'dark' and 'light' are the built-in themes provided in Genesys Widgets and 'red' and 'blue' are example custom theme names you may create on your own. Note: It is not necessary to define the 'dark' and 'light' theme as shown in this example. It is included to help show how the formatting works. Whatever you put in this object will be merged with the default themes object internally.
 
Where 'dark' and 'light' are the built-in themes provided in Genesys Widgets and 'red' and 'blue' are example custom theme names you may create on your own. Note: It is not necessary to define the 'dark' and 'light' theme as shown in this example. It is included to help show how the formatting works. Whatever you put in this object will be merged with the default themes object internally.
Line 59: Line 83:
 
{{!}}{{!}}main.theme
 
{{!}}{{!}}main.theme
 
{{!}}{{!}}string
 
{{!}}{{!}}string
−
{{!}}{{!}}Selects the theme to apply to Genesys Widgets from the 'themes' object. Uses the property name of the theme. such as using the example from 'themes' above, possible values for this could be 'dark', 'light', 'red', 'blue'.
+
{{!}}{{!}}Select the theme to apply to Genesys Widgets from the 'themes' object. Uses the property name of the theme, such as using the example from 'themes' above, possible values for this could be 'dark', 'light', 'red', 'blue'.
 
{{!}}{{!}}dark
 
{{!}}{{!}}dark
 
{{!}}{{!}}n/a
 
{{!}}{{!}}n/a
Line 74: Line 98:
 
{{!}}{{!}}Default English language strings are built into each widget and are displayed by default. Defining this i18n language pack overrides the built-in strings.
 
{{!}}{{!}}Default English language strings are built into each widget and are displayed by default. Defining this i18n language pack overrides the built-in strings.
 
{{!}}{{!}}n/a
 
{{!}}{{!}}n/a
 +
{{!}}-
 +
{{!}}main.header
 +
{{!}}object
 +
{{!}}An object containing a key value pair for the authorization header.
 +
{{!}}n/a
 +
{{!}}n/a
 +
{{!}}9.0.002.06
 +
{{!}}-
 +
{{!}}{{!}}main.preload
 +
{{!}}{{!}}array
 +
{{!}}{{!}}(For use with lazy-loading only) A list of plugins you want pre-loaded at startup. You may want certain plugins, such as SideBar, to be shown on screen as soon as possible; to do so, you may add 'sidebar' to this preload plugins array so it will be loaded after Widgets starts up. The names you add to the list must match the first part of the plugin filename you wish to load. Example: 'sidebar' will load 'sidebar.min.js' from the 'plugins/' folder. All filenames are lowercase.
 +
Note: This preload array is intended for use when running widgets in lazy-loading mode. You may also use this to pre-load your own custom-made plugins.
 +
{{!}}{{!}}none
 +
{{!}}{{!}}When lazy loading Widgets<br />
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}main.mobileMode
 
{{!}}{{!}}main.mobileMode
 
{{!}}{{!}}boolean/string
 
{{!}}{{!}}boolean/string
 
{{!}}{{!}}Mobile Mode setting.
 
{{!}}{{!}}Mobile Mode setting.
−
 
+
true = Force Mobile Mode on all devices. false = Disable Mobile Mode completely. 'auto' = Genesys Widgets Automatically switches between Mobile and Desktop Modes using the 'mobileModeBreakpoint' property and UserAgent detection.
−
true = Force Mobile Mode on all devices.
 
−
false = Disable Mobile Mode completely.
 
−
'auto' = Genesys Widgets Automatically switches between Mobile and Desktop Modes using the 'mobileModeBreakpoint' property and UserAgent detection.
 
 
{{!}}{{!}}auto
 
{{!}}{{!}}auto
−
{{!}}{{!}}n/a
+
{{!}}{{!}}n/a<br />
 
{{!}}-
 
{{!}}-
−
{{!}}{{!}}main.timeFormat
+
{{!}}main.timeFormat
−
{{!}}{{!}}number/string
+
{{!}}number/string
−
{{!}}{{!}}This sets the time format for the timestamps. It can be 12 or 24
+
{{!}}This sets the time format for the timestamps. It can be 12 or 24.
−
{{!}}{{!}}12
+
{{!}}12
−
{{!}}{{!}}n/a
+
{{!}}n/a<br />
 
{{!}}-
 
{{!}}-
 
{{!}}{{!}}main.mobileModeBreakpoint
 
{{!}}{{!}}main.mobileModeBreakpoint
Line 105: Line 140:
 
{{!}}{{!}}main.customStylesheetID
 
{{!}}{{!}}main.customStylesheetID
 
{{!}}{{!}}string
 
{{!}}{{!}}string
−
{{!}}{{!}}The HTML ID of a
+
{{!}}{{!}}The HTML ID of a <style> tag that contains CSS overrides, custom themes, or other custom CSS intended for Genesys Widgets. On startup, Widgets will move this <style> tag to the end of the document so that 1:1 CSS class overrides apply correctly.
 +
{{!}}n/a
 +
{{!}}{{!}}n/a
 +
{{!}}-
 +
{{!}}main.downloadGoogleFont
 +
{{!}}boolean
 +
{{!}}By default, Genesys Widgets downloads and uses the Google font 'Roboto'. To disable this download, set this value to false.
 +
{{!}}true
 +
{{!}}n/a
 +
{{!}}-
 +
{{!}}main.deploymentID
 +
{{!}}string
 +
{{!}}The string used to customize cookie names so that multiple Widgets deployments can run in the same domain.
 +
{{!}}n/a
 +
{{!}}n/a
 +
{{!}}9.0.006.02
 +
{{!}}-
 +
{{!}}main.cookieOptions
 +
{{!}}object
 +
{{!}}An object containing cookie attributes that applies globally to all Widgets. The following cookie attributes are supported:
 +
1. 'secure' - Either true or false, indicating if the cookie transmission requires a secure protocol (https).
 +
2. 'domain' - A string indicating a valid domain where the cookie should be visible.
 +
3. 'path' - A string indicating the path where the cookie is visible.
 +
4. 'expires' - Specifies the number of days, either from time of creation or from a Date instance, until the cookie is to be removed.
 +
'domain' and 'path' can be used to make cookies compatible with environments that use a non FQDN URL, such as an intranet hostname. However, the domain should only be manually set in production if the automated values are causing problems. Otherwise, rely on the automated domain and path.
 +
Note: The values are automatically set by Widgets to support cross-sub-domain cookies. Modifying these options overrides the automated values and might break cross-sub-domain cookie support if not properly set.
 +
For usage, please refer to the above example.
 +
{{!}}none
 +
{{!}}n/a
 +
{{!}}9.0.013.01
 +
{{!}}-
 +
{{!}}onReady
 +
{{!}}function
 +
{{!}}A callback function that is invoked when the Widgets are ready and initialized with the configuration provided.
 +
{{!}}none
 +
{{!}}n/a<br />
 
{{!}}}
 
{{!}}}
−
|advanced=No
+
|fullwidth=No
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 +
|sectionHeading=Localization
 
|Type=Structured
 
|Type=Structured
−
|sectionHeading=Localization
 
 
|alignment=Vertical
 
|alignment=Vertical
 +
|gif=No
 
|structuredtext=No localization options.
 
|structuredtext=No localization options.
−
|advanced=No
+
|fullwidth=No
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 +
|sectionHeading=API Commands
 
|Type=Structured
 
|Type=Structured
−
|sectionHeading=API Commands
 
 
|alignment=Vertical
 
|alignment=Vertical
 +
|gif=No
 
|structuredtext=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.
 
|structuredtext=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.
  
Line 125: Line 197:
  
  
−
<source lang='javascript'>var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
+
<source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
  
 
oMyPlugin.command('App.themeDemo');</source>
 
oMyPlugin.command('App.themeDemo');</source>
Line 134: Line 206:
 
<br /><br />
 
<br /><br />
 
===Example===
 
===Example===
−
<source lang='javascript'>
+
<source lang="javascript">
 
oMyPlugin.command('App.setTheme', {theme: 'light'}).done(function(e){
 
oMyPlugin.command('App.setTheme', {theme: 'light'}).done(function(e){
  
Line 181: Line 253:
 
<br /><br />
 
<br /><br />
 
====Example====
 
====Example====
−
<source lang='javascript'>
+
<source lang="javascript">
 
oMyPlugin.command('App.getTheme').done(function(e){
 
oMyPlugin.command('App.getTheme').done(function(e){
  
Line 216: Line 288:
 
<br /><br />
 
<br /><br />
 
====Example====
 
====Example====
−
<source lang='javascript'>
+
<source lang="javascript">
 
oMyPlugin.command('App.reTheme', {html: '<div>Test Theme</div>'}).done(function(e){
 
oMyPlugin.command('App.reTheme', {html: '<div>Test Theme</div>'}).done(function(e){
  
Line 263: Line 335:
 
<br /><br />
 
<br /><br />
 
====Example====
 
====Example====
−
<source lang='javascript'>
+
<source lang="javascript">
 
oMyPlugin.command('App.themeDemo', {delay: 1000}).done(function(e){
 
oMyPlugin.command('App.themeDemo', {delay: 1000}).done(function(e){
  
Line 310: Line 382:
 
<br /><br />
 
<br /><br />
 
====Example====
 
====Example====
−
<source lang='javascript'>
+
<source lang="javascript">
 
oMyPlugin.command('App.setLanguage', {lang: 'eng'}).done(function(e){
 
oMyPlugin.command('App.setLanguage', {lang: 'eng'}).done(function(e){
  
Line 361: Line 433:
 
<br /><br />
 
<br /><br />
 
====Example====
 
====Example====
−
<source lang='javascript'>
+
<source lang="javascript">
 
oMyPlugin.command('App.closeAll').done(function(e){
 
oMyPlugin.command('App.closeAll').done(function(e){
  
Line 389: Line 461:
 
{{!}}{{!}} 
 
{{!}}{{!}} 
 
{{!}}}
 
{{!}}}
−
|advanced=No
+
|fullwidth=No
 
|Status=No
 
|Status=No
 
}}{{Section
 
}}{{Section
 +
|sectionHeading=API Events
 
|Type=Structured
 
|Type=Structured
−
|sectionHeading=API Events
 
 
|alignment=Vertical
 
|alignment=Vertical
 +
|gif=No
 
|structuredtext=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.
 
|structuredtext=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.
  
Line 400: Line 473:
  
  
−
<source lang='javascript'>var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
+
<source lang="javascript">var oMyPlugin = window._genesys.widgets.bus.registerPlugin('MyPlugin');
  
 
oMyPlugin.subscribe('App.ready', function(e){});</source>
 
oMyPlugin.subscribe('App.ready', function(e){});</source>
Line 425: Line 498:
 
{{!}}{{!}}{timeFormat: iTimeFormat}
 
{{!}}{{!}}{timeFormat: iTimeFormat}
 
{{!}}}
 
{{!}}}
−
|advanced=No
+
|fullwidth=No
 
|Status=No
 
|Status=No
 
}}
 
}}
 +
|Role=Developer
 
}}
 
}}

Revision as of 15:11, January 9, 2020

This topic is part of the manual Widgets API Reference for version Current of Widgets.

Learn how to control your widgets.

Related documentation:

Overview

App is the main controller for Genesys Widgets and has no UI. It controls all startup routines, global configurations, and extensions, and it executes the onReady event and distributes changes to theme, language, mobile mode, and other application-wide effects.

Usage

App's main interface is its configuration. You set all global defaults using the window._genesys.widgets.main property. App also has a few commands you can use to change the language and theme.

Customization

App itself cannot be customized, but its configuration options affect all widgets.

Mobile Support

App has built-in mobile detection and can automatically notify all widgets to switch to mobile mode. You can also control this manually.

Configuration

Description

App uses the configuration property '_genesys.widgets.main'. App controls the Genesys Widgets product as a whole, handling themes, languages, and mobile devices.

Example

window._genesys.widgets = {

	main: {
		theme: 'dark',
		themes: {

			dark: 'cx-theme-dark',
			light: 'cx-theme-light',
			blue: 'cx-theme-blue',
			red: 'cx-theme-red'
		},
		lang: 'en',
		i18n: 'i18n.json',
		mobileMode: 'auto',
		mobileModeBreakpoint: 600,
		debug: true,
		header: {'Authorization': 'value'},
		cookieOptions: {
			secure: true, 
			domain: 'genesys.com', 
			path: '/'
		}
	},
	onReady: function(){

		// Do something on Widgets ready
	}
}

Options

Name Type Description Default Required Introduced/Updated
main.themes object An object list containing the CSS classname for each theme. The property names are used to select the theme in the 'theme' property, for example

{dark:'cx-theme-dark', light:'cx-theme-light', 'red':'cx-theme-red', 'blue':'cx-theme-blue'}.

Where 'dark' and 'light' are the built-in themes provided in Genesys Widgets and 'red' and 'blue' are example custom theme names you may create on your own. Note: It is not necessary to define the 'dark' and 'light' theme as shown in this example. It is included to help show how the formatting works. Whatever you put in this object will be merged with the default themes object internally.

{dark: 'cx-theme-dark', light: 'cx-theme-light'} n/a
main.theme string Select the theme to apply to Genesys Widgets from the 'themes' object. Uses the property name of the theme, such as using the example from 'themes' above, possible values for this could be 'dark', 'light', 'red', 'blue'. dark n/a
main.lang string Select the language to use from the 'i18n' language pack. Language codes are selected by the customer. Any language code format can be used as long as this property matches one of the language codes in your i18n language pack. For more information about localization, see localization. en n/a
main.i18n URL string or JSON Either a path to a remote i18n.json language pack file or an inline JSON language pack definition. For more information about language packs, see localization. Default English language strings are built into each widget and are displayed by default. Defining this i18n language pack overrides the built-in strings. n/a
main.header object An object containing a key value pair for the authorization header. n/a n/a 9.0.002.06
main.preload array (For use with lazy-loading only) A list of plugins you want pre-loaded at startup. You may want certain plugins, such as SideBar, to be shown on screen as soon as possible; to do so, you may add 'sidebar' to this preload plugins array so it will be loaded after Widgets starts up. The names you add to the list must match the first part of the plugin filename you wish to load. Example: 'sidebar' will load 'sidebar.min.js' from the 'plugins/' folder. All filenames are lowercase. 
Note: This preload array is intended for use when running widgets in lazy-loading mode. You may also use this to pre-load your own custom-made plugins.
none When lazy loading Widgets
main.mobileMode boolean/string Mobile Mode setting.

true = Force Mobile Mode on all devices. false = Disable Mobile Mode completely. 'auto' = Genesys Widgets Automatically switches between Mobile and Desktop Modes using the 'mobileModeBreakpoint' property and UserAgent detection.

auto n/a
main.timeFormat number/string This sets the time format for the timestamps. It can be 12 or 24. 12 n/a
main.mobileModeBreakpoint number The breakpoint width in pixels where Genesys Widgets will switch to Mobile Mode. Breakpoint checked at startup only. 600 n/a
main.debug boolean Enable debug logging from the bus to appear in the browser console. false n/a
main.customStylesheetID string The HTML ID of a <style> tag that contains CSS overrides, custom themes, or other custom CSS intended for Genesys Widgets. On startup, Widgets will move this <style> tag to the end of the document so that 1:1 CSS class overrides apply correctly. n/a n/a
main.downloadGoogleFont boolean By default, Genesys Widgets downloads and uses the Google font 'Roboto'. To disable this download, set this value to false. true n/a
main.deploymentID string The string used to customize cookie names so that multiple Widgets deployments can run in the same domain. n/a n/a 9.0.006.02
main.cookieOptions object An object containing cookie attributes that applies globally to all Widgets. The following cookie attributes are supported: 
1. 'secure' - Either true or false, indicating if the cookie transmission requires a secure protocol (https).
2. 'domain' - A string indicating a valid domain where the cookie should be visible.
3. 'path' - A string indicating the path where the cookie is visible.
4. 'expires' - Specifies the number of days, either from time of creation or from a Date instance, until the cookie is to be removed.

'domain' and 'path' can be used to make cookies compatible with environments that use a non FQDN URL, such as an intranet hostname. However, the domain should only be manually set in production if the automated values are causing problems. Otherwise, rely on the automated domain and path. 

Note: The values are automatically set by Widgets to support cross-sub-domain cookies. Modifying these options overrides the automated values and might break cross-sub-domain cookie support if not properly set.

For usage, please refer to the above example.

none n/a 9.0.013.01
onReady function A callback function that is invoked when the Widgets are ready and initialized with the configuration provided. none n/a

Localization

No localization options.

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('App.themeDemo');


setTheme

Sets the theme for Genesys Widgets from the list of registered themes. Default themes are 'light' and 'dark'. You can register as many new themes as you need.

Example

oMyPlugin.command('App.setTheme', {theme: 'light'}).done(function(e){

	// App set theme successfully

}).fail(function(e){

	// App failed to set theme
});


Options

Option Type Description
theme string Name of the theme you want to use. This name is specified in window._genesys.main.themes. Default themes are 'light' and 'dark'.

Resolutions

Status When Returns
resolved Theme exists and is successfully changed The name of the theme that was chosen. e.g. 'light'
rejected   'Invalid theme specified'


getTheme

Get the CSS classname for the currently selected theme.

Example

oMyPlugin.command('App.getTheme').done(function(e){

	// App got theme successfully
	// e == CSS classname for current theme

}).fail(function(e){

	// App failed to get theme
});


Resolutions

Status When Returns
resolved Always CSS classname for the currently selected theme. e.g. 'cx-theme-light'
rejected Never  


reTheme

Accepts an HTML reference (either string or jQuery wrapped set) and applies the proper CSS Theme Classname to that HTML and returns it back. When widgets receive the 'theme' event from App, they pass-in their UI containers into App.reTheme to have the old theme classname stripped and new classname applied.

Example

oMyPlugin.command('App.reTheme', {html: '<div>Test Theme</div>'}).done(function(e){

	// App set theme successfully

}).fail(function(e){

	// App failed to set theme
});


Options

Option Type Description
html string or jQuery Wrapped Set HTML string or jQuery Wrapped Set you want to have modified.

Resolutions

Status When Returns
resolved When HTML is provided and theme is updated HTML that was passed-in and modified
rejected When no HTML is provided 'No HTML provided by [plugin name]'


themeDemo

Start an automated demo of each theme. All registered themes will be applied with a default delay between themes of 2 seconds. You can override this delay. This command is useful for comparing themes or testing themes with official or custom widgets.

Example

oMyPlugin.command('App.themeDemo', {delay: 1000}).done(function(e){

	// App demo successfully started

}).fail(function(e){

	// App failed to start demo
});


Options

Option Type Description
delay number Number of milliseconds between theme changes. Default value is 2000 milliseconds.

Resolutions

Status When Returns
resolved Always  
rejected Never  


setLanguage

Changes the language

Example

oMyPlugin.command('App.setLanguage', {lang: 'eng'}).done(function(e){

	// App set language successfully started

}).fail(function(e){

	// App failed to set language
});


Options

Option Type Description
lang string Change the language of Genesys Widgets. Switches all strings in Widgets to selected language.

Resolutions

Status When Returns
resolved When language successfully changed  
rejected When no language code is provided No language code provided
rejected When no matching language code is specified in your language pack No matching language code found in language pack


closeAll

Publishes the 'App.closeAll' event that requests all widgets to close.

Example

oMyPlugin.command('App.closeAll').done(function(e){

	// App closed all successfully

}).fail(function(e){

	// App failed to close all
});


Resolutions

Status When Returns
resolved Always  
rejected Never  

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('App.ready', function(e){});
Name Description Data
ready CallUs is initialized and ready to accept commands  
i18n Published when the language for Genesys Widgets is changed or is being set for the first time. '(language code)'
theme Published when the theme for Genesys Widgets is changed or is being set for the first time. {theme: '(theme CSS classname)'}
timeFormat Published when the time format for Genesys Widgets is changed or is being set for the first time. {timeFormat: iTimeFormat}
Retrieved from "https://all.docs.genesys.com/WID/Current/SDK/App-combined (2025-06-19 19:04:07)"
Comments or questions about this documentation? Contact us for support!