### Install and Use Fasten Stitch.js (v3) Web Component Source: https://docs.connect.fastenhealth.com/stitch/v3/quickstart This snippet demonstrates how to install the Fasten Stitch.js (v3) SDK by including the necessary CSS and JavaScript files from a CDN. It shows how to use the custom `` with a public ID and how to listen for events emitted by the component. ```html

``` -------------------------------- ### Listen to v1 Event Bus Callback Source: https://docs.connect.fastenhealth.com/stitch/v3/update-guide Example of listening to the 'orgConnectionCallback' event from a fasten-stitch component in v1 using JavaScript. This demonstrates how to attach an event listener to the component. ```javascript ``` -------------------------------- ### Listen to v3 Event Bus Source: https://docs.connect.fastenhealth.com/stitch/v3/update-guide Example of listening to the 'eventBus' event from a fasten-stitch-element component in v3 using JavaScript. This shows how to parse the event detail data, which is expected to be JSON. ```javascript ``` -------------------------------- ### Fasten Stitch Component Options (v3) Source: https://docs.connect.fastenhealth.com/stitch/v3/update-guide Details new component options available in Fasten Stitch.js v3. These options allow for more control over the component's behavior, such as search-only mode and static backdrop. ```v3 Component Options (v3): search-only: Type: boolean Description: 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: Type: boolean Description: 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. ``` -------------------------------- ### Fasten Stitch Component Options Removed in v3 Source: https://docs.connect.fastenhealth.com/stitch/v3/update-guide Lists component options that were deprecated and removed in Fasten Stitch.js v3. These options, like 'external-state' and 'connect-mode', are no longer supported. ```v3 Options Removed in v3: external-state: Type: string Status: deprecated Description: This option is no longer supported. Fasten will generate and publish a unique state id for you. connect-mode: Type: string Status: deprecated Description: This option is no longer supported. The fasten-stitch component requires popups for authentication. ``` -------------------------------- ### Fasten Stitch.js CDN Paths (v1 vs v3) Source: https://docs.connect.fastenhealth.com/stitch/v3/update-guide Compares the CDN paths for CSS and JavaScript files between Fasten Stitch.js v1 and v3. Version 3 uses a new path and file names for its assets. ```v1 ``` ```v3 ``` -------------------------------- ### Fasten Stitch Component Name (v1 vs v3) Source: https://docs.connect.fastenhealth.com/stitch/v3/update-guide Illustrates the change in the custom element's tag name from v1 to v3. The component is now named 'fasten-stitch-element' in version 3. ```v1 ``` ```v3 ``` -------------------------------- ### Integrate Fasten Stitch Web Component Source: https://docs.connect.fastenhealth.com/stitch/v3/introduction Demonstrates how to include the Fasten Stitch web component in an HTML page. It shows how to link CSS and JavaScript files and how to initialize the component with a public ID and listen for events. ```html

``` -------------------------------- ### Integrate Fasten Stitch Web Component Source: https://docs.connect.fastenhealth.com/stitch/v3/index Demonstrates how to include the Fasten Stitch web component in an HTML page. It shows how to link CSS and JavaScript files and how to initialize the component with a public ID and listen for events. ```html

