- Getting Started
- Connect Widget
Getting Started
Connect Widget
Overview of the configurations and implementation details for the Metriport 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.