Wicket Platform

Install

Use the universal embed script to load the wicket.io widget platform:

<script type="text/javascript">
  window.Wicket=function(doc,tag,id,script){
    var w=window.Wicket||{};if(doc.getElementById(id))return w;var ref=doc.getElementsByTagName(tag)[0];var js=doc.createElement(tag);js.id=id;js.src=script;ref.parentNode.insertBefore(js,ref);w._q=[];w.ready=function(f){w._q.push(f)};return w
  }(document,"script","wicket-widgets","https://<tenant-admin-url>/dist/widgets.js");  
</script>

Note: Be sure to update the host to match your instance.

Usage

Once the embed script has been added to your page, use the javascript sdk to add widgets to you website.

Wicket.ready(function () {
  Wicket.widgets.createOnboarding({
    
  });
});

Note: All calls to the wicket sdk must be run inside the ready callback.

API

Table of Contents

widgets

createOnboarding

Creates wicket onboarding widget. This widget expects full control over the browser history

The current browser path must start with the value passed to the baseName option.

Parameters

Returns Promise<WidgetLoadResult> Widget loaded promise

createSubscriptionOnboarding

Creates wicket subscription onboarding widget. The widget will use the hash portion of the url for tracking the state / progress of the widget.

Parameters
Examples
Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.createSubscriptionOnboarding({
    apiRoot: tenantApiEndpoint,
    accessToken: token,
    personId: personId,
    lang: "en",
    billingProduct: {
      type: "fusebill_products",
      id: "d6a52028-9297-4970-832e-afbaa4579298"
    },
    fusebillPlanFrequencyId: "1234",
    rootEl: widgetRoot
  }).then(function (widget) {
    widget.listen(widget.eventTypes.STEP_CHANGED, function (payload) {
      console.log(`Step changed from ${payload.from} to ${payload.to}`);
    });

    widget.listenOnce(widget.eventTypes.COMPLETED, function (payload) {
      // completedSubscriptionId is a JSON API type / id which can be used with the wicket API
      var completedSubscriptionId = payload.completedSubscriptionId;
      window.location = "/account-centre/order-thank-you?subscription_id=" + completedSubscriptionId.id;

      // To render a thank you message client side, the widget can be fully cleared from the page by using:
      // widget.clear()
    });
  });
});

Returns Promise<WidgetLoadResult> Widget loaded promise

createOrderDetails

Creates order details widget

Parameters

Returns Promise<WidgetLoadResult> Widget loaded promise

createPersonProfile

Creates person profile details widget

Parameters
Examples
Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.createPersonProfile({
    loadIcons: true,
    accessToken: clientToken,
    apiRoot: apiRoot,
    personId: "abcd-1234-efgh-5678",
    lang: "en",
    extraFields: ["personType"]
  }).then(function (widget) {
     widget.listen(widget.eventTypes.WIDGET_LOADED, function (payload) {
      console.log('widget loaded:', payload);
    });
    widget.listen(widget.eventTypes.SAVE_SUCCESS, function (payload) {
      console.log("save success:", payload);
    });
    widget.listen(widget.eventTypes.DELETE_SUCCESS, function (payload) {
      console.log("delete success:", payload);
    });
  });
});
WIDGET_LOADED / SAVE_SUCCESS payload:
{
  resource: {
     id: "abc-1234",
     type: "people"
  },
  attributes: {
    uuid: "xyz-0987-abc-1234",
    givenName: "Jane"
    familyName: "Doe",
    ...attributes
  }, // on save, this object will pertain to the resource being saved
  addresses: [ // if the saved resource type is not "people",
     { // a `person` user object will exist with the entities below
       id: 'add-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'addresses'
     }
  ],
  emails: [
     {
       id: 'ema-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'emails'
     }
  ],
  phones: [
     {
       id: 'pho-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'phones'
     }
  ],
  webAddresses: [
     {
       id: 'web-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'web_addresses'
     }
  ],
  incompleteRequiredFields: [ "givenName" ], // array of required field keys with null values
  incompleteRequiredResources: [], // array of any missing required additional resources as specified in the `options.requiredResources`
  notFound: [ "missingKey" ] // array of required field keys that could not be located
}

DELETE_SUCCESS payload:
{
  deletedResource: {
    id: "qwerty-5678",
    type: "addresses"
  },
  resource: {
    id: "abc-1234",
    type: "people",
    attributes: { ...attributes }
  },
  incompleteRequiredResources: [] // array of any missing required additional resources as specified in the `options.requiredResources`
}

Returns Promise<WidgetLoadResult> Widget loaded promise

editOrganizationProfile

Creates organization profile details widget

Parameters
Examples
Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.editOrganizationProfile({
    loadIcons: false,
    apiRoot: apiRoot,
    accessToken: accessToken,
    orgId: "xyz-1234"
    lang: "en",
    hiddenFields: ["type"],
    extraFields: ["parentOrganization"]
  }).then(function (widget) {
     widget.listen(widget.eventTypes.WIDGET_LOADED, function (payload) {
      console.log('widget loaded:', payload);
    });
    widget.listen(widget.eventTypes.SAVE_SUCCESS, function (payload) {
      console.log("save success:", payload);
    });
    widget.listen(widget.eventTypes.DELETE_SUCCESS, function (payload) {
      console.log("delete success:", payload);
    });
  });
});

