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.



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?) {

        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.settings.domStorageEnabled = true;

        webView.settings.javaScriptEnabled = true


    override fun onBackPressed() {
        if (webView.canGoBack())

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.


See our Flutter SDK guide for implementation details.


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.


This is the token generated by Metriport. Check the Quickstart guide for more details.



Set this flag to true to run the Widget in Sandbox mode. Check the Quickstart guide for more details.



You can update the color mode to be either light or dark.



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.

If you wish to add a hex code ensure that it is URL encoded ie. customColor=%23FF5733


After users successfully connect a provider, they can be redirected to a URL of your choosing.


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


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.



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.


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.