1. Getting Started
  2. Connect Widget


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.



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

struct Metriport_mobileApp: App {
    // Return the scene.
    var body: some Scene {
        WindowGroup {

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 {
          HStack {
            Button(action: {
              Image(systemName: "arrowtriangle.left.fill")
            Button(action: {
              Image(systemName: "arrow.clockwise.circle.fill")
            Button(action: {
              Image(systemName: "arrowtriangle.right.fill")

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)
    public func goBack(){

    public func goForward(){
    public func refresh() {

Our GitHub repo has an example implementation of this in an iOS app.

Android (Kotlin)

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}>
          style={{ backgroundColor: "#748df0", height: 40, alignItems: "center", justifyContent: 'center' }}
          onPress={() => setModalVisible(false)}
          <Text style={styles.textStyle}>CLOSE</Text>
          source={{ uri: "https://connect.metriport.com/?token=demo" }}
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
        <Text style={styles.textStyle}>Show Metriport Widget</Text>

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.


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


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.