Genesys Widgets Extensions

Genesys Widgets allows 3rd parties to create their own plugins/widgets to extend the default package. Extensions are an easy way to define your own while utilizing the same resources as core Genesys Widgets.

Defining Extensions

Extensions are defined at runtime before Genesys Widgets load. You can define them inline or include extensions in separate files, either grouped or separated.

Important

Define/Include your extensions AFTER your Genesys Widgets configuration object but BEFORE you include the Genesys Widgets JavaScript package

<script>

if(!window._genesys.widgets.extensions){

    window._genesys.widgets.extensions = {};
}

window._genesys.widgets.extensions["TestExtension"] = function($, CXBus, CXCommon){

    var oTestExtension = CXBus.registerPlugin("TestExtension");

    oTestExtension.subscribe("WebChat.opened", function(e){});

    oTestExtension.publish("ready");

    oTestExtension.command("WebChat.open").done(function(e){

          // Handle success return state

    }).fail(function(e){

          // Handle failure return state
    });

    oTestExtension.registerCommand("demo", function(e){

          // Command execution here
    });
};

</script>

Make sure that the "extensions" object exists. Always include this at the top of your extension definition.

if(!window._genesys.widgets.extensions){

window._genesys.widgets.extensions = {};
}

Create a new named property inside the "extensions" object and define it as a function. When Genesys Widgets initializes it will step through each extension and invoke each function, initializing them. Genesys Widgets will share resources as arguments. These include: jQuery, CXBus, and CXCommon (common UI utilities).

window._genesys.widgets.extensions["TestExtension"] = function($, CXBus, CXCommon){

Inside the extension function you create a new CXBus plugin. You can use this CXBus plugin to interface with other Genesys Widgets. You can add your own UI controller logic in here or simply use the extension to connect an existing UI controller to the bus (e.g. share its API over the bus and coordinate actions with events)

Registering a new plugin on the bus creates a new, unique namespace for all your events and commands In this example, the namespace "cx.plugin.TestExtension" is created.

Note: when referring to other namespaces, like cx.plugin.WebChat it is not necessary to include the "cx.plugin." prefix. It is optional and implied.

var oTestExtension = CXBus.registerPlugin("TestExtension");

Extensions are like any other Genesys Widget You can publish, subscribe, call commands, or make your own commands on the bus You can interface with other widgets on the bus for more complex interactions

Example: subscribing to an event

oTestExtension.subscribe("WebChat.opened", function(e){});

Example: publishing an event publishes the event "TestExtension.ready" on the bus

oTestExtension.publish("ready", {arbitrary data to share with subscribers (optional)});

Example: calling a command Commands are deferred functions. You must handle their return states asynchronously

oTestExtension.command("WebChat.open", {any options required}).done(function(e){

    // Handle success return state
    // "e", the event object, is a standard CXBus format
    // Any return data will be available under e.data

}).fail(function(e){

    // Handle failure return state
    // "e", the event object, may contain an error message, warning, or AJAX response object
});

Example: Registering a command Creates a new command under your namespace that you or other widgets can call.

"e", the event object, is a standard CXBus format

• e.data == options passed into command when being called
• e.commander == the namespace of the widget that called this command
• e.command == the name of the command being called
• e.time == timestamp when the command was called
• e.deferred == the deferred promise created for this command call. You MUST always resolve or reject this promise using e.deferred.resolve() or e.deferred.reject(). You may pass any arbitrary data into either resolution state.

oTestExtension.registerCommand("demo", function(e){

    // Command execution here
});