GSP793

Overview

In this lab, you continue working on the Pigeon Travel virtual agent created in the Building Virtual Agent Fulfillment lab and add a phone gateway to allow users to call into your virtual agent. It is recommended to complete the Design Conversational Flows for your Agent lab first, but it is not required.

Note: You need the exported agent zip file from the Design Conversational Flows for your Agent lab to continue with this lab. Otherwise, you have to build all the intents and entities in Design Conversational Flows for your Agent lab from scratch before proceeding with the steps in this lab.

Contact Center AI is designed to easily integrate into existing telephony technology. In order to create a phone gateway, you need to have access to a telephony partner, and this lab is going to give you that access. For production usage, it's recommended to work with one of these partners.

Learning objectives

In this lab, you learn how to:

• Update Default Welcome Intent.
• Add a phone gateway to allow users to dial into our virtual agent.
• Transfer a user using the phone gateway.

Setup and requirements

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources will be made available to you.

This hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.

To complete this lab, you need:

• Access to a standard internet browser (Chrome browser recommended).

Note: Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.

• Time to complete the lab---remember, once you start, you cannot pause a lab.

Note: If you already have your own personal Google Cloud account or project, do not use it for this lab to avoid extra charges to your account.

How to start your lab and sign in to the Google Cloud console

1. Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is the Lab Details panel with the following:

   • The Open Google Cloud console button
   • Time remaining
   • The temporary credentials that you must use for this lab
   • Other information, if needed, to step through this lab

2. Click Open Google Cloud console (or right-click and select Open Link in Incognito Window if you are running the Chrome browser).

   The lab spins up resources, and then opens another tab that shows the Sign in page.

   Tip: Arrange the tabs in separate windows, side-by-side.

   Note: If you see the Choose an account dialog, click Use Another Account.

3. If necessary, copy the Username below and paste it into the Sign in dialog.

   {{{user_0.username | "Username"}}}

   You can also find the Username in the Lab Details panel.

4. Click Next.

5. Copy the Password below and paste it into the Welcome dialog.

   {{{user_0.password | "Password"}}}

   You can also find the Password in the Lab Details panel.

6. Click Next.

   Important: You must use the credentials the lab provides you. Do not use your Google Cloud account credentials. Note: Using your own Google Cloud account for this lab may incur extra charges.

7. Click through the subsequent pages:

   • Accept the terms and conditions.
   • Do not add recovery options or two-factor authentication (because this is a temporary account).
   • Do not sign up for free trials.

After a few moments, the Google Cloud console opens in this tab.

Note: To view a menu with a list of Google Cloud products and services, click the Navigation menu at the top-left.

Enable the API

1. In the Cloud Console go to Navigation menu > APIs & Services > Enabled APIs & services.

2. Click on + Enable APIs and Services.

3. Search for Dialogflow.

4. Click on the Dialogflow API and if the API is not Enabled, click Enable.

Task 1. Create your Dialogflow agent

You call your agent "pigeon-travel".

1. Go to the Dialogflow Console.

2. Sign in with the Google button, and make sure to select the lab credentials you logged into this lab with.

3. Check the Terms of Service. Click on Accept.

4. Click Create Agent.

5. Now add the agent information:

   • Agent Name: pigeon-travel
   • Default Time Zone: America/Denver
   • Google Project: use your Lab Project ID

6. Click Create.

Click Check my progress to verify the objective. Create a Dialogflow agent

Task 2. Import your Dialogflow agent

In the previous lab, you exported the Dialogflow agent you built. You now import it back in and continue building it.

If you do not have exported files to use, please use this file: pigeon-travel-gsp-793.zip

Note: If you are experiencing a 403 error while accessing this file, please be sure you are accessing it with the account provided you when the lab started. Do this by opening a fresh, new window, signing in with your lab credentials, and pasting the link in your new window.

Download the file to your local workstation.

This creates a new virtual agent project. Now you want to import the work you've already done.

1. Click on the settings gear icon () next to your agent name.

2. Select the Export and import tab.

3. Click Import from zip.

4. Click Select file and navigate to the zip file which contains the configuration of your virtual agent. You can alternatively drag and drop the file if you prefer.

5. Type in the word "IMPORT" in all caps to enable the import button and click Import.

6. Click Done to close out the upload window once the import is complete.

Your existing configuration has been imported into your new agent project.

Click Check my progress to verify the objective. Import the Dialogflow agent

Task 3. Set up a phone gateway

To set up your gateway, follow these steps:

1. Select a provider. From the Dialogflow Console:

   • Select your agent, pigeon-travel.
   • Click Integrations.

   

   • Click Dialogflow Phone Gateway.

2. Configure Phone Gateway:

   • Select the language - for this lab choose English.
   • Select the country code for the telephone number - for this lab select +1 for the United States.
   • Click Next.

   

