You are looking at the documentation for an older version of the Stitch SDKStitch.js (v4) was recently released and is now the recommended version of the SDK.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.Older versions of the SDK are in maintenance mode and will no longer receive updates (outside of security fixes).
Please update your code to use the new version. Overview
Stitch v3 is a significant change from v1. This document aims to highlight the changes and the steps for migrating an existing project.
CSS and JS CDN
In v3, the CSS and JS files have been moved to a new path and the file names have changed.
The v1 CDN path was:
<link href="https://cdn.fastenhealth.com/connect/v1/fasten-stitch.css" rel="stylesheet">
<script src="https://cdn.fastenhealth.com/connect/v1/fasten-stitch.js"></script>
<link href="https://cdn.fastenhealth.com/connect/v3/fasten-stitch-element.css" rel="stylesheet">
<script src="https://cdn.fastenhealth.com/connect/v3/fasten-stitch-element.js" type="module"></script>
Component Name
The component name has changed from fasten-stitch (v1) to fasten-stitch-element (v3).
<fasten-stitch public-id="pub_live_123456324234234"></fasten-stitch>
<fasten-stitch-element public-id="pub_live_123456324234234"></fasten-stitch-element>
Component Options
The options for the component have changed.
Options Removed in v3:
This option is no longer supported. Fasten will generate and publish a unique state id for you.
This option is no longer supported. The fasten-stitch component requires popups for authentication.
Options Added in v3:
If set to true, the stitch component will only show the search box and will not prompt the patient to verify their email address.
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 Bus
Since connect-mode is no longer supported, Stitch now requires the use of an event bus to listen for events from the component.
The event bus has been renamed from orgConnectionCallback (v1) to eventBus (v3).
<script type="application/javascript">
const el = document.querySelector('fasten-stitch');
el.addEventListener('orgConnectionCallback', (event) => console.log(event.detail));
</script>
<script type="application/javascript">
const el = document.querySelector('fasten-stitch-element');
el.addEventListener('eventBus', (event) => console.log(JSON.parse(event.detail.data)));
</script>
