Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

Pendo Resource Center Integration Kit

The Pendo Resource Center provides an integration framework that allows third party developers to create applications that Pendo customers can activate and provide to their users.

At a high level, an integration consists of a single JSON configuration file hosted by Pendo, and a web application (integration) hosted by the third party developer. There is also a lightweight Javascript SDK (pendo-extension-sdk) that can be leveraged to communicate between the integration and the Pendo Resource Center to retrieve configuration information, invoke triggers, and listen for events from the Resource Center.

If you would like to create a Resource Center integration please contact integrations@pendo.io for more information. Pendo can assist in creating the correct pendo.json configuration file based on the pendo-template.json example provided in this repo.

pendo-extension-sdk

Getting the SDK

There are multiple ways to leverage the pendo-extension-sdk from your project.

  • You can download the file and host it locally:

    $ wget https://pendo-io-extensions.storage.googleapis.com/sdk/0.1.0/js/pendo-extensions-sdk.js
  • You can reference the file from a script tag in your web application:

    <script src="https://pendo-io-extensions.storage.googleapis.com/sdk/0.1.0/js/pendo-extensions-sdk.js"></script>

Using the SDK

The following code demonstrates retrieving configuration information associated with a particular installation of the extension.

Initialization

const client = PendoSDK.getConnection("app-name");
client.initialize();

client.get('extension.config').then((result) => {
    const options = result.data.config.provider.options;
    const {apiKey, subdomain} = options;
    
    // do something with these customer specific configuration values here
    // e.g. redirect to URL and pass in apiKey as query parameter
});

Gets

Gets will ask the outer frame agent of the Resource Center for information and return that data via a Promise. These typically don't require arguments.

  • extension.config - retrieve customer-specific configuration information (e.g. API key)

    client.get('extension.config').then((result) => {...}
  • browser - retrieve browser environment information

    client.get('browser').then((result) => {...}
  • metadata - return all agent metadata associated with the current visitor

    client.get('metadata').then((result) => {...}

Triggers

Triggers are used to issue a command to the outer frame agent of the Resource Center.

  • resizeHeader - Takes integer argument of pixels to adjust the header height to. 0 hides the header.

    client.trigger('resizeHeader', 10);
  • updateNotificationBadge - Takes an integer argument and increments the notification indicator on the Guide Center badge by the number passed in.

    client.trigger('updateNotificationBadge', 3);
  • content.zoom - Displays an image in a shadow box overlaying the parent web application according to the passed in configuration object.

    client.trigger('content.zoom', {
        type: 'IMG',
        top: TopNumberOfPixels, // Integer value
        left: LeftNumberOfPixels, // Integer value
        width: width, // of the target element, Integer value
        height: height, // of the target element, Integer value
        src: src, // url of the image
        options: {
            transitionDuration: NumMilliSecs, //Integer value
            margin: NumPixels //Integer value
        }
    });
  • toggleLauncher - show or hide the Resource Center

    client.trigger('toggleLauncher');
  • returnToMenu - return the user to the top level navigation of Resource Center

    client.trigger('returnToMenu');

Listeners

(not currently implemented)

Listeners are used to set up a callback function in the extension app for whenever the events occur. Typically don't have arguments and the callbacks can be called many times.

  • events.onMenuItemClick - invoked when menu item for this integration in Resource Center is clicked

    client.listen('events.onMenuItemClick',
        function() {...}
    );
  • events.onToggleClick - invoked when the Resource Center is opened or closed

    client.listen('events.onToggleClick',
        function() {...}
    );

About

No description, website, or topics provided.

Resources

License

Releases

No releases published

Packages

No packages published

Languages