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.
Once the embed script has been added to your page, use the javascript sdk to add widgets to you website.
.ready(function () {
Wicket.widgets.createOnboarding({
Wicket
;
}); })
Note: All calls to the wicket sdk must be run inside the ready callback.
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.
options
Object
Onboarding widget options.
options.rootEl
HTMLElement
Container element to render the widget into.options.accessToken
String
Wicket API access token for the current user.options.baseName
String
The current base path for the onboarding url eg. /member/onboardingoptions.orderCompletePath
String
Path the widget will redirect to once an order is completed. The
order_success
query parameter containing the order uuid
will be added to the url. (optional, default /
)options.lang
String
Locale for the widget. (optional, default en
)options.apiRoot
String
Root url for the Wicket API. (optional, default /api
)Returns Promise<WidgetLoadResult> Widget loaded promise
Creates wicket subscription onboarding widget. The widget will use the hash portion of the url for tracking the state / progress of the widget.
options
Object
widget options.
options.rootEl
HTMLElement
Container element to render the widget into.options.accessToken
String
Wicket API access token for the current user.options.personId
String
Person uuid who is placing the new subscription orderoptions.billingProduct
JsonApiResourceId Billing product
the wicket api which this subscription should be placed for.options.fusebillPlanFrequencyId
String
Plan frequency id which should be used when placing the subscription
with fusebilloptions.lang
String
Locale for the widget. (optional, default en
)options.apiRoot
String
Root url for the Wicket API. (optional, default /api
).ready(function () {
Wicketvar widgetRoot = document.getElementById('root');
.widgets.createSubscriptionOnboarding({
WicketapiRoot: tenantApiEndpoint,
accessToken: token,
personId: personId,
lang: "en",
billingProduct: {
type: "fusebill_products",
id: "d6a52028-9297-4970-832e-afbaa4579298"
,
}fusebillPlanFrequencyId: "1234",
rootEl: widgetRoot
.then(function (widget) {
}).listen(widget.eventTypes.STEP_CHANGED, function (payload) {
widgetconsole.log(`Step changed from ${payload.from} to ${payload.to}`);
;
})
.listenOnce(widget.eventTypes.COMPLETED, function (payload) {
widget// 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
Creates order details widget
options
Object
Order details widget options.
options.rootEl
HTMLElement
Container element to render the widget into.options.accessToken
String
Wicket API access token for the current user.options.orderId
String
Order uuid for the order widget.options.lang
String
Locale for the widget. (optional, default en
)options.apiRoot
String
Root url for the Wicket API. (optional, default /api
)Returns Promise<WidgetLoadResult> Widget loaded promise
Creates person profile details widget
options
Object
Profile widget options.
options.rootEl
HTMLElement
Container element to render the widget into.options.accessToken
String
Wicket API access token for the current user.options.personId
String
Person uuid for the profile widget.options.lang
String
Locale for the widget. (optional, default en
)options.apiRoot
String
Root url for the Wicket API. (optional, default /api
)options.extraFields
Array
Array of hidden-by-default profile field names (strings) to be shown in
viewoptions.requiredResources
Object
Specify which additional related resources are required and of what
type. Available related resources by key: addresses
,
emails
, phones
&
webAddresses
. Value can be a string or an array, provide a
string for a single required type or an array of types if requires
multiple values
(e.g. { addresses: "work", phones: ["mobile", "work"] }
).ready(function () {
Wicketvar widgetRoot = document.getElementById('root');
.widgets.createPersonProfile({
WicketloadIcons: true,
accessToken: clientToken,
apiRoot: apiRoot,
personId: "abcd-1234-efgh-5678",
lang: "en",
extraFields: ["personType"]
.then(function (widget) {
}).listen(widget.eventTypes.WIDGET_LOADED, function (payload) {
widgetconsole.log('widget loaded:', payload);
;
}).listen(widget.eventTypes.SAVE_SUCCESS, function (payload) {
widgetconsole.log("save success:", payload);
;
}).listen(widget.eventTypes.DELETE_SUCCESS, function (payload) {
widgetconsole.log("delete success:", payload);
;
});
});
})/ SAVE_SUCCESS payload:
WIDGET_LOADED
{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
Creates organization profile details widget
options
Object
Profile widget options.
options.rootEl
HTMLElement
Container element to render the widget into.options.accessToken
String
Wicket API access token for the current user.options.orgId
String
Organization uuid for the profile widget.options.lang
String
Locale for the widget. (optional, default en
)options.apiRoot
String
Root url for the Wicket API. (optional, default /api
)options.hiddenFields
Array
Array of default profile field names (strings) to be hidden from
viewoptions.extraFields
Array
Array of hidden-by-default profile field names (strings) to be shown in
viewoptions.requiredResources
Object
Specify which additional related resources are required and of what
type. Available related resources by key: addresses
,
emails
, phones
&
webAddresses
. Value can be a string or an array, provide a
string for a single required type or an array of types if requires
multiple values
(e.g. { addresses: "work", phones: ["mobile", "work"] }
).ready(function () {
Wicketvar widgetRoot = document.getElementById('root');
.widgets.editOrganizationProfile({
WicketloadIcons: false,
apiRoot: apiRoot,
accessToken: accessToken,
orgId: "xyz-1234"
lang: "en",
hiddenFields: ["type"],
extraFields: ["parentOrganization"]
.then(function (widget) {
}).listen(widget.eventTypes.WIDGET_LOADED, function (payload) {
widgetconsole.log('widget loaded:', payload);
;
}).listen(widget.eventTypes.SAVE_SUCCESS, function (payload) {
widgetconsole.log("save success:", payload);
;
}).listen(widget.eventTypes.DELETE_SUCCESS, function (payload) {
widgetconsole.log("delete success:", payload);
;
});
});
})
/ SAVE_SUCCESS payload:
WIDGET_LOADED
{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
Creates person preferences widget
options
Object
Profile widget options.
options.rootEl
HTMLElement
Container element to render the widget into.options.accessToken
String
Wicket API access token for the current user.options.personId
String
Person uuid for the profile widget.options.lang
String
Locale for the widget. (optional, default en
)options.apiRoot
String
Root url for the Wicket API. (optional, default /api
)options.hideCommunicationPreferences
Boolean
Hides Communication Preferences when set to true (optional, default
false
)options.hideLanguagePreferences
Boolean
Hides Language Preferences when set to true (optional, default
false
)options.hideSectionTitle
Boolean
Hides the default “Communications” title when set to true (optional,
default false
)Returns Promise<WidgetLoadResult> Widget loaded promise
Creates additional info details widget
options
Object
Additional info widget options.
options.rootEl
HTMLElement
Container element to render the widget into.options.accessToken
String
Wicket API access token for the current user.options.resource
Object
Resource object with the structure
{ type: "people", id: "uuid" }
. The resource
type
is the plural form of the word, ex:
“organizations”.options.lang
String
Locale for the widget. (optional, default en
)options.apiRoot
String
Root url for the Wicket API. (optional, default /api
)options.schemas
Array?
Array of objects with the structure
{ id: "schemaId", resourceId: "jsonSchemaResourceId", showAsRequired: true }
.
Specifies which schemas will be shown in widget. The existence of
theshowAsRequired
key will display this schema as requiring
user input. Query the API endpoint to find a schema ID:
/json_schemas?filter[slug_in][]=national_conference&fields[json_schemas]=id
Query the following endpoint with the appropriate resource type to find
a resource ID:
/json_schema_resources?filter[resource_type_eq][]=Person
.ready(function () {
Wicketvar widgetRoot = document.getElementById('root');
.widgets.editAdditionalInfo({
WicketloadIcons: false,
,
apiRootaccessToken: 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) {
}).listen(widget.eventTypes.WIDGET_LOADED, function (payload) {
widgetconsole.log('widget loaded:', payload);
;
}).listen(widget.eventTypes.SAVE_SUCCESS, function (payload) {
widgetconsole.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.
Load result for widget.
renderPromise
Promise
Promise that resolves when the widget is rendered to the page.clear
function
Function that will clean up and remove the widget from the page.JSON API Resource type / id