WIDGET_LOADED / SAVE_SUCCESS payload:
{
  resource: {
     id: "xyz-9876",
     type: "organizations"
  },
  attributes: {
    uuid: "xyz-0987-abc-1234",
    legalName: "Organization Name"
    alternateName: "Organization",
    ...attributes
  },
  addresses: [
     {
       id: 'add-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'addresses'
     }
  ],
  emails: [
     {
       id: 'ema-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'emails'
     }
  ],
  phones: [
     {
       id: 'pho-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'phones'
     }
  ],
  webAddresses: [
     {
       id: 'web-1234',
       attributes: { ...attributes },
       relationships: { ...relationships },
       type: 'web_addresses'
     }
  ],
  incompleteRequiredFields: [ "description" ], // array of required field keys with null values
  incompleteRequiredResources: [], // array of any missing required additional resources as specified in the `options.requiredResources`
  notFound: [ "missingKey" ] // array of required field keys that could not be located
}

DELETE_SUCCESS payload:
{
  deletedResource: {
    id: "qwerty-5678",
    type: "addresses"
  },
  resource: {
     id: "xyz-9876",
     type: "organizations",
     attributes: { ...attributes }
  },
  incompleteRequiredResources: [] // array of any missing required additional resources as specified in the `options.requiredResources`
}

Returns Promise<WidgetLoadResult> Widget loaded promise

editPersonPreferences

Creates person preferences widget

Parameters

Returns Promise<WidgetLoadResult> Widget loaded promise

editAdditionalInfo

Creates additional info details widget

Parameters
Examples
Wicket.ready(function () {
  var widgetRoot = document.getElementById('root');

  Wicket.widgets.editAdditionalInfo({
    loadIcons: false,
    apiRoot,
    accessToken: clientToken,
    resource: { type: "people", id: personContext.id },
    lang: "en",
    // If schemas are not provided, the widget default to show all schemas.
    schemas: [
       { slug: 'slug-for-json-schema' },
       { slug: 'slug-for-json-schema', resourceSlug: 'slug-for-json-schema-resource' },

       // Schema will be inferred when providing only the resource override
       { resourceSlug: 'slug-for-json-schema-resource', showAsRequired: true },

       // Legacy, initialize using id (different between environments)
       { id: "abc-1234", showAsRequired: true },
       { id: "xyz-7890", resourceId: "res-6789" }
    ]
  }).then(function (widget) {
     widget.listen(widget.eventTypes.WIDGET_LOADED, function (payload) {
      console.log('widget loaded:', payload);
    });
    widget.listen(widget.eventTypes.SAVE_SUCCESS, function (payload) {
      console.log(`Schema ID ${payload.resource.id} updated with values ${payload.updatedDataField.value}`);
    });
  });
});

WIDGET_LOADED payload:

{
  resource: {
     id: "abc-1234",
     type: "people"
  },
 dataFields: [ // array of data fields in widget with user data provided
     {
       $schema: "schemaIdOne",
       key: "schemaKeyOne",
       valid: true,
       value: {
         fieldOneKey: fieldOneValue,
         fieldTwoKey: fieldTwoValue
       },
       version: 1
     },
     {
       $schema: "schemaIdTwo",
       key: "schemaKeyTwo",
       valid: true,
       value: {
         fieldOneKey: fieldOneValue,
         fieldTwoKey: fieldTwoValue
       },
       version: 1
     }
  ],
  validation: [ // array of errors including incomplete required fields
     {
       id: "schemaIdTwo",
       key: "schemaKeyTwo"
       errors: [
         {
           message: "is a required property",
           params: { missingProperty: 'email' },
           property: ".email"
         },
         {
           message: "should be equal to one of the allowed values",
           params: { allowedValues: ['cat', 'dog'] },
           property: ".animal"
         }
       ]
     }
  ],
  invalid: [ // array of schema IDs failing validation on save
     { id: "schemaIdOne" }
  ],
  notFound: [ // array of requested schema IDs that have no data or could not be located
    { id: "schemaId404" }
  ]
}

SAVE_SUCCESS payload:

{
  resource: {
     id: "abc-1234",
     type: "people"
  },
  dataField: { // the updated data field
     $schema: "schemaIdOne",
     key: "schemaKey",
     valid: true,
     value: {
       fieldOneKey: fieldOneValue,
       fieldTwoKey: fieldTwoValue
     },
     version: 1
  },
  dataFields: [ ...dataFields ],
  validation: [ ...validation ],
  invalid: [ ...invalid ],
  notFound: [ ...notFound ]
}

Returns Promise<WidgetLoadResult> Widget loaded promiseCreates additional info widget.

WidgetLoadResult

Load result for widget.

Properties

JsonApiResourceId

JSON API Resource type / id

Properties