Build an appointment scheduler interface integrated with Meta using Amazon Lex and Amazon Connect

by
Amazon AWS

This blog post is co-written with Nick Vargas and Anna Schreiber from Accenture.

Scheduling customer appointments is often a manual and labor-intensive process. You can utilize advances in self-service technology to automate appointment scheduling.

In this blog post, we show you how to build a self-service appointment scheduling solution built with Amazon Lex and Amazon Connect. This solution allows users to create appointments via Meta Messenger, and receive appointment confirmations through an SMS mobile message. It also provides a web-based dashboard so you can provide call to users with single-click button at the scheduled time.

Amazon Lex integrates with Meta messenger and can be used to enable chat conversations. Lex is a fully-managed artificial intelligence (AI) service with Natural language understanding (NLU) to design, build, test, and deploy conversational interfaces in applications.

Solution overview

The architecture diagram below shows a high-level overview of the interaction between different AWS components and services. The solution consists of these primary components: customer interaction using Meta messenger, appointment scheduling via SMS enabled by Lex and a customer outbound dialer from Connect. This outbound dialer makes it easy to create an outbound call to the customer from a simple UI interface.

This post uses the following sample bot conversation:

User: I would like to book an appointment.
Agent: What appointment can I get you? You can say Billing, General or Offers.
User: Billing
Agent: What’s your first name?
User: Sameer
Agent: What is your phone number with country code?
User: +10001234567
Agent: When should I schedule your Billing appointment?
User: Next week Tuesday
Agent: At what time should I schedule the Billing appointment?
User: 9:00 am
Agent: Sameer, 09:00 is available, should I go ahead and book your appointment?
User: Yes
Agent: Thanks Sameer, your appointment is confirmed for 09:00, and we have texted the details to your phone number.

For the scheduler and customer notification component, an AWS Lambda handler is used to process the scheduling request. The appointment information is then saved to a Amazon DynamoDB database. When the information is saved successfully, a notification is sent to the customer confirming the appointment details via SMS using Amazon Pinpoint.

A React.js application is created to display the saved customer appointments from the database in a calendar view format. This makes it easy for employees to identify the customers who need to be called. A call button from the calendar entry is clicked to initiate the call. This will immediately place an outbound call request to connect the customer with the employee using Amazon Connect.

Prerequisites

For this project, you should have the following prerequisites:

  • Downloaded the code files from the GitHub repository.
    The repository contains:

    • The React app files, located under the UI
    • The Amazon Connect Contact Flows, located under backend/connect/contact_flows There are four contact flows for this demo with files names AgentWhisper, CustomerWaiting, InboundCall and OutboundCall.
    • A zip file for an Amazon Lex Bot, located in backend/lex directory with file name AppointmentSchedulerBot.zip.
  • npm installed on your local machine. Refer how to install node.js and npm on your machine,

The deployment of this solution is automated where possible using CloudFormation, however, some configurations and steps in the deployment are manual.

Deploy the solution

To set up the required infrastructure for the appointment scheduler demo app in your AWS account, complete the following steps:

  1. Sign in to the AWS Management Console.
  2. Choose Launch Stack:
    Launch Stack
  3. On the Create Stack page, under Specify template, choose Upload a template file.
  4. Choose the AppointmentsSchedulerCFTemplate file that you downloaded from GitHub.
  5. Choose Next.
  6. For Stack name, enter a unique name for the stack, such as AppointmentSchedulerDemo.
    Lanuch CloudFormaiton stack
  7. Choose Next, and then choose Next on the Configure stack options page.
  8. On the Review page, select I acknowledge that AWS CloudFormation might create IAM resources and choose Create.
    The stack generates the following resources:
    • The DynamoDB table AppointmentSchedulerTable
    • The Amazon Pinpoint app AppointmentSchedulerPinpointApp
    • Two AWS Identity and Access Management (IAM) policies:
      • AppointmentSchedulerPinpointPolicy
      • AppointmentSchedulerDynamoApiPolicy
    • Two IAM roles:
      • AppointmentsLambdaRole
      • OutboundContactLambdaRole
    • Two Lambda functions:
      • AppointmentScheduler
      • AppointmentSchedulerOutboundContact
    • The Amazon API Gateway instance Appointments
    • Amazon CloudFront distribution
    • The Amazon Simple Storage Service (Amazon S3) bucket appointment-scheduler-website

