Facebook chatbot appointment function (beta)

2018.04.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Facebook Chatbot - book an appointment

Imagine if we can book appointments with your dentist / doctor using a chatbot. Implementing a chatbot to interact with patients/clients, can help to improve customer experience with the business and reduce the amount of human interaction to book an appointments. Clinics and organizations would have more time to offer in person help to patients and customer and helps administrators to  manage their tasks more efficiently.

We have created a demo page with embedded facebook messenger chatbot using Amazon Lex and other AWS services.

Say "Hi" (AWS Lex utterance) to our bot here https://demo.classmethod.ca/fbchatcss.html

In this post, I will briefly go through the setup of the facebook messenger chatbot.

Architecture

 

Lambda function

Using the Amazon Lex blueprint, lex-make-appointment-python, we can schedule appointment to meet with Classmethod Canada staffs using Facebook Messenger. Our Facebook Messenger has implemented Lex chatbot that can provide general information about our company and our services using utterance that utilized natural language understanding (NLU) technology.

We use the blueprint to create an appointment and upload the appointment information to dynamoDB table with the addition of function updateDB().

<code>
ts = str(time.time())

def updateDB(appointment_time, date, appointment_type, userId):
    dynamodb = boto3.resource('dynamodb', region_name='us-east-1')
    dynamoTable = dynamodb.Table('<span style="color: #ff0000;">TABLENAME</span>')
    
    response = dynamoTable.put_item(   
        Item={ '<span style="color: #ff0000;">PARTITION_KEY</span>' : <span style="color: #ff0000;">appointment_type</span>, 
               '<span style="color: #ff0000;">UID</span>': <span style="color: #ff0000;">userId</span>, 
               '<span style="color: #ff0000;">AppointmentDate</span>': <span style="color: #ff0000;">date</span>, 
               '<span style="color: #ff0000;">AppointmentTime</span>': <span style="color: #ff0000;">appointment_time</span>, 
               '<span style="color: #ff0000;">AppointmentType</span>': <span style="color: #ff0000;">appointment_type</span>, 
               '<span style="color: #ff0000;">CreateTime</span>' : ts 
              } 
    ) 

    logger.debug('DBtestlog === Time {}, Date {}, Type {}' .format(appointment_time, date, appointment_type))
   </code>

Attached policy to the role associated to the Bot

<code>
{
    "document": {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "dynamodb:*",
            "Resource": "*"
        }
      ]
    },
    "name": "cmDynamoDB",
    "id": "XXXXXXXXXXXXXXXXXXXXX",
    "type": "managed",
    "arn": "arn:aws:iam::XXXXXXXXXXXX:policy/<span style="color: #ff0000;">DynamoDB</span>"
}
   </code>

Execute Test Event

<code>
{
  "currentIntent": {
  "slots": {
    "AppointmentType": "general",
    "Date": "2030-12-06",
    "Time": "16:00"
  },
  "name": "MakeAppointment",
  "confirmationStatus": "None"
  },
  "bot": {
    "alias": "$LATEST",
    "version": "$LATEST",
    "name": "MakeAppointment"
  },
  "userId": "John",
  "invocationSource": "DialogCodeHook",
  "outputDialogMode": "Text",
  "messageVersion": "1.0",
  "sessionAttributes": {}
}
   </code>

Test result

 

Webpage hosting

The demo page https://demo.classmethod.ca/fbchatcss.html is hosted on AWS S3 with css template from w3.css

In order to enable HTTPS connection, we use AWS CloudFront content delivery services with a SSL certificate generate from Certificate Manager.

Embed Facebook messager

To embed facebook messenger into webpage, you need to get the code from facebook messenger.

Go to the facebook page Settings and add your domain to the Whitelisted Domains and setup Chat Plugin.

 

At the end of the Customer Chat Plugin setup you will have a code snippet to add the Facebook JaveScript SDK on the website.

Embed this Javascript into the HTML file to enable facebook messenger chatbot in the website.

Sample Use Cases

The appointment booking chatbot can be used for any type of appointment booking services. For example, dental and medical clinic or spa can embed a facebook chatbot into their website to increase customer service experience. Appointment tracking system can be linked to an external calendar API (ie. Google Calendar).

How to book an appointment

  1. Login Facebook account
  2. Type "book an appointment" in facebook messenger
    1. Alternatively, type "Menu" and click "Appointment Demo"
  3. Select Appointment Type (defined slots & update Lambda function)
  4. Prompt appointment time (M-F available, Weekend office close)
    1. Type utterance such as: today, tomorrow, next Wednesday, next Wed, etc.
    2. Click on the options on response card button
    3. Only 1 time slot is available
  5. Select time (randomly generated by function defined in lex blueprint)
  6. Confirm appointment
  7. Update appointment detail in DB

Try it on the Classmethod Canada facebook page!