Embed Healthcare Appointment Scheduling Widget with the Amazon Chime SDK

Overview

This post provides steps to deploy a complete telehealth experience powered by the Amazon Chime SDK, including audio, video, chat messaging, and appointment reminders sent via SMS. The backend is fully serverless and fully customizable. The frontend is a widget that allows you to embed the experience in any webpage with a single embeddable JS file and a CSS file. It includes a clinician view that doctors can review upcoming appointments, check-in, and initiate phone and video visits. It also consists of a patient portal to view appointments and join doctor-initiated videos and phone calls. You can deploy it into a clinician portal or an EHR system. The widget also embeds a patient portal into any customer-facing web page.

While this sample application covers telehealth visits, it can be customized to fit any use cases where scheduled meetings are required.

Introduction to the Amazon Chime SDK telehealth widget demo

The Amazon Chime SDK telehealth widget demo demonstrates various communication capabilities provided by Amazon Chime SDK. It showcases patient-doctor use cases with the following user scenarios:

Sign in/Sign up
Create and update appointment
Process audio/video calls
Traditional phone calls
Chat-based communication

User scenarios

Sign in/Sign up

A doctor and a patient sign up and sign in to the widget. The solution uses Amazon Cognito for authentication, but this sample application could be modified to support other identity providers. The authentication is built using the pre-built AWS Amplify UI library components.

Telehealth widget authentication flow

Appointment

If you have created an account for a doctor, you will see that you can make an appointment with a patient after you sign in. On the patient side, they can view upcoming appointments.

Telehealth widget appointment scheduling flow

Check-in and SMS notification

A doctor and a patient can view current and upcoming appointments. At the appointment, an SMS message is sent via Amazon Pinpoint reminding users to check in to their appointment. Once checked in, users can chat and join their meetings.

Telehealth widget appointment check-in and SMS reminder notification flow

Audio, video and PSTN meetings

A doctor initiates an audio-video or a PSTN meeting once they check-in for an appointment with a patient. The solution uses Amazon Chime SDK React Component Library, Amazon Chime SDK for JavaScript for audio-video WebRTC-based calling, and Amazon Chime SDK PSTN audio service for PSTN outbound calling.

Audio video meeting (Doctor)

Doctor initiates the WebRTC based audio-video meeting. Upon joining, doctor can mute, un-mute, start stop video in the meeting.

Telehealth widget WebRTC audio video meeting doctor view

Audio video meeting (Patient)

Patient receives an invite to join the meeting. Upon joining, patient can mute, un-mute, start stop video in the meeting.

telehealth-widget-audip-video-meeting-patient

Telehealth widget WebRTC audio video meeting patient view

Phone call (Doctor)

Doctor makes a PSTN phone call by clicking “Make a phone call” button in the widget.

Telehealth widget PSTN audio meeting doctor view

Phone call (Patient)

Patient received the call to join the meeting.

Telehealth widget patient receiving PSTN audio meeting phone call

Chat

After checking into an appointment, doctors and patients participate in chat. The solution uses Amazon Chime SDK messaging to send and receive chat messages.

Telehealth widget doctor patient chat view

Solution architecture

Solution architecture diagram

The widget is bundled into a single JavaScript and CSS file for simple embedding into your website. These files can embed into any HTML document.

Prerequisites

Create an AWS account
Install Node.js version 14 or higher on the deployment machine.
Create AWS credentials with sufficient rights to deploy the AWS CloudFormation stack. For more information, check AWS CLI, AWS Account and User and Node.js sections under AWS CDK workshop prerequisites.
Bootstrap the AWS account for AWS CDK. For more information, see Install the AWS CDK and Bootstrapping section under Getting started with the AWS CDK.

Deploy the demo

Deploy the AWS serverless resources.

git clone https://github.com/aws-samples/amazon-chime-sdk.git
cd amazon-chime-sdk/apps/telehealth-widget
npm run deploy

These commands will deploy the serverless backend resources, and widget assets, such as JavaScript and CSS files to Amazon CloudFront. These assets will be linked in your website to embed the widget.

Note: Deploying the stack may incur charges to your AWS account.

Run the demo

Ensure that you have deployed the AmazonChimeSdkTelehealthWidgetDemo stack.
Keep the CloudFront DistributionUrl from the AmazonChimeSdkTelehealthWidgetDemo deployment output handy. You will use this in the following step.

Now link the widget assets in your website to embed the widget once your website loads in a browser.

Step 1: Embed the CSS for the widget from CloudFront.

<head>
    ...
    <!-- Embed the CSS for Widget from CloudFront -->
    <link href="https://<Cloudfront-DistributionUrl>/index.css" rel="stylesheet" />
</head>

Step 2: Embed the JavaScript for the widget from CloudFront.

<body>
    <!-- Embed the JS script for Widget from CloudFront -->
    <script src="https://<Cloudfront-DistributionUrl>/index.js"></script>
</body>

Step 3: Load the widget in your website.

<body>
    ...
    <script>
        window.initAmazonChimeSDKWidget();
    </script>
</body>

Clean up

Use the following steps to delete resources.

cd ~/telehealth-widget
npm run destroy

Following logs will be printed to terminal, please input ‘y’ when prompted to confirm deletion:

> chime-sdk-telehealth-widget-demo@1.0.0 destroy
> cd backend && npm run destroy


> chime-sdk-telehealth-widget--backend-demo@1.0.0 destroy
> cdk destroy

Are you sure you want to delete: AmazonChimeSdkTelehealthWidgetDemo (y/n)? y
AmazonChimeSdkTelehealthWidgetDemo: destroying...
✅ AmazonChimeSdkTelehealthWidgetDemo: destroyed

If there is any issue deleting the stack through the command line, run the following to delete it from the AWS management console:

Open the AWS CloudFormation console.
Delete the AmazonChimeSdkTelehealthWidgetDemo stack.
Delete the CDKToolkit stack if you do not use it for other CDK stacks. The deployment command runs the cdk bootstrap command to provision the CDKToolkit stack for storing templates and assets.

Conclusion

Embeddable widgets allow doctors and patients to connect through an authenticated chat, audio-video, and PTSN-enabled services. Medical practitioners can use this solution to connect with patients through various channels and in many different doctor-patient use cases.

Next steps

Checkout telehealth-widget Amazon Chime SDK sample to learn more and file any issues at the Amazon Chime SDK samples repository.

Business Productivity