This documentation is for Stitch.js (v3) SDK, which is now the recommended version for integrating Fasten Connect into your application. If you need access to the previous version, please see the v1 documentation.

This version includes a new API, compatibility with additional frontend frameworks (Next.js, React, Native, etc), improved performance, and additional features.

v3 also introduces a number of breaking changes. Please see v3/update-guide for more information.

The v1 Web Component is 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:

v1
<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>

The v3 CDN path is:

v3
<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).

v1
<fasten-stitch public-id="pub_live_123456324234234"></fasten-stitch>
v3
<fasten-stitch-element public-id="pub_live_123456324234234"></fasten-stitch-element>

​
Component Options

The options for the component have changed.

​
Options Removed in v3:

​
external-state
string
deprecated

This option is no longer supported. Fasten will generate and publish a unique state id for you.

​
connect-mode
string
deprecated

This option is no longer supported. The fasten-stitch component requires popups for authentication.

​
Options Added in v3:

​
search-only
boolean

If set to true, the stitch component will only show the search box and will not prompt the patient to verify their email address.

​
static-backdrop
boolean

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).

v1
<script type="application/javascript">
  const el = document.querySelector('fasten-stitch');
  el.addEventListener('orgConnectionCallback', (event) => console.log(event.detail));
</script>
v3
<script type="application/javascript">
    const el = document.querySelector('fasten-stitch-element');
    el.addEventListener('eventBus', (event) => console.log(JSON.parse(event.detail.data)));
</script>

See Event documentation for more information on the events that are emitted by the component.