Wouldn't it be awesome to have access to an appointment scheduler at a doctor's office or DMV or a repair shop? In this lab you will build a simple chatbot using Dialogflow and learn how to integrate it with web using one click integration.

The exercises are ordered to reflect a common cloud developer experience:

  1. Create a Dialogflow agent
  2. Create intent
  3. Test the chatbot
  4. Enable web integration

What you'll learn


  1. Go to the Dialogflow Console.
  2. Sign-in, if you are a first time user, then use your email to sign up
  3. Accept the terms and conditions and you will be in the console
  4. Create an Agent. To create, click on the dropdown menu in the left pane in order to see "Create new agent"

  1. Call this "AppointmentScheduler"
  2. Dialogflow creates a GCP project for you to access logs, cloud functions etc. You can select an existing project as well.
  3. When you're ready, click Create.
  4. Dialogflow creates two default intents as a part of the agent.
  1. Default Welcome intent helps greet your users
  2. Default Fallback intent helps catch all the questions that your bot does not understand.
  1. At this point, we have a functional bot that greets the users.

Test the Agent!

On the right hand side of the Dialgflow console, you can see the testing panel that looks like this:

To test the agent, in the "Try it now" box type "Hi". The agent should respond back with the default greeting defined in the "Default Welcome Intent". This could be "Greetings! How can I assist?" You can also modify the response.

Now, if you try "set an appointment" it does not know what to do so it initiates the fallback intent. This is because we have not created any intent to catch that particular question!

  1. To create the intent, click on "Intent" within the "Agent" and then click on the "CREATE INTENT" button on the right. Name the intent as "Schedule Appointment"

  1. For now, Skip over Contexts & Events at the top. Click on "Add Training phrases".You can use the following phrases for this. Try them out individually.
  1. Set an appointment on Wednesday at 2pm
  2. Need an appointment for 4pm tomorrow
  3. I would like to set an appointment for 3pm on Tuesday
  1. As you are putting these in, you will see "date" and "time" are automatically identified as system entities @sys.date and @sys.time.

  1. To make this functional we need to respond back to the user. Let's add a response. Scroll down to the "Response section and actually click on "Add Response". You could just say - "You are all set. See you then!" or you could make it more interesting and say "you are all set for $date at $time. See you then!" Dollar($) sign here helps you access the entity values.

  1. At this point you can click "Save" and test the agent with "set an appointment for 4pm on Thursday." and as expected, you get the response with the right date and time.

Slot Filling:

Now, try to test "set an appointment", since that is not very specific and we have not currently handled that scenario, it should be handled by Fallback intent. To support this, we use something called Slot-filling.

Slot filling allows you to design a conversation flow for parameter value collection within a single intent.This is useful when an action can't be completed without a specific set of parameter values. To learn more about slot-filling refer to this documentation.

Next, let's set up Slot-filling.

  1. Click on "Actions and Parameters".
  2. Make the entities as required and Dialogflow will make sure to ask for both date and time before it responds back.
  3. For time add "what time would you like to come in"
  4. For the date add "what date". You can add other variants too.
  5. When you're finished, click Save.

At this point, the Dialogflow should be set up. Test it in the Try it now panel on the right by entering the following conversation:

  1. User: "Hi"
  2. User: "Set an appointment"
  3. Chatbot response: "What date?"
  4. User: "May 23"
  5. Chatbot response: "What time would you like to come in?"
  6. User: "10am"
  7. Chatbot response: "you are all set for 2019-05-23 at 10:00:00. See you then!"

Dialogflow provides many types of integration for your chatbot. Let's take a look at a sample web user interface for the chatbot.

Click on Integrations in the Dialogflow left panel.

Enable the Web Demo integration by flipping the switch

Click on the URL link to launch Web Demo

Start using the chat interface by typing in the Ask something... section! If you are using a Chrome browser, if you click the microphone icon and you can speak your questions to the chatbot. Start chatting with the chatbot using the following conversation:

If you are planning on doing the other labs in this series, don't do the cleanup now, do it after you are done with all the labs in the series.

Delete the Dialogflow Agent

You built a chatbot, and you're now a chatbot developer!

Check out these other resources: