Embed Healthcare Appointment Scheduling Widget with the Amazon Chime SDK
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
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.
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.
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.
Audio, video and PSTN meetings
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.
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.
Phone call (Doctor)
Doctor makes a PSTN phone call by clicking “Make a phone call” button in the widget.
Phone call (Patient)
Patient received the call to join the meeting.
After checking into an appointment, doctors and patients participate in chat. The solution uses Amazon Chime SDK messaging to send and receive chat messages.
- 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
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
DistributionUrlfrom 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>
<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>
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:
> email@example.com destroy > cd backend && npm run destroy > firstname.lastname@example.org 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 bootstrapcommand to provision the CDKToolkit stack for storing templates and assets.
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.