Configure the Amazon Pinpoint app

To configure the Amazon Pinpoint app, complete the following steps:

  1. Go to the Pinpoint console.
  2. Navigate to the AppointmentSchedulerPinpointApp deployed in above.
  3. On the left menu under Settings click SMS and Voice.
  4. Under Number settings click Request Phone Number.
  5. Select your country of origin, choose Toll-free, and click Next, then Request.

The Amazon Lex bot for this post has one intent, MakeAppointment, which asks the user the series of questions in the preceding example to elicit the appointment type, date, time, name, and phone number of the customer.

AppointmentTypeValue is the only custom slot type for this bot and takes one of three values: Billing, General, or Offers. The Name, Phone, Date, and Time slots each use the built-in slot type provided by Amazon Lex.

Deploy the Amazon Lex bot

To deploy the bot, first import the Amazon Lex bot (AppointmentSchedulerLex.zip) into your account.

  1. Sign in to the Amazon Lex V2 console.
  2. If this is your first time using Amazon Lex, you will be shown the Welcome page, choose Create Bot.
  3. When presented with the Create your bot page, scroll down to the bottom of the page, and select Cancel. If this is not your first-time using Amazon Lex, skip this step.
  4. Choose Actions, then Import.
  5. Enter AppointmentSchedulerBot for the bot’s name then choose the .zip archive to import.
  6. Under IAM permissions, choose Create a role with basic Amazon Lex permissions.
  7. Under COPPA, choose No.
  8. Click Import.
  9. Open the bot by clicking on the bot’s name.
  10. Under Deployment on the left menu, click Aliases, select TestBotAlias and click English (US) under Languages. Choose the AppointmentScheduler Lambda function and click Save.
  11. Under Bot Versions on the left menu, select Intents and at the bottom right-hand side of the page, click Build.
  12. [Optional] Once the build has completed, click Test to test the bot using the window that appears on the right (click on the microphone icon to speak to your bot or type in the text box).

Set up an Amazon Connect Instance

