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

# Upgrade Guide

> \<fasten-stitch-element\> is a custom element that injects our healthcare institution selector.

<Warning>
  You are looking at the documentation for an older version of the Stitch SDK

  [Stitch.js (v4)](/stitch/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.
</Warning>

## 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:

```html v1 theme={null}
<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:

```html v3 theme={null}
<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).

```html v1 theme={null}
<fasten-stitch public-id="pub_live_123456324234234"></fasten-stitch>
```

```html v3 theme={null}
<fasten-stitch-element public-id="pub_live_123456324234234"></fasten-stitch-element>
```

### Component Options

The options for the component have changed.

#### Options Removed in v3:

<ParamField path="external-state" type="string" deprecated>
  This option is no longer supported. Fasten will generate and publish a unique state id for you.
</ParamField>

<ParamField path="connect-mode" type="string" deprecated>
  This option is no longer supported. The fasten-stitch component requires popups for authentication.
</ParamField>

#### Options Added in v3:

<ParamField path="search-only" type="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.
</ParamField>

<ParamField path="static-backdrop" type="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.
</ParamField>

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

```html v1 theme={null}
<script type="application/javascript">
  const el = document.querySelector('fasten-stitch');
  el.addEventListener('orgConnectionCallback', (event) => console.log(event.detail));
</script>
```

```html v3 theme={null}
<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](/stitch/v3/webcomponent#events) documentation for more information on the events that are emitted by the component.