3. Select a number:

   • Choose a telephone number from the list.
   • Click Create.

   

4. Completion:

   • The gateway is now active.
   • Save the displayed telephone number and close the dialog window. You can click the Dialogflow Phone Gateway integrations button again to retrieve this information.

   

Click Check my progress to verify the objective. Set up a phone gateway

Task 4. Welcome the caller

Now that you have a working phone gateway agent, look at the intents you imported. This helps you understand how to build your own phone gateway agents.

Follow these steps to greet the caller and provide a list of possible options:

1. Go to the Dialogflow Console.

2. Select your agent.

3. Click Intents.

4. Click Default Welcome Intent.

5. Scroll down to the Events section. Notice that both Welcome (WELCOME) and Telephony Welcome (TELEPHONY_WELCOME) events are present. If the Telephony Welcome (TELEPHONY_WELCOME) is not present, add it. In the events section enter Telephony Welcome and press Enter.

The Telephony Welcome (TELEPHONY_WELCOME) event means that all types of welcome events trigger this intent. As an alternative, you could create separate intents, each dedicated to a specific welcome event.

6. Scroll down to the Responses section and add the DIALOGFLOW PHONE GATEWAY tab by click the plus icon.

7. Click ADD RESPONSES and choose Synthesize Speech.

8. Enter the following in the text field:

Hello! I am the virtual agent for Pigeon Travel. I can help you with many things such as changing your name on your reservation. How can I help you?

9. Toggle Use responses from the DEFAULT tab as the first responses to the off position.

10. Click SAVE.

11. You can now call the number on a phone and hear the customized response.

Click Check my progress to verify the objective. Welcome the caller

Task 5. Set up fulfillment using Cloud Functions to look up reservations in Firestore

In this section, you set up Firestore for your agent to look up the current reservation and add the change.

Configure Firestore

1. In the Console go to Navigation menu > Firestore.

2. Click Create Database.

3. You are presented with two options, Native Mode or Datastore Mode. Choose SELECT NATIVE MODE.

4. For the location choose .

5. Click CREATE DATABASE. Once it completes you have the ability to create a new collection.

6. Click START COLLECTION.

   • Collection ID: reservations

   • Document ID: 100

7. Fill in the details to replicate the details below, then click SAVE.

   • Field name: fname
   • Field type: string
   • Field value: Isabel

   Then click the + Add field button to add another:

   • FIeld name: lname
   • Field type: string
   • Field value: Costa

   Then click the + Add field button to add another:

   • Field name: newname
   • Field type: string
   • Field value:

8. Click Save.

You have now added your first document to a Firestore collection.

Firestore Document IDs Best Practice

• Avoid the document IDs . and ...

• Avoid using / forward slashes in document IDs.

• Do not use monotonically increasing document IDs such as:

  • Customer1, Customer2, Customer3, ...
  • Product 1, Product 2, Product 3, ...

  Such sequential IDs can lead to hotspots that impact latency.

Dialogflow Fulfillment

1. In the Cloud Console navigate to Cloud Functions.

2. Click Create Function.

3. For Environment, use 1st gen.

4. For Function Name, use dialogflowFirebaseFulfillment.

5. For Region, use .

6. For Trigger, use HTTP. Check the box for Require Authentication and select Require HTTPS.

7. Click Save, then click Next.

In the previous lab, you downloaded the Cloud Function source code, you now upload this code to the newly deployed Cloud Function.

• If you do not have exported files to use, please use this file: pigeon-travel-gsp-793-cloud-function.zip

8. On the Code page, for the Runtime, choose Node.js 10.

9. From the Source code dropdown, choose ZIP from Cloud Storage.

10. For the ZIP from Cloud Storage enter the following location qwiklabs-resources-ccai-quest/pigeon-travel-gsp-793-cloud-function.zip.

11. For Entrypoint, use dialogflowFirebaseFulfillment.

12. Click DEPLOY.

Once it completes you now have the code from the previous lab deployed to your fulfillment Cloud Function.

Click Check my progress to verify the objective. Set up fulfillment using Cloud Functions

Task 6. Call the number

• Go ahead and dial the number assigned to the Phone Gateway from your own phone.

After the welcome message start the conversation flow by asking the virtual agent to change your name on the reservation. If all goes well, in Firestore you see the new name set to the name you gave the virtual agent.

Task 7. Fallback to a live agent

What happens when it does not go well? What if the user provided the wrong reservation number. For this you use the Dialogflow Phone Gateway Transfer Call option.

Before starting, read a little about events since you use events to trigger an intent.

Events

Intents are normally matched when an end-user expression matches an intent training phrase. However, you can also trigger intents using events. Events can be invoked in many ways.