To set up your Amazon Connect instance and contact flows, you complete the following steps:

  1. Set up an Amazon Connect instance.
    1. Go to the Amazon Connect console.
    2. If this is the first time you have been to the Amazon Connect console, you will see the Welcome page, choose Get Started.
    3. If this is not the first time you are using Amazon Connect, click Add an instance.
    4. For Identity management, select Store users in Amazon Connect.
    5. For Access URL, type a unique name for your instance, for example, AppointmentSchedulerDemo, then choose Next.
    6. On the Add administrator page, add a new administrator account for Amazon Connect. Use this account to log in to your instance later using the unique access URL. Click Next step.
    7. On the next two pages – Telephony Options and Data storage – accept the default settings and choose Next step.
    8. On the Review and Create page, choose Create instance.
  2. Add the Amazon Lex bots to your newly created Amazon Connect instance.
    1. Select the Instance Alias of the instance you just created.
    2. Choose Contact flows.
    3. Under Amazon Lex, use the drop-down to select the AppointmentSchedulerBot and the default alias.
    4. Choose + Add Amazon Lex Bot. If the name of your bot does not appear in the list, reload the page.
  3. Log in to the instance and claim a phone number
    1. Click on the Login URL for your Connect Instance.
    2. Enter the Administrator credentials you entered upon creation of the instance. This will open the Connect Console.
    3. From the Dashboard, under Explore your channels of communication select View phone numbers on the right.
    4. Click Claim a number.
    5. Choose a Country and leave the default type of DID (Direct Inward Dialing), choose a Phone Number from the dropdown list, and click Next.
    6. Click Save.
  4. Add the OutboundQueue
    1. From the navigation menu on the left, choose Queues from the Routing menu.
    2. Click Add New Queue.
    3. Name the Queue OutboundQueue, use the dropdown to set the Hours of operation to Basic Hours and use the dropdown for Outbound caller ID number to select the phone number you claimed earlier.
    4. Click Add new queue.
    5. From the navigation menu on the left, choose Routing Profiles from the Users menu.
    6. Click Basic Routing Profile. Under Routing profile queues, add OutboundQueue and click Save.
  5. Add the phone number to BasicQueue
    1. From the navigation menu on the left, choose Queues from the Routing menu.
    2. Click on BasicQueue.
    3. In the Outbound caller ID number field, add the phone number that you claimed earlier.
    4. Click Save on the top right corner.
  6. Import the InboundCall contact flow
    1. From the navigation menu on the left, choose Contact Flows from the Routing menu.
    2. Choose Create contact flow.
    3. On the right-hand side of the page, click on the down arrow and click Import flow (beta).
    4. Find the InboundCall file and choose Import.
    5. Click Publish.
  7. Then, associate this flow with the phone number.
    1. From the navigation menu on the left, choose Phone Numbers from the Routing menu.
    2. Choose the phone number we created earlier.
    3. Under the Contact flow/IVR section, select the InboundCall flow.
    4. Click Save.
  8. Import the AgentWhisper, CustomerWaiting, and OutboundCall contact flows
    1. From the left navigation menu, choose Contact Flows under Routing.
    2. Click Create Agent Whisper flow.
    3. On the right-hand side of the page, click on the down arrow and click Import flow (beta).
    4. Find the AgentWhisper file and choose Import.
    5. Click Publish.
    6. Navigate back to the Contact Flows list and click the down arrow next to Create contact flow.
    7. Click Create Customer Queue Flow.
    8. On the right-hand side of the page, click on the down arrow and click Import flow (beta).
    9. Find the  CustomerWaiting file and choose Import.
    10. Click Publish.
    11. Navigate back to the Contact Flows list and click the down arrow next to Create contact flow.
    12. Choose Create contact flow.
    13. On the right-hand side of the page, click on the down arrow and click Import flow (beta).
    14. Find the OutboundCall file from the GitHub repository you downloaded earlier and choose Import.
    15. Click Publish.

Edit Lambda Functions:

  1. Go to the Lambda console.
  2. Click on the AppointmentScheduler function.
  3. Click on Configuration and Environment Variables from the left menu.
  4. Click Edit. Replace the Value with your Pinpoint Project ID and Toll-free number. Click Save.
  5. Return to the Lambda console and click on the AppointmentSchedulerOutboundContact function.
  6. Repeat step 3 and 4, replacing the values for CONTACT_FLOW, INSTANCE_ID and QUEUE_ID with the correct values. Click Save once done.
    1. To find the contact flow ID, navigate to the OutboundCall Contact Flow in the Amazon Connect Console and click on the arrow next to Show additional flow information. The contact flow ID is the last value after contact-flow/.
    2. To find the instance ID, navigate to the Amazon Connect Console and click on your instance Alias. The instance ID is the last value in the Instance ARN after instance/.
    3. To find the queue ID, navigate to the OutboundQueue in the Amazon Connect Console and click on the arrow next to Show additional queue information. The contact flow ID is the last value after queue/.

The Lex Bots and Amazon Connect Instance are now ready to go. Next, we will deploy the UI.

Edit API Gateway route:

  1. Go to the API Gateway console
  2. Click the instance named Appointments
  3. Under the resources section, click the POST method belonging to the /outcall resource.
  4. Click Integration Request.
  5. Then click the edit icon next to the right of the Lambda Function field. Then click the checkmark icon that have appeared to the right of the text field.
  6. Click OK to add a permission to the Lambda function.

