Traversal Embed

This tutorial assumes you have a Client ID and Client Secret for the HealthHero Traversal API. View client authentication for more info.

Traversal Embed is the quickest way to drop a traversal client onto your webapp. We recommend building an authentication proxy into the backend of your website to authenticate with the traversal api, but for the purposes of this tutorial we will set up the client to call the traversal api directly with a bearer token.

Request a token

curl --request POST \
  --url 'https://<paste_Identity_Url_here>/connect/token' \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data grant_type=client_credentials \
  --data client_id=CLIENT_ID \
  --data client_secret=CLIENT_SECRET

You will recieve a body like this, store the access token for later.

{
  "access_token": "TOKEN",
  "expires_in": 3600,
  "token_type": "Bearer",
  "scope": "traversal.engine"
}

In your app on an HTML page, include traversal-embed.js in a <script> tag.

For the most recent version please check the UNPKG page

<script src="https://unpkg.com/@healthhero/traversal-embed@4.1.1/lib/traversal-embed.min.js"></script>

This will give you access to the traversal module.

Configure Traversal Embed

Add another <script> tag and create your config for the traversal client. Replace TOKEN (bearer token), CLIENT_ID (your client id) and ID (html element id) with your details.
See the full list of configuration options.

var token = "TOKEN";
var clientId = "CLIENT_ID";
var elementId = "ID";

var config = {
  elementId,
  urls: {
    engine: "https://<paste-Traversal-Url-here>/api/v1/" + clientId + "/",
  },
  tokenFactory: () => Promise.resolve(token),
};

The createTheme function is available via traversal.createTheme. You can use it to create a theme and add it to the config object.

var theme = traversal.createTheme({
    colors: {
        brand50: '#edecec',
        brand100: '#B8A34A',
        brand200: '#B8A34A',
        lightBlue100: '#ecad00'
    },
    typography: {
        fontFamily: "courier"
    },
    spacing: {
        vertical: 25
    }
});

var config = {
    ...
    theme,
    ...
};

Render a Traversal

Finally use traversal.get or traversal.create to embed the client.

Get Traversal

Get an existing traversal and render the client. Replace TRAVERSAL_ID with your desired Traversal Id.

var traversalId = "TRAVERSAL_ID";

traversal.get(config, traversalId);

Create Traversal

Create a Traversal and render the client. Replace the params with a product you have access to.

var params = {
  shortCode: "XYZ",
};

traversal.create(config, params);

Congratulations, you embedded a Traversal Client!