Metriport home pagelight logo
  1. Getting Started
  2. 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 simply link to the Connect Widget in web apps, and 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)

import SwiftUI
import Foundation
import WebKit

@main
struct Metriport_mobileApp: App {
    // Return the scene.
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State private var showWebView = false
    
    // var localWebView = MetriportWidget(url: URL(string: "http://localhost:3001/?token={YOUR_TOKEN}")!)
    // 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
    var webView = MetriportWidget(url: URL(string: "https://connect.metriport.com/?token=demo")!)
    
    var body: some View {
        VStack {
          webView
          HStack {
            Button(action: {
              self.webView.goBack()
            }){
              Image(systemName: "arrowtriangle.left.fill")
                                .font(.title)
                                .foregroundColor(.blue)
                                .padding()
            }
            Spacer()
            Button(action: {
              self.webView.refresh()
            }){
              Image(systemName: "arrow.clockwise.circle.fill")
                    .font(.title)
                    .foregroundColor(.blue)
                    .padding()
            }
            Spacer()
            Button(action: {
              self.webView.goForward()
            }){
              Image(systemName: "arrowtriangle.right.fill")
                    .font(.title)
                    .foregroundColor(.blue)
                    .padding()
            }
          }
        }
      }
}

struct MetriportWidget: UIViewRepresentable {
    
    var url: URL
    private var webView: WKWebView?
    
    public init(url: URL) {
        self.webView = WKWebView()
        self.url = url
    }
    
    public func makeUIView(context: Context) -> WKWebView {
        return webView!
    }

    public func updateUIView(_ webView: WKWebView, context: Context) {
       let request = URLRequest(url: url)
       webView.load(request)
    }
    
    public func goBack(){
        webView?.goBack()
    }

    public func goForward(){
        webView?.goForward()
    }
    
    public func refresh() {
        webView?.reload()
    }
}

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

import React, { useState } from "react";
import { Modal, StyleSheet, Text, Pressable, View } from "react-native";
import { WebView } from "react-native-webview";

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.centeredView}>
      <Modal
        animationType='slide'
        presentationStyle='formSheet'
        visible={modalVisible}
      >
        <Pressable
          style={{ backgroundColor: "#748df0", height: 40, alignItems: "center", justifyContent: 'center' }}
          onPress={() => setModalVisible(false)}
        >
          <Text style={styles.textStyle}>CLOSE</Text>
        </Pressable>
        <WebView
          source={{ uri: "https://connect.metriport.com/?token=demo" }}
        />
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Metriport Widget</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#748df0"
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default App;

Our GitHub repo has an example implementation of this in a React Native 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`;

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

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