​

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.

​

Web

window.open(`https://connect.metriport.com/?token=${connectToken}`);

​

iOS (Swift)

See our Swift SDK guide for implementation details.

​

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()
    }
}

​

React Native

See our React Native SDK guide for implementation details.

​

Flutter

See our Flutter SDK guide for implementation details.

​

Cordova

See our Cordova SDK guide for implementation details.

​

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`;

​

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`;