Flexpa Link
Use Link to help your users connect health plan data to your app
Adding Flexpa Link to your app lets your users authorize access to their health plan data. Your app can then use the Flexpa API to retrieve patient health plan and clinical data.
Flexpa Link will handle the SMART on FHIR authentication flow and error handling for each health data source that we support. Flexpa Link works across all modern browsers.
To use Flexpa Link you will need:
- A frontend app to start the authentication flow with a user. Flexpa Link runs in an
<iframe> and can be added to your frontend with a <script> tag.
- A backend web server to complete the authentication flow (complete the next section).
- A pair of API Keys. Contact us for live access.
To try Flexpa Link, see the Demo.
Authentication flow
The diagram below shows how Flexpa Link is used to obtain a public_token, which is exchanged for a patient access_token, which is finally used with the Flexpa API.
The flow starts when your user wants to link their plan data to your app.
Your frontend application opens Flexpa Link with your publishable_key using the create() and open() functions in the install step below.
In the onSuccess callback you will receive a public_token.
You must exchange the public_token (along with your secret_key) for a functioning access_token.
This step happens on your backend server.
Use the access_token to make requests to Flexpa API to access the user's health plan data.
Install
You can add Flexpa Link to your application within a couple of minutes.
Inside an HTML document add the Flexpa Link script like so to create a global FlexpaLink object in your application:
<head>
...
<script src="https://js.flexpa.com/v1/"></script>
</head>
Create
Next, we need to initialize FlexpaLink by calling create. Use the publishable_key_test or publishable_key_live key provided by us:
FlexpaLink.create({
publishableKey: '...',
onSuccess: (publicToken) => {
console.log('publicToken: ', publicToken)
}
});
Customize
You can quickly and easily customize FlexpaLink to match your company's brand aesthetic. Link currently supports four themes: red, green, blue, and yellow. You can see a preview of those four themes below.
You can pass FlexpaLink.create({...}) the customLinkConfig key to set the color theme. customLinkConfig is a JSON object that contains a brandColor key with the value of "red", "green", "blue", or "yellow".
FlexpaLink.create({
publishableKey: '...',
customLinkConfig: { brandColor: 'blue' },
onSuccess: (publicToken) => {
console.log('publicToken: ', publicToken)
}
});
Omitting the customLinkConfig key, or giving it an unspecified key, will keep the "default" Flexpa theme applied.
Open
To start the authentication flow where your users will link their health data, you'll need to use the open() function on the FlexpaLink object. For example, opening on a button click:
<button onclick="FlexpaLink.open()">Link your health data</button>
Exchange public token for access token
See extended documentation for the exchange step in the Flexpa API docs
Extended docs →
When a user successfully links a health data source, FlexpaLink will call the onSuccess callback you defined in the create step. This callback receives a public_token. For security reasons, this public_token cannot be used to access the Flexpa API directly. Instead, it must be exchanged for an access_token.
To exchange a public_token for an access_token send an HTTP POST request to https://api.flexpa.com/link/exchange with a Content-Type: application/json header and a JSON body containing the public_token and your secret_key API key.
cURL example:
curl -X POST https://api.flexpa.com/link/exchange \
-H 'Content-Type: application/json' \
-d '{
"public_token": "public_token_950fae5f-7903-4ce1-9414-9b44c4e55263",
"secret_key": "<your-secret-key>""
}'
That's it! You now have an access_token to make requests to Flexpa API.
Next steps