Codelab: Get Started with Dialogflow 

Overview 
Duration: 0:30

Welcome to the getting started with Dialogflow codelab. In this codelab, you’ll learn how to use 
Dialogflow to create a conversational interface and deploy it to the Google Assistant. 
 

What are you going to build in this codelab? 

● You will build a Dialogflow agent 
● We will be creating a conversational interface for a fictional bike shop that will let users 
know information about the bike shop and set an appointment to fix or service their bike 
● In the end we will make our Dialogflow agent accessible through the Google Assistant by 
surfacing our Dialogflow agent through Actions.

What you’ll learn 

✓ How to use Dialogflow's 3 main constructs (intents, entities and contexts) to create a
conversational interface
 ✓ How to connect your conversational interface to your own services and APIs using
Dialogflow's fulfillment and inline editor (powered by Cloud Functions for Firebase)
✓ How to build deploy your Dialogflow agent to the Google Assistant

What you’ll need 

● Google Account

Contents 

Overview
What are you going to build in this codelab?
What you’ll learn
What you’ll need

Contents

Creating your Dialogflow account

Login or create a Google account
Creating your Dialogflow account

Create and query your first agent

Creating your first Dialogflow agent
The Dialogflow console
Querying your agent
Saying "Hello" to your agent
Creating your first intent
Try it out!
Adding fulfillment
Setup: Deploying and enabling fulfillment

Extract data with entities

Add parameters to your intents
Using parameter data
Try it out!
Making parameters required
Try it out!

Manage state with contexts

Add contexts to conversational state
Creating your first entity
Adding your new entity
 Try it out!
Intents and contexts
Contexts and parameters

Scheduling an Appointment on Google Calendar with fulfillment

Setup: Creating and Authorizing the Bike Shop Calendar
Setup: Updating fulfillment with calendar details and credentials

Deploying to the Google Assistant

Testing in the Assistant Simulator
Publishing your Action

Next steps

Creating your Dialogflow account 

Duration: 2:00

Login or create a Google account 

Dialogflow requires a Google account to sign in. If you already have a Google account, skip to
the next section. If you don't have a Google account, you can get one here with your current
email or sign up for a Google account and email at the same time, with Gmail. 

Creating your Dialogflow account 

Now that you've signed into your Google account, you can sign into Dialogflow here.
1. Click on Google to sign in.
2. Allow Dialogflow to access your Google account. See a list of the permissions and what
they're used for.
 3. Lastly you'll be taken to Dialogflow's terms of service, which you'll need to accept in
order to use Dialogflow.

Create and query your first agent 

Duration: 10:00

Creating your first Dialogflow agent 

To create a Dialogflow agent:
1. Open a new tab and login to Dialogflow.
 2. Click Create agent in the left menu.

3. Enter “CodelabBikeShop” for your agent's name, `English` as the default language, and
set the default time zone to your time zone. Then click the Create button.

The Dialogflow console 

You should now see the Dialogflow console. On the left is the menu panel. If you're working on a
smaller screen and the menu is hidden, click on the menu ☰ button in the upper left corner. The
settings k button takes you to the current agent's settings.
The middle of the page will show the list of intents for the agent. By default, Dialogflow agents
start with two intents. Your agent matches Default Fallback Intent when it doesn't understand
what your users say. The Default Welcome Intent greets your users. These can be altered to
customize the experience.

On the right is the Dialogflow simulator. This lets you try out your agent by speaking or typing
messages.
Querying your agent 
Agents are best described as NLU (Natural Language Understanding) modules. These can be
included in your app, product, or service and transform natural user requests into actionable
data.

Time to try out your agent! In the simulator on the right, click into the text field that says Try it
now, type Hi, and press enter.
You just spoke to your Dialogflow agent! You may notice your agent didn't understand you.
Since input didn't match any intent, the default fallback intent is matched and you receive one of
the default replies inside that intent.

