Web Integration

The composite web component can be integrated via either script tag or npm module

Script

If using the script tag, you’ll need to add the below to your web page. This will pull in the required scripts and define the b.well composite web component.

<script src="https://embeddables.prod.icanbwell.com/composite/<VERSION_NUMBER>/loader/index.js"></script>

Module

Alternatively, if you use NPM, the b.well composite can be added to your project with the following command.

npm install @icanbwell/composite@<VERSION_NUMBER>

Once that’s done, make sure to do a direct import of the module somewhere within your application.

import '@icanbwell/composite';

Usage

In both cases above, replace <VERSION_NUMBER> with the desired version number. The composite can then be integrated into your web UI as a traditional HTML tag.

<bwell-composite />

Initialization

The embeddable is initialized in two steps:

1. Initialize the app experience with the client key (<CLIENT_KEY> in the code below). Think of this as a public SDK/API key.
2. Initialize the user context with the user token (<USER_TOKEN> in the code below).

async function onInit() {
  await bwell.init(<CLIENT_KEY>)
  const userInfo = await bwell.setUserToken(<USER_TOKEN>)
}

Updating Document Title

The b.well composite introduces a global bwell object off of the window. Via this global object, events can be subscribed and unsubscribed. One of these events is pagetransition and can be used to update your web application’s document title to best reflect the current screen being shown within the embeddable. An example of such an approach can be seen below.

bwell.on(
  'pagetransition',
  (pageInfo) => (document.title = pageInfo.pageTitle || ''),
);