Web to Mobile Handoff 📲

Web to Mobile - Handoff

Overview

Many users encounter difficulties in enabling their webcams on desktop browsers, leading to a frustrating experience during the scanning process. Additionally, most laptop and desktop webcams struggle with low light settings and card movement, further impacting the success rate of scans.

To address these challenges, we have introduced the "Handoff" feature in our React widget. This feature allows users to seamlessly switch to their mobile devices to complete the scanning process when faced with difficulties or failures on the desktop.

Handoff

The Handoff feature is designed to be triggered under specific conditions such as setup failure, camera failure, or after two unsuccessful scanning attempts. When activated, the feature generates a magic link and displays a QR code that users can scan with their mobile devices to continue the process.

A standalone endpoint is responsible for validating the magic link and providing the user with the necessary instructions on their mobile device. Once the scanning is successfully completed on the mobile device, the user is instructed to return to the desktop browser. The desktop widget then updates automatically to reflect the success and returns the results locally.

Note: Handoff works seamlessly with our Eligibility and Payer Match features.

Configuration

To enable and configure the Handoff feature in your React widget, use the webToMobileHandoffConfig prop:

<CardScanView 
  sessionToken={token}
  onSuccess={cardScanSuccess}
  onCancel={cardScanCancel}
  onError={cardScanError}
  webToMobileHandoffConfig={{
    enabled: true,
    companyName: "HealthHaven",
    modalTitle: "Scanning Failed",
    modalText: "Please scan this QR Code to continue scanning on your mobile phone.\nReturn here once successful to continue.",
    buttonText: "Try again"
  }}
/>

• enabled: Set to true to enable the Handoff feature.

• companyName: (Optional) Specify the name of your company to be displayed to the patient during the handoff process.

• modalTitle: (Optional) Provide a custom title for the modal displayed during the handoff process. Defaults to "Scanning Failed".

• modalText: (Optional) Provide custom text for the modal body. This text guides the user on what to do next. Defaults to "Please scan this QR Code to continue scanning on your mobile phone.\nReturn here once successful to continue.".

• buttonText: (Optional) Provide custom text for the button displayed in the modal. Defaults to "Try again".

QR Code and URL

The QR code displayed to the user will be comprised of a URL that looks like https://capture.cardscan.ai/?token=<short-lived-token>. This site guides the user through the scanning process and, once completed, instructs the user to continue on their desktop.

Self-hosting

Alternative the urlBase prop can be used to generate a QR code that will direct the user to the provided URL, allowing for a customized scanning experience on your own domain.

webToMobileHandoffConfig={{
  enabled: true,
  urlBase: "https://capture.yourURL.com",
}}

• enabled: Set to true to enable the Handoff feature.

• urlBase: (Optional) Specify the base URL to direct the user to a page on your mobile-friendly web app or a standalone site for the scanning process. This allows for complete customization of the landing page and keeps the user within your company's domains.

Developer Responsibilities

When opting for self-hosting, the developer is responsible for the following:

1. Providing Instructions to the Mobile User: The landing page should guide the user through the scanning process on their mobile device.

2. Exchanging the Short-lived Token for a JWT: The mobile app or web page should handle the exchange of the short-lived token provided in the QR code for a JWT (JSON Web Token) to authenticate the scanning session. Below are the steps to implement this process:

   1. The React component will generate a magic link token and send it to the specified urlBase as a query parameter.

   2. When the app hosted at urlBase loads, it should call the validation endpoint, which will return an access token (JWT) upon successful validation.

   3. Once the JWT is obtained from the validation endpoint, pass it to the React component to initiate the scanning session.

3. Loading the CardScanView with the Token: The mobile app or web page should load the CardScanView component with the obtained JWT to initiate the scanning process.

4. Instructing the User to Return to the Desktop: Upon successful completion of the scanning process on the mobile device, the user should be instructed to return to their desktop browser to continue their journey or view the results.

Demo

To provide a clearer understanding of the Handoff feature in action, we have created a video demo that showcases the seamless transition from desktop to mobile scanning.

Handoff Demo