Connect Widget
Overview
With Metriport, you get a pre-built Connect widget that you can easily plug into your app, so that your users can connect all of their data sources to your application! Here’s a preview:
How to Implement
You can use the references below for sample implementations on various platforms. Generally, you can either:
- use one of our supported SDKs to implement the Widget (required to integrate with Apple Health);
- or, link to the Connect Widget in web apps;
- or, use WebViews to implement the Widget on mobile platforms.
As per the Quickstart guide, you’ll need to generate a temporary token for each Connect Widget session.
Web
window.open(`https://connect.metriport.com/?token=${connectToken}`);
Not all of the data providers support an iframe
embedding, so we recommend to avoid using an
iframe
for the Connect Widget in your web app.
iOS (Swift)
See our Swift SDK guide for implementation details.
Our GitHub repo has an example implementation of this in an iOS app.
Android (Kotlin)
package com.example.metriport
import android.os.Bundle
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
webView.webViewClient = WebViewClient()
// For more information of how to create a token view link below
// https://docs.metriport.com/getting-started/connect-quickstart#4-link-to-the-metriport-connect-widget-in-your-app
val prodUrl = "https://connect.metriport.com/?token=demo"
// To use emulator locally make sure to use your IP
// val localhostUrl = "http://{LOCAL_IP}:3001/?token={YOUR_TOKEN}"
webView.loadUrl(prodUrl)
webView.settings.domStorageEnabled = true;
webView.settings.javaScriptEnabled = true
webView.settings.setSupportZoom(true)
}
override fun onBackPressed() {
if (webView.canGoBack())
webView.goBack()
else
super.onBackPressed()
}
}
Our GitHub repo has an example implementation of this in an Android app.
React Native
See our React Native SDK guide for implementation details.
Our GitHub repo has an example implementation of this in a React Native app.
Flutter
See our Flutter SDK guide for implementation details.
Cordova
See our Cordova SDK guide for implementation details.
Our GitHub repo has an example implementation of this in a Cordova app.
URL Parameters
Set url parameters to validate the current session of the widget and make certain customizations to fit your product needs.
token
This is the token generated by Metriport. Check the Quickstart guide for more details.
`https://connect.metriport.com/?token=${connectToken}`;
sandbox
Set this flag to true
to run the Widget in Sandbox mode. Check the Quickstart guide for more details.
`https://connect.metriport.com/?token=${connectToken}&sandbox=true`;
colorMode
You can update the color mode to be either light or dark
.
`https://connect.metriport.com/?token=${connectToken}&colorMode=dark`;
customColor
You can set your own color as the highlight color by adding a default color such as orange or add a hex code.
For a comprehensive list of available colors visit here.
`https://connect.metriport.com/?token=${connectToken}&customColor=orange`;
redirectUrl
After users successfully connect a provider, they can be redirected to a URL of your choosing.
`https://connect.metriport.com/?token=${connectToken}&redirectUrl=https%3A%2F%2Fmy-app.com%2Fgood-news`;
For optimal results, we advise that you encode your URLs before including them in query parameters. ie. redirectUrl=https%3A%2F%2Fmy-app.com%2Fgood-news
failRedirectUrl
After a failed attempt to connect a provider, your users can be redirected to another URL of your choosing. This is similar to redirectUrl above.
`https://connect.metriport.com/?token=${connectToken}&failRedirectUrl=https%3A%2F%2Fmy-app.com%2Fless-good-news`;
providers
You can choose the providers you wish to display to your users. It must be a comma separated lowercased list of providers. For a list of the available providers visit here.
`https://connect.metriport.com/?token=${connectToken}&providers=fitbit,oura,garmin`;
This defaults to all providers if no paramater is set. Once you set the provider parameter you will need to manually add providers or it will default to your last request.