Genesys Widgets Deployment Guide
This guide provides the steps required to instrument your website with Genesys Widgets.
Audience
This document is for website developers who are in charge of website code. You must have knowledge of HTML, JavaScript, and CSS.
How Can I Deploy Genesys Widgets?
We support two deployment methods:
Lazy-Loading
Lazy-Loading breaks the JavaScript bundle apart into individual plugin files and loads them into the page only as you need them. This is the preferred method of deploying Genesys Widgets.
All-In-One
The All-In-One method is the "classic" method of deploying Genesys Widgets. In this method, you have one JavaScript file and one CSS file that contain all plugins and resources.
Deploying Genesys Widgets (Lazy-Loading)
Files Used
- widgets/cxbus.min.js
- widgets/plugins/widgets-core.min.js
- widgets/plugins/*.*
A good starting point is the following script:
<script src="widgets/cxbus.min.js" onload="javascript:CXBus.configure({debug:true,pluginsPath:'build/plugins/'});CXBus.loadFile('path/to/widgets.config.js').done(function(){CXBus.loadPlugin('widgets-core')});"></script>This script does the following:
- Loads cxbus.min.js. This makes the global CXBus instance available.
- Configures CXBus to turn on debug logging and set the path to the Widgets plugin folder.
- Load your configuration file, widgets.config.js. (This is an imaginary file. You must create it).
- Loads widgets-core, the core Genesys Widgets library.
Use this script as a starting point and customize it as needed.
Remember that your configuration can be defined inline on the page or loaded in as a separate file (as shown in this script).
On-Demand Lazy-Loading
Genesys Widgets is designed to load plugins into the page on-demand as you use the product. For example, if you call the command "WebChat.open", CXBus will fetch the "webchat.min.js" plugin from the "plugins/" folder and load it into the page. Any WebChat command will trigger it to load. Likewise, WebChat calls WebChatService commands, thus CXBus will load webchatservice.min.js into the page as well.
Pre-loading Plugins
In some cases you may not want plugins loaded on-demand, or the demand is to load them at startup. A good example is SideBar. You would likely want this plugin to appear on the screen immediately so the customer can use it. To make this possible, you may specify which plugins you want preloaded at startup in your configuration.
_genesys.widgets.main.preload = [
"sidebar"
];You may specify as many plugins as you want in the preload list. They will be loaded in order right after you load Widgets Core.
All plugin names are lower-case. Please refer to the file names in the "plugins/" folder. e.g. To preload webchat.min.js, specify "webchat", the first part of the file name.
You may find other plugins or features of plugins that necessitate pre-loading.
Deploying Genesys Widgets (All-in-one)
Files Used
- widgets/widgets.min.css
- widgets/widgets.min.js
A good starting point is the following script:
<script src-"widgets/widgets.config.js"></script>
<script src="widgets/widgets.min.js"></script>
<link id="genesys-widgets-styles" href="http://www.yourhost.com/path/to/widgets.min.css" type="text/css" rel="stylesheet"/>First, you need to define your configuration for Genesys Widgets. you can do this inline on the page using a script tag or store it in a separate file and load it in before "widgets.min.js". In the script example above, we are assuming your configuration is stored in another file. You must create the "widgets.config.js" file for this script to function properly.