When a user sends a query that can't be matched to one of the intents in the agent, the fallback
intent is matched, which prompts the user to reframe their query in terms that can be matched.
This is an opportunity to provide example queries and guide the user to make requests that can
match an intent.

Saying "Hello" to your agent 

Let's fix the Default Welcome Intent so it correctly responds to the query Hi. Click on the
Default Welcome Intent and in the Training Phrases add the training phrase hello and click
Save.
Now Dialogflow will begin retraining our agent's machine learning models using the training
phrase hello.

After training is complete (and the kicon in the upper left stops spinning) try the Hi query again
and see how Dialogflow now correctly identifies the query and matches the Default Welcome
Intent and responds with a generic greeting.

Let's replace the generic greeting with something that let's our users know who we are. In the
Responses section of the Default Welcome Intent remove all the predefined responses like
Good Day! and Greetings! and add Hi, welcome to Hogarth's bike shop. How can
I help?. And then click Save.

Next, let's create our own intent.

Creating your first intent 

Dialogflow uses intents to categorize a user's intentions. Intents have Training Phrases, which
are examples of what a user might say to your agent. For example, someone wanting to know
the what hours our bike shop is open might ask "When do you open?", "What are your hours?"
or "How late can I come in?". All of these queries are unique but have the same intention: to get
information on when our bike shop is open.
To cover this query, create a "Hours" intent:
1. Click on the ¦next to Intents in the left menu.
2. Add the name Hours into the "Intent name" text field.
3. In the Training Phrases section, click on Add Training Phrases and enter the
following, pressing enter after each entry: When do you open?, What are your
hours? and How late can I come in?
4. In the Responses section, click Add Responses, then enter the following response in
the text field: We're open every weekday from 9am to 5:30pm
5. Click the Save button.
 
Try it out! 
Now try asking your agent for its name. In the simulator on the right, type When are you
open? and press enter.

Your agent now responds to the query correctly. Notice that even though your query was a little
different from the training phrase ("When are you open?" versus "When do you open?"),
Dialogflow still matched the query to the right intent.

Dialogflow uses training phrases as examples for a machine learning model to match users'
queries to the correct intent. The machine learning model checks the query against every intent
in the agent, gives every intent a score, and the highest-scoring intent is matched. If the highest
scoring intent has a very low score, the fallback intent is matched.
Adding fulfillment 
While it works, the agent we’ve created behaves a little unnaturally. When the user asks
something like “Are you open?”, the agent will respond with “We’re open every weekday from
9am from 5:30pm”. It would be much more natural - and helpful - if the agent told us directly
whether the shop is open.

To do this, our agent will need to check whether the shop is currently open and generate a
different response in either case. In Dialogflow, this type of complex logic should be
implemented in the fulfillment webhook.

A fulfillment webhook is an HTTP server that is called by Dialogflow with information about the
current conversation state. The fulfillment code takes any required actions, then generates a
response that Dialogflow returns to the user.

We’ll now go through the process of deploying a fulfillment webhook that will make our agent
respond more helpfully.

Setup: Deploying and enabling fulfillment 

Dialogflow has a built-in Cloud Functions for Firebase editor that allows you to write and deploy
JavaScript code that will handle your fulfillment.

In Dialogflow’s left menu, click Fulfillment to open the fulfillment page. Click the toggle next to
Inline Editor to enable the Cloud Functions for Firebase editor.

You’ll notice the editor contains two files: “index.js”, which contains the main code for the
fulfillment, and “package.json”, which details any dependencies that are required.

Now, we’re going to import some sample code from GitHub that will power your fulfillment.

Copy and paste the text of this file into “index.js”, replacing all of its current contents:

https://raw.githubusercontent.com/dialogflow/fulfillment-bike-shop-nodejs/master/functions/index
.js
Then, replace the contents of “package.json” with the text from this file:

