Skip to main content
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.
<fasten-stitch-element
    public-id="public_test_123456324234234"
    external-id="user_12345"
>
</fasten-stitch-element>

<script type="application/javascript">
    const el = document.querySelector('fasten-stitch-element');
    el.addEventListener('eventBus', (event) => console.log(event.detail));
</script>
​
public-id
string
required
This must be your API public ID. You can find it in your Fasten Connect Portal.
​
reconnect-org-connection-id
string
(Optional) Useful when the patient connection credentials are invalid (due to expiration or revocation). Providing this reconnect-org-connection-id 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.
​
external-id
string
(Optional) An Opaque identifier, used to identify the patient in your system. This value will be returned in the response.
​
search-only
boolean
(Optional) If set to true, the stitch component will only show the search box and will not prompt the patient to verify their email address.
​
search-query
string
(Optional) Prepopulate the search box with a query.
​
show-splash
boolean
(Optional) Show a splash page introduces Fasten Connect and displays your privacy policy & terms to the patient before they begin the connection process.
​
static-backdrop
boolean
(Optional) If set to true, the stitch component will not close when the user clicks outside of the modal. This is useful for cases where you want to keep the modal open until the user explicitly closes it.
​
event-types
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 the optional events listed below, you must set the event-types parameter 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.
​
tefca-mode
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.

​
Events

The Stitch Web Component emits Javascript events that can be listened to in your frontend code. The events are emitted on the fasten-stitch-element DOM element, and can be listened to using the addEventListener method. 
    const el = document.querySelector('fasten-stitch-element');
    el.addEventListener('eventBus', (event) => console.log(event.detail));
See the Events section of the documentation for more information on the events emitted by the Stitch SDK and their payloads.

​
Javascript API

The stitch Web Component has a Javascript API that can be used to manipulate the modal popup.

​
Methods

​
show()

Shows the modal popup. 
  window.addEventListener('DOMContentLoaded',function () {
    //show the modal using the element selector.
    document.querySelector('fasten-stitch-element').show();
  });

​
hide()

Hide the modal popup. 
  window.addEventListener('DOMContentLoaded',function () {
    ...

    //hide the modal using the element selector.
    document.querySelector('fasten-stitch-element').hide();
  });

​
Styling

Styling the stitch Web Component button is possible using CSS. You can target the component using the 'fasten-stitch-element' tag and select internal elements to apply custom styles. 
  <style>
    fasten-stitch-element > button {
      background-color: green !important
    }
  </style>
The !important flag may be required to override the default styles.
The fasten-stitch-element is made up of a button, modal and iframe. As such, you can target the button and modal elements to apply custom styles, but you will not be able to style any content within the iframe.

​
Customizing Button Text

You can customize the text displayed on the “Share Records” button by adding your desired text between the opening and closing <fasten-stitch-element> tags. For example: 
<fasten-stitch-element
    public-id="public_test_123456324234234"
    external-id="user_12345"
>
    Connect My Health Records
</fasten-stitch-element>
In this example, the button will display the text “Connect My Health Records”. Replace the text with any message that fits your use case.
Avoid using overly long text or HTML tags, as this may affect the button’s appearance and functionality.
If no text is provided, the default button text will be used.