There are two types of events:

• Platform events: These built-in events are provided by platform integrations. They are invoked when platform-specific events occur. For example, the FACEBOOK_LOCATION event is invoked by the Facebook integration when an end-user accepts or rejects a request for the end-user's location.

• Custom events: These are events that you define. You can invoke these events using either fulfillment or the API. For example, you might set a timed alert during a conversation, which invokes an event at a certain time. This event could trigger an intent that alerts the end-user about something.

You use custom events to trigger a call transfer.

Modify the Fulfillment Code

1. On the Function Details page, click Edit.

2. Navigate to the Code Editor tab..

3. Replace the following codes and then Deploy it:

agent.add('I could not find your reservation.');

with

agent.add('placeholder'); agent.setFollowupEvent('custom_fallback');

2. Replace the following:

console.log('Transaction failure:', error);

with:

console.log('Transaction failure:', error); agent.add('placeholder'); agent.setFollowupEvent('custom_fallback');

3. Replace the following:

agent.add('Error reading entry from the Firestore database.');

with :

agent.add('placeholder'); agent.setFollowupEvent('custom_fallback');

The function should look like this:

function reservation(agent) { let id = agent.parameters.reservationnumber.toString(); let collectionRef = db.collection('reservations'); let userDoc = collectionRef.doc(id); return userDoc.get() .then(doc => { if (!doc.exists) { agent.add('placeholder'); agent.setFollowupEvent('custom_fallback'); } else { db.collection('reservations').doc(id).update({ newname: agent.parameters.newname }).catch(error => { console.log('Transaction failure:', error); agent.add('placeholder'); agent.setFollowupEvent('custom_fallback'); return Promise.reject(); }); agent.add('Ok. I have updated the name on the reservation.'); } return Promise.resolve(); }).catch(() => { agent.add('placeholder'); agent.setFollowupEvent('custom_fallback'); }); }

4. Click Deploy.

The agent.setFollowupEvent('custom_fallback'); code triggers the custom_fallback event which is associated with an intent. Let's create the intent.

Click Check my progress to verify the objective. Modify the Fulfillment Code

Task 8. Custom fallback intent

The custom fallback intent is triggered when a reservation is not found or an error occurs when connecting to Firestore, transferring the user to a live agent.

To cover this, create a custom-fallback intent:

1. Click on the ➕ next to Intents in the left menu.

2. Add the name "custom-fallback" into the Intent name text field.

3. In the Events section, add the following, pressing enter when done:

   • custom_fallback

4. In the Responses section, under Text Responses, enter the following response in the text field: I'm sorry, I'm not able to find your reservation, but you'll be connected to a live person in a moment.

5. Click the ➕ next to Default and add the DIALOGFLOW PHONE GATEWAY.

6. In the DIALOGFLOW PHONE GATEWAY tab, click ADD RESPONSES and choose Synthesize Speech.

7. Enter in the Synthesize Speech response: I'm sorry I'm not able to find your reservation but you'll be connected to a live person in a moment.

8. In the DIALOGFLOW PHONE GATEWAY tab, click ADD RESPONSES and choose Transfer Call

9. Enter a number that Dialogflow can transfer in the event the user needs to speak to a live agent.

10. Enable Set this intent as end of conversation.

11. Click the Save button. You may also notice the messages Agent Training started and Agent Training completed on the bottom right of the screen. This lets you know that Dialogflow is retraining your agent model based on the phrases you added.

12. Once training is done, try it out using a phone! Call the number you saved. This time tell the virtual agent the wrong reservation number.

Your agent now responds I'm sorry I'm not able to find your reservation but you'll be connected to a live person in a moment., and transfers your call to the number you set.

How this works.

13. The system looks for the reservation number in firestore:

if (!doc.exists)

14. If the doc is false, which means it does not exist, it then triggers the event:

agent.setFollowupEvent('custom_fallback');

15. The event is associated with an intent which then allows Dialogflow to speak the response and then transfer the call.

Click Check my progress to verify the objective. Create custom fallback intent

Task 9. (Optional) Export your code

Export your work so you can use it in the next lab. Click on the Source tab under Cloud Functions, and you see a button to DOWNLOAD ZIP.

Export your agent

In this section, you export your agent as a zip file so that you can import it later when you start the next lab. This way you can reuse the intents and entities you've configured so far.

1. Click on the settings gear ⚙ icon next to your agent name in the left menu.

2. In the settings page that opens up, go to the Export and Import tab.

3. Click on EXPORT AS ZIP. This downloads your agent into a local zip file.

Congratulations!

You have added a phone gateway to allow users to call into your virtual agent.

Google Cloud training and certification

...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.

Manual Last Updated October 18, 2023

Lab Last Tested October 18, 2023

Copyright 2024 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.