React Integration
const ImportRecords = () => {
const urlParams = new URLSearchParams(window.location.search);
const accessToken = urlParams.get('token') || urlParams.get('accessToken') || '';
const redirectUrl = urlParams.get('redirect-url');
const iframeRef = useRef(null) as React.MutableRefObject<HTMLIFrameElement | null>;
// Build the iframe URL with only required parameters
const buildIframeUrl = () => {
const params = new URLSearchParams();
if (accessToken) params.set('token', accessToken);
if (redirectUrl) params.set('redirect-url', redirectUrl);
return ${VITE_MATCHRITE_PATIENT_APP}/import?${params.toString()};
};
const dynamicCustomizeUI = {
'import-container': {
styles: {
backgroundColor: '#234e5c',
borderRadius: '4px',
},
},
'import-section': {
'import-autocomplete': {
label: 'Connect with Care Organization',
placeholder: 'Connect with Care Organization...',
styles: {
backgroundColor: 'white',
borderRadius: '4px',
},
},
'import-button': {
label: 'Import',
styles: {
backgroundColor: '#176571',
color: 'white',
padding: '10px 20px',
borderRadius: '8px',
},
},
'import-tooltip': {
html: `Find and select a provider organization or facility that may hold an Electronic Health Record (EHR) related to your medical history.
<br />
<b>NOTE:
You'll need login credentials for each provider's portal
<br />`,
},
},
'import-dialog': {
label: 'Connect Patient Import Record',
cancelBtn: {
label: 'Cancel',
styles: {
backgroundColor: '#ccc',
color: '#000',
},
},
confirmBtn: {
label: 'Proceed',
},
},
}
// Send message after iframe loads
useEffect(() => {
const iframe = iframeRef.current;
if (!iframe) return;
const onLoad = () => {
iframe?.contentWindow?.postMessage(
{ type: 'updateCustomization', config: dynamicCustomizeUI },
'*',
);
};
iframe.addEventListener('load', onLoad);
return () => iframe.removeEventListener('load', onLoad);
}, []);
return (
<iframe
ref={iframeRef}
src={buildIframeUrl()}
className="import-iframe"
allow="fullscreen; geolocation; microphone; camera"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation-by-user-activation"
title="Import Records"
style={{
width: '100%',
height: '100vh',
border: 'none',
}}
/>
);
};
React Native Integration
import React, { useRef, useEffect } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
const matchriteimporturl = 'https://patient.dev.matchritepatient.com/import';
const ImportRecords = ({ route }) => {
const webViewRef = useRef(null);
const { token, redirectUrl } = route.params || {};
const buildIframeUrl = () => {
const params = new URLSearchParams();
if (token) params.set('token', token);
if (redirectUrl) params.set('redirect-url', redirectUrl);
return ${matchriteimporturl}?${params.toString()};
};
const dynamicCustomizeUI = {
'import-container': {
styles: {
backgroundColor: '#234e5c',
borderRadius: '4px',
},
},
'import-section': {
'import-autocomplete': {
label: 'Connect with Care Organization',
placeholder: 'Connect with Care Organization...',
styles: {
backgroundColor: 'white',
borderRadius: '4px',
},
},
'import-button': {
label: 'Import',
styles: {
backgroundColor: '#176571',
color: 'white',
padding: '10px 20px',
borderRadius: '8px',
},
},
'import-tooltip': {
html: `Find and select a provider organization or facility that may hold an Electronic Health Record (EHR) related to your medical history.
<br />
<b>NOTE:
You'll need login credentials for each provider's portal
<br />`,
},
},
'import-dialog': {
label: 'Connect Patient Import Record',
cancelBtn: {
label: 'Cancel',
styles: {
backgroundColor: '#ccc',
color: '#000',
},
},
confirmBtn: {
label: 'Proceed',
},
},
}
const onWebViewLoad = () => {
const postMessagePayload = JSON.stringify({
type: 'updateCustomization',
config: dynamicCustomizeUI,
});
// Wait until the WebView is loaded before sending
webViewRef.current?.injectJavaScript(`
window.postMessage(${JSON.stringify(postMessagePayload)}, '*');
true;
`);
};
return (
<View style={{ flex: 1 }}>
<WebView
ref={webViewRef}
source={{ uri: buildIframeUrl() }}
onLoadEnd={onWebViewLoad}
originWhitelist={['*']}
javaScriptEnabled
domStorageEnabled
startInLoadingState
allowsFullscreenVideo
injectedJavaScriptBeforeContentLoaded={window.isReactNativeWebView = true;}
style={{ flex: 1 }}
/>
</View>
);
};
export default ImportRecords;
Flutter Integration
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class ImportRecords extends StatefulWidget {
final String accessToken;
final String? redirectUrl;
const ImportRecords({
Key? key,
required this.accessToken,
this.redirectUrl,
}) : super(key: key);
@override
State<ImportRecords> createState() => _ImportRecordsState();
}
class _ImportRecordsState extends State<ImportRecords> {
late final WebViewController _controller;
String buildIframeUrl() {
final uri = Uri.parse(matchriteImportUrl);
final params = <String, String>{
if (widget.accessToken.isNotEmpty) 'token': widget.accessToken,
if (widget.redirectUrl != null) 'redirect-url': widget.redirectUrl!,
};
return Uri(
scheme: uri.scheme,
host: uri.host,
path: uri.path,
queryParameters: params,
).toString();
}
final Map<String, dynamic> dynamicCustomizeUI = {
'import-container': {
styles: {
backgroundColor: '#234e5c',
borderRadius: '4px',
},
},
'import-section': {
'import-autocomplete': {
label: 'Connect with Care Organization',
placeholder: 'Connect with Care Organization...',
styles: {
backgroundColor: 'white',
borderRadius: '4px',
},
},
'import-button': {
label: 'Import',
styles: {
backgroundColor: '#176571',
color: 'white',
padding: '10px 20px',
borderRadius: '8px',
},
},
'import-tooltip': {
html: `Find and select a provider organization or facility that may hold an Electronic Health Record (EHR) related to your medical history.
<br />
<b>NOTE:
You'll need login credentials for each provider's portal
<br />`,
},
},
'import-dialog': {
label: 'Connect Patient Import Record',
cancelBtn: {
label: 'Cancel',
styles: {
backgroundColor: '#ccc',
color: '#000',
},
},
confirmBtn: {
label: 'Proceed',
},
},
}
@override
void initState() {
super.initState();
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.parse(buildIframeUrl()))
..setNavigationDelegate(NavigationDelegate(
onPageFinished: (url) {
// Inject the customization script
final message = jsonEncode({
'type': 'updateCustomization',
'config': dynamicCustomizeUI,
});
final script = 'window.postMessage($message, "*");';
_controller.runJavaScript(script);
},
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Import Records'),
),
body: WebViewWidget(controller: _controller),
);
}
}