Web Integration

The b.well composite web component can be integrated using a script tag.

Script

Add the following to your web page. The loader reads your client-key, automatically fetches the correct version, and defines the b.well composite web component — no version number required.

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

<bwell-composite client-key="YOUR_CLIENT_KEY"></bwell-composite>

📘 The client-key attribute is required

It tells the loader which environment's Client Hub to query for the correct version. Without it, the loader falls back to its build-time bundled version.

Because the loader resolves asynchronously, window.bwell is not available immediately after the script tag. Wait for it before calling bwell.init() :

<script>

  const ready = setInterval(() => {

    if (window.bwell) {

      clearInterval(ready);

      bwell.init({ clientKey: "YOUR_CLIENT_KEY" });

    }

  }, 50);

</script>

Usage

The composite can then be integrated into your web UI as a traditional HTML tag.

<bwell-composite client-key="YOUR_CLIENT_KEY"></bwell-composite>

Initialization

The embeddable is initialized in one step:

1. Initialize the app experience with the client key (<YOUR_CLIENT_KEY> in the code below). Think of this as a public SDK/API key.

async function onInit() {

  await bwell.init({ clientKey: "YOUR_CLIENT_KEY" })

}

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

);