https://raw.githubusercontent.com/dialogflow/fulfillment-bike-shop-nodejs/master/functions/pack
age.json

Now, scroll to the bottom of the page and click DEPLOY. After a minute or so, your code will be
deployed to Cloud Functions for Firebase.

Once the function has deployed, you will see the date and time of deployment at the bottom of
the page:

Take a look at the fulfillment code. There are two main functions, hours and
makeAppointment. We’ll take a look at makeAppointment later; for now we can focus on the
hours function. It calls currentlyOpen to determine if the shop is currently open, and adds a
different response depending on the condition.

The line intentMap.set(‘Hours’, hours); tells the fulfillment library that the hours
function should run when the “Hours” intent is matched. However, we also need to tell
Dialogflow to enable fulfillment for our “Hours” intent.

In the left menu, click Intents and open the “Hours” intent. Open the Fulfillment section at the
bottom and select Enable webhook call for this intent, so that it is toggled on.

Once you save the intent, you can give this a try. In the simulator on the right, enter “Are you
open?”. You should see the agent respond accordingly. Note that the timezone used by the
Cloud Functions for Firebase server will be UTC, so the response might not be correct for your
current local time.
If there’s an error in your fulfillment, Dialogflow will use whatever response is defined in the
Responses section of the Intent page, allowing your agent to recover gracefully.

Next up, we'll use entities to extract the relevant parts of user's query. This will enable our users
to setup an appointment with our bike shop to fix or service their bike.

Extract data with entities 

Duration: 12:00
Environment: Web, Kiosk
In this section we'll go over how to extract data from a user's query to let user's make an
appointment with our bike shop to service or fix their bike.

Add parameters to your intents 

Parameters are important and relevant words or phrases in a user's query that are extracted, so
your agent can provide a proper response. You will create a new intent with parameters for
spoken and programming languages to explore how these can match specific intents and be
included in your responses.

1. Create a new intent by clicking on the plus add next to Intents in the left menu.
2. Name the intent “Make Appointment” at the top of the intent page.
3. Add the following as Training Phrases: I'd like to schedule an appointment
for next Thursday, I'd like to get my bike fixed, I have a mountain
bike that needs servicing, My bike is broken, Can I schedule
service for 4pm tomorrow?, Can you fix my road bike?, Can I set up
an appointment for noon on Friday?
Dialogflow automatically detects known parameters in your Training Phrases and creates them
for you.
Below the Training Phrases section, the parameter table is automatically filled out with the
information Dialogflow gathered:
● The parameter is optional (not required)
● named date and time
● corresponds to the system entity type @sys.date and @sys.time
● has the value of $date and $time
● is not a list
Using parameter data 
The value of a parameter can be used in your responses. In this case, you can use $date and
$time in your responses and it will be replaced with the date and time specified in the query to
your agent.

In the Responses section add the following response and click the Save button:
Great! I've set up your appointment for $date at $time. See you then!
Try it out! 
Now, query your agent with "Can I setup an appointment for noon in a fortnight?" in the
simulator in the right panel.

You can see in the bottom of the simulator output that Dialogflow correctly extracted the
language parameter with the speech "in a fortnight" and "noon" from the query and correctly
parsed as the date and time. In the response, you can see "2018-04-03" and "12:00:00" were
correctly inserted where the parameter values were used.
Making parameters required 
In the case of our bike shop, we need to know the values of both the date and time before we
can schedule an appointment. By default, all Dialogflow parameters are optional. To make them
required, we need to check the box next to each parameter we wish to make required. Check
the box next to each parameter in the "MakeAppointment" intent:

Now that each parameter is required we need to create a prompt for each parameter. Prompts
ask the user to provide a value for any parameter not provided when the user initially indicated
their intention (i.e. to make an appointment). Click "Define prompts" to create a prompt for a
parameter and enter the following prompts for each parameter:

Parameter Prompt
 date What day do you want to come in?

time What time works for you?