Deploy the UI:

  1. Configure the UI before deployment
    1. In your preferred code editor, open the ui folder from the downloaded code files.
    2. Replace <your-api-ID> and <region> with your API ID (accessible under the ID column of the API Gateway Console) and the region of your deployed resources in the following lines: 103, 168, 310, 397, 438, 453.
    3. Replace <your-instance-name> with your Amazon Connect instance name on line 172 and 402.
    4. [Optional] add an app logo in the index.js file, line 331:

      In the index.html file, line 5:
    5. In a terminal, navigate to the ui folder of the downloaded project.
    6. Run npm install. This will take a few minutes to complete.
    7. Run npm run-script build. This will generate a build folder in the ui directory.
  2. Add the code files to the S3 bucket:
    1. Go to the S3 Console.
    2. Search for the bucket deployed with the CloudFormation Stack, appointment-scheduler-website-<random_id>.
    3. Drag and drop the contents of the build folder in the ui directory created in the last step into the bucket.
    4. Click Upload.

      You should now be able to access the application from the CloudFront Distribution.
  3. Add the CloudFront Distribution as an approved origin.
      1. Go to the Amazon Connect console.
      2. Select the Instance Alias of the instance to which to add the bot.
      3. Choose Approved origins.
      4. Click + Add origin and enter the URL of your CloudFront Distribution.
      5. Click Add.
  4. Now navigate to your CloudFront Distribution URL plus index.html. (e.g., https:// <DistributionDomainName>.cloudfront.net/index.html)

Clean up

One finished with this solution, make sure to clean up your AWS environment as to not incur unwanted charges.

  1. Go to the S3 console, empty your bucket created by the CloudFormation template (appointment-scheduler-website).
  2. Go to the CloudFormation console, delete your stack. Ensure that all resources associated with this stack were deleted successfully.
  3. Go to the Amazon Connect console, delete your instance.
  4. Go to the Amazon Lex console, delete the bot you created.

Conclusion

For this blog, Accenture and AWS collaborated to develop a machine learning solution that highlights the use of AWS services to build an automated appointment scheduler. This solution demonstrates how easy it is to build an appointment scheduling solution in AWS. Amazon Lex’s ability to support third-party messaging services such as Meta messenger extends the potential reach of the solution across multiple channels. Customer notification via SMS is implemented with minimal effort using Amazon Pinpoint. With Amazon Connect, an outbound dialer is seamlessly integrated with the calendar view web application enabling employees to immediately connect to customers with a simple click-to-call button.

You can accelerate innovation with the Accenture AWS Business Group (AABG). You can learn from the resources, technical expertise, and industry knowledge of two leading innovators, helping you accelerate the pace of innovation to deliver disruptive products and services. The AABG helps customers ideate and innovate cloud solutions for customers through rapid prototype development. Connect with our team a accentureaws@amazon.com to learn and accelerate how to use machine learning in your products and services.

About the Authors

Sameer Goel is a Sr. Solutions Architect in the Netherlands, who drives customer success by building prototypes on cutting-edge initiatives. Prior to joining AWS, Sameer graduated with a master’s degree from Boston, with a concentration in data science. He enjoys building and experimenting with AI/ML projects on Raspberry Pi.

Nick Vargas is a Manager and Technology Architect at Accenture. He leads the project delivery for a rapid prototyping team within the Accenture AWS Business Group (AABG). He enjoys his morning walks with his dog Bingo, traveling, going to the beach, and hiking.

Anna Schreiber is part of a prototyping team within Accenture’s AWS Business Group (AABG). As a Senior AWS Developer, she has worked on several high-profile proof of concepts that help bring the client’s vision to life. When not working, she enjoys cooking, crafting, and playing fetch with her corgi Gimli.

Read More