``` -------------------------------- ### Stitch Web Component Integration and Event Handling Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent This snippet demonstrates how to embed the Fasten Stitch Web Component into an HTML page and listen for custom events emitted by it. It requires the `fasten-stitch-element` to be present in the DOM and uses JavaScript event listeners to capture data from the component, such as connection status or search queries. ```HTML ``` ```JavaScript const el = document.querySelector('fasten-stitch-element'); el.addEventListener('eventBus', (event) => console.log(event.detail)); ``` -------------------------------- ### Javascript API: Modal Control Methods Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent Provides methods to programmatically control the Fasten Stitch Web Component modal. The 'show()' method displays the modal, while the 'hide()' method closes it. These methods are typically called after the DOM is loaded. ```Javascript window.addEventListener('DOMContentLoaded',function () { //show the modal using the element selector. document.querySelector('fasten-stitch-element').show(); }); ``` ```Javascript window.addEventListener('DOMContentLoaded',function () { //hide the modal using the element selector. document.querySelector('fasten-stitch-element').hide(); }); ``` -------------------------------- ### Fasten Stitch Web Component Attributes Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent Configuration options for the Fasten Stitch Web Component, controlling its behavior and appearance. These attributes are set directly on the `` tag. ```APIDOC fasten-stitch-element: Attributes: public-id: string (required) - Description: Your API public ID. Found in your Fasten Connect Portal. reconnect-org-connection-id: string (optional) - Description: Useful when patient connection credentials are invalid (expired or revoked). Allows Fasten to reauthenticate the Patient and store their new credentials. external-id: string (optional) - Description: An opaque identifier used to identify the patient in your system. This value will be returned in the response. search-only: boolean (optional) - Description: 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 (optional) - Description: If set to `true`, the stitch component will not close when the user clicks outside of the modal. Useful for keeping the modal open until explicitly closed. event-types: string (optional) - Description: By default, standard events (`patient.connection_pending`, `patient.connection_success`, `patient.connection_failed`, `widget.complete`) are always emitted. To receive optional events like `search.query`, set this parameter to a comma-separated list of event types. ``` -------------------------------- ### search.query Event Payload Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent This opt-in event is emitted when a patient searches for a healthcare institution in the Fasten Connect catalog. It requires the 'search.query' event-type parameter to be set on the stitch Web Component. The payload includes the search query, timestamp, filters, and an external ID. ```JSON { "api_mode": "live", "event_type": "search.query", "data": { "query": "search term", "timestamp": 1674123456, "filter": { "locations": ["CA"] }, "external_id": "" } } ``` -------------------------------- ### Stitch Web Component Event Listener Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent Demonstrates how to attach a JavaScript event listener to the Stitch Web Component to capture various events emitted during the patient connection process. The `eventBus` listener captures all custom events dispatched by the component. ```JavaScript const el = document.querySelector('fasten-stitch-element'); el.addEventListener('eventBus', (event) => console.log(event.detail)); ``` -------------------------------- ### Patient Connection Success Event Payload Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent This event signifies that a patient has successfully connected to a single health system. It contains details such as the organization connection ID, endpoint ID, brand ID, portal ID, connection status (e.g., 'authorized', 'rejected'), platform type, and a request ID for correlation. It is recommended to listen for the 'widget.complete' event for a consolidated view of all successful connections. ```json { "api_mode": "live", "event_type": "patient.connection_success", "data": { "org_connection_id": "", "endpoint_id": "", "brand_id": "", "portal_id": "", "connection_status": "", "platform_type": "", "request_id": "" } } ``` -------------------------------- ### patient.connection_failed Event Payload and Parameters Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent This event is emitted when a patient fails to connect to their health system. It includes details about the connection attempt, error type, and error description. The 'data' object contains specific parameters like endpoint_id, brand_id, portal_id, connection_status, platform_type, request_id, error, error_description, and error_uri. ```JSON { "api_mode": "live", "event_type": "patient.connection_failed", "data": { "endpoint_id": "", "brand_id": "", "portal_id": "", "connection_status": "", "platform_type": "", "request_id": "", "error": "invalid_request", "error_description": "The request is missing a required parameter", "error_uri": "" } } ``` ```APIDOC Parameters: endpoint_id (string, required): Unique identifier for the endpoint. brand_id (string, required): Unique identifier for the Brand. portal_id (string, required): Unique identifier for the Portal. connection_status (string): Status of the connection (e.g., 'authorized', 'rejected'). platform_type (string): Identifier for the EHR type. request_id (string, required): Unique ID for the error request, useful for debugging. error (string, required): Short string representing the error (e.g., 'invalid_request', 'fasten_server_error'). error_description (string, required): Sentence describing the error circumstance. error_uri (string): Optional URL to EHR API documentation for more info. ``` -------------------------------- ### Styling the Stitch Web Component Button Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent This snippet demonstrates how to apply custom CSS styles to the fasten-stitch-element button. It shows targeting the component's button element and using `!important` to override default styles. ```css fasten-stitch-element > button { background-color: green !important } ``` -------------------------------- ### widget.complete Event Payload Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent This event is emitted when the patient has successfully connected to all healthcare institutions and the modal has closed. The 'data' field is an array of objects, each detailing a successful connection to a specific institution. ```JSON { "api_mode": "live", "event_type": "widget.complete", "data": [ { "org_connection_id": "", "endpoint_id": "", "brand_id": "", "portal_id": "", "connection_status": "", "platform_type": "", "request_id": "" } ] } ``` -------------------------------- ### Patient Connection Pending Event Payload Source: https://docs.connect.fastenhealth.com/stitch/v3/webcomponent This event is emitted when a patient has initiated the connection process and the associated popup window has closed. The payload includes identifiers for the public ID, brand, portal, and endpoint, along with optional fields for organization connection ID, external ID, and external state, which are populated during a reconnect operation. ```json { "api_mode": "live", "event_type": "patient.connection_pending", "data": { "public_id": "", "brand_id": "", "portal_id": "", "endpoint_id": "", //only populated when reconnect_org_connection is present "org_connection_id": "", "external_id": "", "external_state": "" } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.