Spotted a bug? Have a great idea? Help us make google.dev great!

In this codelab we will learn how Dialogflow connects with backend systems to provide rich and dynamic responses to users questions. We will use the same Agent that we created in previous labs "Appointment Scheduler". In the Agent's GCP project we will enable Google Calendar API and a service account to access google calendar. Then we create the fulfillment and use the credentials we generated for the calendar access to connect it with the fulfillment. Finally we will test to see if the calendar invites are being set up per user request.

What you'll learn

  • What is Fulfillment
  • How to set up service account for the Google Calendar
  • How to set up Google Calendar
  • How to enable fulfillment in Dialogflow
  • How to test Fulfillment

Prerequisites

  • Basic concepts and constructs of Dialogflow. For introductory Dialogflow tutorial videos that covers basic conversational design check out the following videos:
  • Build an Appointment Scheduler Chatbot using Dialogflow.
  • Understanding Entities (Video to be added here)

Fulfillment is code that's deployed as a webhook that lets your Dialogflow agent call business logic on an intent-by-intent basis. During a conversation, fulfillment allows you to use the information extracted by Dialogflow's natural language processing to generate dynamic responses or trigger actions on your back-end.

Most Dialogflow agents make use of fulfillment. The following are some example cases where you can use fulfillment to extend an agent:

  • To generate dynamic responses based on information looked up from a database.
  • To place orders based on products a customer has asked for.
  • To implement the rules and winning conditions for a game.
  1. In Dialogflow's console, go to settings ⚙ and under the general tab, you'll see the project ID section with a Google Cloud link to open the Google Cloud console. Open Google Cloud.

  1. In the Cloud console, go to the menu icon ☰ > APIs & Services > Library
  2. Search for Google Calendar API and then Enable to enable the API on your cloud project.
  1. Under the menu icon click on APIs & Services then click on Credentials
  2. Click on Create Credentials followed by Service Account Key.

  1. Under Create service account key, select New Service Account from the dropdown and enter AppointmentCalendar for the name and click Create. In the popup, select Create Without Role.
  1. A JSON file will be downloaded to your computer that you will need in the setup sections below.
  1. Open Google Calendar. On the left, next to "Add Calendar" click the three dots and select New Calendar

  1. Enter Appointment Calendar for the name of the calendar and select Create Calendar.
  2. Next, click the newly created "Appointment Calendar", you will see it appear in the "Settings for my calendars" list on the left column.
  3. Copy client_email from the json file we downloaded as a part of the service account set up.

  1. Paste the client_email copied from the previous step into the "Add people" field of the Share with specific people section and then select "Make changes to events" in the permissions dropdown and select Send.

  1. While still in Settings, scroll down and copy the Calendar ID in the Integrate Calendar section.

Add Service Account and Calendar ID to Fulfillment

  1. Navigate to Dialogflow Agent "AppointmentScheduler" and click on "Fulfillment"
  2. Enable inline code editor by toggling the switch.

  1. Update the index.js file with the following code.
'use strict';

// Import the Dialogflow module from Google client libraries.
const functions = require('firebase-functions');
const {google} = require('googleapis');
const {WebhookClient} = require('dialogflow-fulfillment');

// Enter your calendar ID below and service account JSON below
const calendarId = "<INSERT YOUR CALENDAR ID>";
const serviceAccount = {<INSERT CONTENTS OF YOUr JSON FILE HERE>}; // Starts with {"type": "service_account",...

// Set up Google Calendar Service account credentials
const serviceAccountAuth = new google.auth.JWT({
 email: serviceAccount.client_email,
 key: serviceAccount.private_key,
 scopes: 'https://www.googleapis.com/auth/calendar'
});

const calendar = google.calendar('v3');
process.env.DEBUG = 'dialogflow:*'; // enables lib debugging statements

const timeZone = 'America/Los_Angeles';
const timeZoneOffset = '-07:00';

// Set the DialogflowApp object to handle the HTTPS POST request.
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
 const agent = new WebhookClient({ request, response });
 console.log("Parameters", agent.parameters);
 const appointment_type = agent.parameters.AppointmentType;
 function makeAppointment (agent) {
   // Calculate appointment start and end datetimes (end = +1hr from start)
   const dateTimeStart = new Date(Date.parse(agent.parameters.date.split('T')[0] + 'T' + agent.parameters.time.split('T')[1].split('-')[0] + timeZoneOffset));
   const dateTimeEnd = new Date(new Date(dateTimeStart).setHours(dateTimeStart.getHours() + 1));
   const appointmentTimeString = dateTimeStart.toLocaleString(
     'en-US',
     { month: 'long', day: 'numeric', hour: 'numeric', timeZone: timeZone }
   );
    // Check the availability of the time, and make an appointment if there is time on the calendar
   return createCalendarEvent(dateTimeStart, dateTimeEnd, appointment_type).then(() => {
     agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);
   }).catch(() => {
     agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
   });
 }

// Handle the Dialogflow intent named 'Schedule Appointment'.
 let intentMap = new Map();
 intentMap.set('Schedule Appointment', makeAppointment);
 agent.handleRequest(intentMap);
});

//Creates calendar event in Google Calendar
function createCalendarEvent (dateTimeStart, dateTimeEnd, appointment_type) {
 return new Promise((resolve, reject) => {
   calendar.events.list({
     auth: serviceAccountAuth, // List events for time period
     calendarId: calendarId,
     timeMin: dateTimeStart.toISOString(),
     timeMax: dateTimeEnd.toISOString()
   }, (err, calendarResponse) => {
     // Check if there is a event already on the Calendar
     if (err || calendarResponse.data.items.length > 0) {
       reject(err || new Error('Requested time conflicts with another appointment'));
     } else {
       // Create event for the requested time period
       calendar.events.insert({ auth: serviceAccountAuth,
         calendarId: calendarId,
         resource: {summary: appointment_type +' Appointment', description: appointment_type,
           start: {dateTime: dateTimeStart},
           end: {dateTime: dateTimeEnd}}
       }, (err, event) => {
         err ? reject(err) : resolve(event);
       }
       );
     }
   });
 });
}
  1. In index.js, update your CalendarID copied from prior section and replace <INSERT YOUR CALENDAR ID>
  2. Also update "serviceAccount" constant with the contents of your JSON file. Replace <INSERT CONTENTS OF YOUR JSON FILE HERE>
  3. (Optional) Change the below fields as per your calendar's "Appointment Calendar" timezone if not in PST (below is an example for CST):

const timeZone = 'America/Chicago';

const timeZoneOffset = '-05:00';

  1. Click Deploy at the bottom of the page.

Enable Fulfillment response

  1. Navigate to Dialogflow "Intent"
  2. Click on "Schedule Appointment" Intent.
  3. Scroll down to Fulfillment and toggle "Enable webhook call for the intent"

  1. Click "Save" to save changes to the agent.
  2. Click "Deploy" under Fulfillment whenever there is a Cloud Functions change.

Let's test our chatbot, you can test it in the simulator or use the web or google home integration we have learnt in previous codelabs.

  1. User: "Set an appointment for vehicle registration at 2pm tomorrow"
  2. Chatbot response: "Ok, let me see if we can fit you in. April 24, 2 PM is fine!."

3. Calendar booking response:

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

  • Click on the gear icon next to your existing agent

  • In the General tab scroll down to the bottom and click Delete this Agent.
  • Type DELETE into the window that appears and click Delete.

You created a chatbot in Dialogflow and integrated it with Google Calendar.. You're now a chatbot developer!

Check out these other resources: