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>
    
    // Make sure that the "extensions" object exists
    // Always include this in your extensions
    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
    // 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
        oTestExtension.registerCommand("demo", function(e){

              // Command execution here

              // "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.
        });
    };

</script>