Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.connect.fastenhealth.com/llms.txt

Use this file to discover all available pages before exploring further.

This documentation is for Stitch.js (v4) SDK, which is now the recommended version for integrating Fasten Connect into your application. If you need access to the previous versions, please see v1 documentation or v3 documentation.This version includes compatibility with additional runtime environments (Web, React Native, React etc), improved performance, and additional features.v4 is backwards compatible with v3 — there are no breaking changes to the public API, but we have made significant improvements to the underlying codebase and architecture. If you are currently using v3, you can upgrade to v4 without making any changes to your code.The v1 Web Component and v3 Web Component are in maintenance mode and will no longer receive updates (outside of security fixes). Please update your code to use the new version.
Beta 
import { FastenStitchElement } from '@fastenhealth/fasten-stitch-element-react';

export function ConnectRecords() {
  return (
    <FastenStitchElement
      publicId="public_test_..."
      externalId="user_12345"
      onEventBus={(event) => {
        const payload = JSON.parse(event.data);
        console.log('Fasten event', payload);
      }}
    />
  );
}
​
publicId
string
required
This must be your API public ID. You can find it in your Fasten Connect Portal.
​
externalId
string
(Optional) An opaque identifier used to identify the patient in your system. This value will be returned in the response.
​
reconnectOrgConnectionId
string
(Optional) Useful when the patient connection credentials are invalid due to expiration or revocation. Providing this reconnectOrgConnectionId allows Fasten to reauthenticate the patient and store their new credentials. Reconnect When provided, the Stitch component will skip the search step and go directly to the reauthentication step for the specified organization connection.
​
brandId
string
(Optional) Pre-select a specific brand.
​
portalId
string
(Optional) Pre-select a specific portal.
​
endpointId
string
(Optional) Pre-select a specific endpoint.
​
searchQuery
string
(Optional) Prepopulate the search box with a query.
​
searchSortBy
string
(Optional) Sort search results by a specific field.
​
searchSortByOpts
string
(Optional) JSON-encoded sort options for searchSortBy. The SDK automatically Base64URL-encodes this value before sending it to Stitch.
​
showSplash
boolean
(Optional) Show a splash page that introduces Fasten Connect and displays your privacy policy and terms to the patient before they begin the connection process. Defaults to false.
​
tefcaMode
boolean
(Optional) If set to true, the Stitch component will operate in TEFCA IAS mode, which is a streamlined experience designed to simplify medical record collection. In this mode, the patient will be able to verify their identity and pull medical records from healthcare institutions that participate in the TEFCA network, with minimal friction. See the TEFCA IAS documentation for more information on this experience and its benefits. Defaults to false.
​
eventTypes
string
(Optional) By default the following standard events are always emitted:
  • patient.connection_pending
  • patient.connection_success
  • patient.connection_failed
  • widget.complete
If you would like to receive optional events, set eventTypes to a comma-separated list of event types.
  • search.query: This event is emitted when the patient searches for a healthcare institution in the Fasten Connect catalog.
​
staticBackdrop
boolean
(Optional) If set to true, the modal will not close when the patient clicks outside of the dialog. Defaults to false.
​
buttonLabel
string
(Optional) Text for the default trigger button. Ignored when children is provided. Defaults to Share Records.
​
buttonClassName
string
(Optional) Custom class name for the trigger button. When supplied, the SDK does not apply default button styles unless you also pass buttonStyle.
​
buttonStyle
React.CSSProperties
(Optional) Custom inline styles for the trigger button.
​
dialogClassName
string
(Optional) Custom class name for the <dialog/> element. When supplied, the SDK does not apply default dialog styles unless you also pass dialogStyle.
​
dialogStyle
React.CSSProperties
(Optional) Custom inline styles for the <dialog/> element.
​
iframeClassName
string
(Optional) Custom class name for the <iframe/> element. When supplied, the SDK does not apply default iframe styles unless you also pass iframeStyle.
​
iframeStyle
React.CSSProperties
(Optional) Custom inline styles for the <iframe/> element.
​
children
React.ReactNode
(Optional) Custom trigger UI rendered instead of the default button.

​
Events

The Stitch React SDK emits client-side events through the onEventBus callback. The callback receives the raw browser MessageEvent sent by the embedded widget. 
onEventBus={(event) => {
  const payload = JSON.parse(event.data);
  console.log('Fasten event', payload);
}}
See the Events section of the documentation for more information on the events emitted by the Stitch SDK and their payloads.

​
Javascript API

Use FastenStitchElementHandle when you need to open or close the modal programmatically. 
import { useRef } from 'react';
import {
  FastenStitchElement,
  type FastenStitchElementHandle,
} from '@fastenhealth/fasten-stitch-element-react';

export function ConnectRecords() {
  const stitchRef = useRef<FastenStitchElementHandle>(null);

  return (
    <>
      <button type="button" onClick={() => stitchRef.current?.show()}>
        Open Stitch
      </button>

      <FastenStitchElement
        ref={stitchRef}
        publicId="public_test_..."
        buttonStyle={{ display: 'none' }}
      />
    </>
  );
}
​
show
() => void
Opens the connect modal and loads the embedded Stitch widget.
​
hide
() => void
Closes the connect modal and resets the iframe source.

​
Styling

The SDK includes default styles for the trigger button, modal dialog, iframe, focus states, hover states, and dialog backdrop. You can customize these with class name or inline style props. 
<FastenStitchElement
  publicId="public_test_..."
  buttonLabel="Connect health records"
  buttonClassName="connect-records-button"
  dialogStyle={{ maxWidth: 520 }}
  iframeStyle={{ minHeight: 720 }}
/>
The React SDK renders a trigger element, a native <dialog/>, and an <iframe/>. You can style the trigger, dialog, and iframe, but you will not be able to style content within the iframe.