After entering the prompts, click Save.

Try it out! 
Now, query your agent with "I want to get my bike fixed?" in the simulator in the right panel.
You'd get a response back "What date would you like to schedule an appointment?". Indicate a
date ("tomorrow") and you'll get back a response asking for a time on the date. Respond to that
and you'll be asked what kind of bike service you'd like and after you answer that you'll get
confirmation that the appointment has been set:

Queries containing some information in the initial request (i.e. "I want to setup an appointment
for tomorrow") will fill in the correct parameter (the date) and skip the date prompt ("What day do
you want to come in?") and move to the time prompt ("What time works for you?").

We've just used Dialogflow entities and parameters to create a completely unique conversation
with no code and very little setup! Next we'll cover how to control conversation flow and state
with contexts and then hook up our agent to setup real appointments with Google Calendar.

Manage state with contexts 

Duration: 7:00
Add contexts to conversational state 
Once our user has successfully set up an appointment, we might want to collect some further
information from them. Imagine our bike shop offers two types of appointment: repair, or
tune-up. We want to know which of these the user needs.

To get started, let’s update the response in our “MakeAppointment” intent to ask the user what
appointment type they need. Replace the response with this text: Great! I've set up 
your appointment for $date at $time. Do you need a repair or just a 
tune-up?, then click save. 
 

To collect the answer to this question, we need to create another intent. However, it is important
that this new intent is only matched after this question has already been answered. To enforce
this, we can define it as a follow-up intent.

Follow-up intent are intents that can only be matched after their "parent" intent, (in this case our
"Make Appointment" intent) has been matched. Click on "Intents" in the left navigation panel (if
the menu is hidden, click on the menu ☰ button in the upper left corner). Then hover your
mouse over the "Make Appointment" intent and click on the "Add follow-up intent" text that
appears toward the right of the intent:

Next, click "custom" from the dropdown menu.

Dialogflow automatically named the follow-up intent "Make Appointment - custom," and the
arrow indicates the relationship between the intents.

Follow-up intents can only be matched after the parent intent has been matched. Since this
intent will only be matched after the "Make Appointment" intent, we can assume that the user
has just been asked the question "Do you need a repair or just a tune-up?".

To capture the answer to this question, we will first need to define some entities.

Creating your first entity 

Dialogflow allows you to define developer entities, which function similarly to Dialogflow's
system entities. Let's start by creating a entity type. Since we want users to be able to choose
what type of appointment they'd like to make with our shop, let's call the entity type
AppointmentType. We'll add two entities in the AppointmentType entity type for the two
different types of appointments: service and fix.

To create an entity type:

1. Click on the plus ¦next to Entities in the left menu.
2. Enter AppointmentType for the name of the entity type.
3. Click on the text field and add the following entries: service and fix
4. When you enter an entry, pressing tab will move your cursor into the synonym field. Add
the following synonyms for each entry. Be sure to add each word individually rather than
copying and pasting the whole string:
Entry Synonym

service service, overhaul, maintenance, tune-up, tune up

fix fix, repair, mend, broken, flat tire, fixed

5. Click the Save button.

Each entity type has to have the following:

 ● a name to define the category (AppointmentType)
● one or more entries (service)
● one or more synonyms (maintenance, tune up, etc)
Dialogflow can handle simple things like plurality and capitalization, but make sure to add all
possible synonyms. The more you add, the better your agent can determine your entities.

Adding your new entity 

Now that we've defined our entity type for appointment, we can use it in the Training phrases
of our "Make Appointment - custom" intent:
1. Click on Intents in the left menu, and then click on the arrow next to the “Make
Appointment” intent to reveal its follow-up intents. Click the "Make Appointment -
custom" intent.
2. Add the following as Training phrases: “Can you service my bike?”, “I need
a repair.”

3. You should see the appointment entity type automatically annotated in the Training
phrases you entered. This adds the AppointmentType parameter to the table, which is
below the Training phrases section. Click the checkbox to mark this parameter as
REQUIRED.

4. Click Define prompts and enter We can service or repair your bike.
Which one would you like?
5. In the Responses section, change the response to be Okay, we’ll schedule a
$AppointmentType. and then click the Save button.
Try it out! 
Now, query your agent with "Can I setup an appointment for 11am tomorrow?" in the simulator
in the right panel.

Next, enter “I need a fix”.

You can see in the bottom of the simulator output that Dialogflow correctly extracted the
AppointmentType parameter and correctly inserted the value ("fix") in the response.

Right now, the response for this intent (“Okay, we’ll schedule a fix.”) is pretty unhelpful. It would
be great if the response confirmed the date and time that the appointment was scheduled. To do
this, we’ll need the date and time, but the date and time parameters are only present in the
"Make Appointment" intent and not in the "Make Appointment - custom" intent.

Intents and contexts 

To respond with a parameter gathered from the "Make Appointment" intent, you need to know
how follow-up intents work. Follow-up intents use contexts to keep track of if a parent intent has
been triggered. If you inspect the "Make Appointment" intent, you'll see
"MakeAppointment-followup" listed as an Output context, prefaced by the number 2:
After the "Make Appointment" intent is matched, the context "MakeAppointment-followup" will be
attached to the conversations for two turns. Therefore, when the user responds to the question
("Do you need a repair or just a tune-up?"), the context "MakeAppointment-followup" will be
active. Any intents that have the same Input context will be heavily favored when Dialogflow
matches intents.

Click on Intents in the left navigation and then click on the "MakeAppointment - custom" intent.

You can see that the intent has the same input context ("MakeAppointment-followup") as the
output context of "Make Appointment". Because of this, "MakeAppointment - custom" will only
be matched after the "Make Appointment" intent is matched.

Contexts and parameters 

Contexts store parameter values, which means you can access the values of parameters
defined in the "Make Appointment" intent in other intents like "MakeAppointment - custom".
Add the following response to the "MakeAppointment - custom" intent and click the Save button:
Okay, we’ll schedule a $AppointmentType,
#MakeAppointment-followup.date, at #MakeAppointment-followup.time.
We’ll see you then.

Now, you can query your agent again and get the proper response. First enter "Can I setup an
appointment to service my bike at 11am tomorrow?" and then respond to the question with
"Sure!".
You should see that the date and time parameter values have been retrieved from the context.

In the next section, we’ll hook up our intents so that we actually create each appointment in
Google Calendar. After that, we’ll make our agent available on the Google Assistant through
Actions on Google.

Scheduling an Appointment on Google Calendar with fulfillment 

Duration: 10:00

Setup: Creating and Authorizing the Bike Shop Calendar 

Click the kbutton to go to your agent's settings. In the project ID section click on the name of
the project (maysbikeshop-abf32) to open the cloud console for the project.
In the Cloud console click on the menu ☰ button, then APIs & Services > Library

Search for and select the "Google Calendar API" and then click Enable to enable the API on
your cloud project

Next select Credentials on the left, then click Create Credentials and select Service Account
Key from the dropdown menu.
Select New Service Account from the dropdown and enter bike-shop-calendar for the
name and click Create in the popup select Create Without Role.

A JSON file will be downloaded to your computer, keep this file handy we'll be using in later.
Next we need to create a calendar specifically for our bike shop. Open Google Calendar and on
the left click the + next to "Add a friends calendar" and select New Calendar
Enter Bike Shop for the name of the calendar and then click Create Calendar. The bike shop
calendar will appear on the left, click on it

In the JSON file that was downloaded earlier locate the client_email field and copy the
email address:
{
"type": "service_account",
"project_id": "marysbikeshop-abf32",
"private_key_id": "bb836e...",
"private_key": "-----BEGIN PRIVATE KEY-----\n…",
"client_email":
"[email protected]",
"client_id": "10221...",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://accounts.google.com/o/oauth2/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com...",
"client_x509_cert_url": "https://www.googleapis.com/robot/v..."
}
Back in the browser in the Share with specific people section click Add people and paste the
email address in the email field and select Make changes to events in the permissions
dropdown.

Next scroll down the the Integrate calendar section and make a note (or copy) of the Calendar
ID:

Setup: Updating fulfillment with calendar details and credentials 

Take a look at the code. The makeAppointment function is triggered when the ‘Make
Appointment’ intent is matched. It grabs the values of the date and time parameters extracted
by Dialogflow and uses them to check Google Calendar to make sure the requested time is free.
It then either books the appointment and notifies the user, or apologizes that there are no slots
available and asks for an alternative time.

To make this code work with the calendar we previously created, paste the Calendar ID
determined in the previous section into the <INSERT CALENDAR ID HERE> on line 25 of
index.js. The resulting line should look similar to const calendarId = 
'[email protected]'.
Next, copy the contents of the JSON file downloaded in the "Service Account Setup" section
and paste it into const serviceAccount = {} on the next line. Paste the raw JSON, without quotes.
The JSON file will be multiple lines, the first few couple of lines should look something like this:

const serviceAccount = { "type": "service_account", ... 

Once you’ve completed this step, hit DEPLOY, and wait for the process to finish.

Now, open the Intents page, click the “Make Appointment” intent and in the Fulfillment section,
click the toggle to enable the webhook call.

Now, we should be able to book an appointment in our calendar. Let’s try it out in the simulator.
Enter “I want an appointment at 4pm on Friday”.
Now, refresh the Google Calendar you created earlier, and check the day you asked for. You
should see the event!
We’ve now created a Dialogflow agent. It’s only a couple of steps to make it available on the
Google Assistant!

Deploying to the Google Assistant 

Duration: 10:00

Testing in the Assistant Simulator 

In the Dialogflow side menu, click Integrations. This will take you to the Integrations page,
where you can easily connect your agent with many different conversational platforms.

We’re going to set up integration with the Google Assistant. First, click INTEGRATION
SETTINGS in the Google Assistant section.
This will open the Google Assistant integration settings pane. From here, click TEST, so we can
test our agent with the Google Assistant.

A dialog will pop up asking about auto-preview. Click CONTINUE to keep going. Now, the
Actions on Google Simulator will open in a new tab.

To chat with your agent, enter “Talk to my test app” in the input section of the simulator.

Your agent will now respond with the greeting you specified in the Default Welcome Intent.
You can use the simulator to chat with your agent and see how it will respond when integrated
with the Google Assistant. You can even click the microphone icon to use speech recognition.

Try saying “What are your hours?”

In addition to testing in the simulator, you can also test your Action on any Assistant-capable
devices that your Google account is currently logged into. This could be your Android phone, or
your Google Home device.

To do this, you just invoke the Assistant and say “talk to my test app”. For example, to a Google
Home device you might say “OK Google, talk to my test app”.

Publishing your Action 

Once you have finished developing and testing your Action, you can publish it to over 400
million Assistant-capable devices. From the Actions on Google Simulator, click the menu ☰
button and select Overview. The resulting page will guide you through the process of submitting
an Action.
The publishing process involves giving your app a name and description, and ensuring that it
meets the policy guidelines. You can use the publishing checklist to prepare for publishing.
Note that there is a quality standard for Actions. Since the Action you’ve created in this codelab
is for a fictional business, you should not submit it for publication!

Next steps 
Duration: 1:00

Nice work! You’ve now been through all of the stages of building a Dialogflow agent and
submitting it to Actions on Google.

If you’re interested in building and publishing your own Action, here are some helpful resources:

● Actions on Google Console

● Actions on Google Documentation
● Actions Design Guidelines

Have fun developing for this exciting new platform!