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.

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>

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

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 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 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');

(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() {...}
  );