Widget SDK

This repository contains a JS SDK and helpful documentation for building widgets for Ada.

Widget Setup

Initialize the Widget SDK on your page by calling widgetSDK.init and registering all required callbacks.

widgetSDK.init({
    disableWidgetCallback: (event) => {},
    enableWidgetCallback: (event) => {},
    initializedWidgetCallback: (event) => {},
    sendUserDataCallback: (event) => {}
});

API

Widget SDK Methods

#init

Performs setup steps including registering callbacks and validating that the widget is not expired.

widgetSDK.init({
    disableWidgetCallback: (event) => {},
    enableWidgetCallback: (event) => {},
    initializedWidgetCallback: (event) => {},
    sendUserDataCallback: (event) => {}
});

#sendUserData

Used to submit user data from the Widget.

Note: User data can only be sent once.

widgetSDK.sendUserData({
    userSelectedData: "2019-01-01 12:00:00"
})

Widget SDK Callbacks

#disableWidgetCallback

Called when the Widget UI should be disabled (ex. When user data has been successfully submitted)

Event Properties:

• None

#sendUserDataCallback

Called when #sendUserData method resolves.

Events:

{
    type: "SEND_USER_DATA_SUCCESS"
}

{
    type: "SEND_USER_DATA_FAILED"
}

Widget SDK Properties

widgetSDK.metaData

Returns the "inputs data" configured on the Widget Block. These can be used by the Widget to modify its behavior. For example, a Date Picker Widget Block might configure a "default date" which the Widget could use to prefill itself with.

widgetSDK.metaData

{
    chatterToken: "123",
    defaultDate: "2019-01-01"
}

Development

Install dependencies with yarn install.

Start dev server with yarn start. This will start a development server that watches for changes and will automatically reload itself when it has detected changes.

We use the html-webpack-plugin webpack plugin to provide an html page that loadins the script for testing/development purposes. The template is src/index.ejs and will compile to dist/index.html.

Serving over HTTPS

Widgets are passed sensitive details to enable communication back to api. Therefore, HTTPS is enforced on all Widgets.

During development, we get around this requirement by using ngrok:

ngrok http localhost:8100 -hostname=date-picker.widget.ngrok.io --host-header=rewrite

Tests

We use Karma + Jasmine for running tests.

Run with: yarn test

Karma will launch a Chrome browser to execute tests in.

In the future we will target IE11 using browserstack

Deploying Widget JS SDK

Coming Soon