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

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

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

1{
2  "access_token": "TOKEN",
3  "expires_in": 3600,
4  "token_type": "Bearer",
5  "scope": "traversal.engine"
6}

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

1<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.

1var token = "TOKEN";
2var clientId = "CLIENT_ID";
3var elementId = "ID";
4
5var config = {
6  elementId,
7  urls: {
8    engine: "https://<paste-Traversal-Url-here>/api/v1/" + clientId + "/",
9  },
10  tokenFactory: () => Promise.resolve(token),
11};

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

1var theme = traversal.createTheme({
2    colors: {
3        brand50: '#edecec',
4        brand100: '#B8A34A',
5        brand200: '#B8A34A',
6        lightBlue100: '#ecad00'
7    },
8    typography: {
9        fontFamily: "courier"
10    },
11    spacing: {
12        vertical: 25
13    }
14});
15
16var config = {
17    ...
18    theme,
19    ...
20};

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.

1var traversalId = "TRAVERSAL_ID";
2
3traversal.get(config, traversalId);

Create Traversal

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

1var params = {
2  shortCode: "XYZ",
3};
4
5traversal.create(config, params);

Congratulations, you embedded a Traversal Client!