And it will come with a couple of default intents ‘welcome’ and ‘fallback’.
Name the AgentThe moment you click CREATE button your page will look as below,Default intentsDefault Fallback Intent will be matched only when no other intent is matchedDefault Welcome Intent is matched when a user gives any greetings message say hi, hello etc.
,In our case when a user greets, the agent needs to respond sayingI can help you with registering to our programming language courses, let's start by knowing your email and phone numberSo we have to edit the responses section under Default Welcome Intent.
Remove all the default responses and add the response as stated above.
And then click the SAVE button.
Editing the responseThe user is now expected to give their email and phone, the agent has to make sure that it will always pick both parameters otherwise prompt the user until the user shares these details.
We can use the slot filling technique to achieve this.
Create a new intent which can be matched when a user shares email, phone.
Let's name it as ‘take_user_details’Now we will add training phrases to match to this intent when a user shares email, phone details.
Training phrasesThe moment a training phrase is added Dialogflow detects the possible extractable values – in our case email, phone and assigns to them a default system entity @sys.
email, @sys.
phone-number.
In case these are not automatically detected we can just select the part of the text we wanted to extract and assign our desired entity type.
Then SAVE.
Action and parametersSince we wanted our agent to make sure to collect both email, phone details as required fields we should define it under ‘Action and parameters’ section.
Select the check boxes under the REQUIRED column and define the prompts that an agent will use to ask the user when either of the parameters is not yet captured.
PromptsYou would want this user data to be saved in a database for further communication, so we have to enable fulfillment on this intent and then create a cloud function which can perform this work.
Enable FulfillmentAfter the intent captures both the email and phone details, instead of setting the response in Dialogflow Responses section, we will let fulfillment do it.
Below is what we will set as a response,Thanks for sharing the details, Which programming language course do you wish to join?After enabling fulfillment for this intent, navigate to Fulfillment menu in the left panel.
Webhook is used to point to your existing API.
But for this demo let’s use Inline Editor as we have very limited functionality requirement.
Deploy fulfillment code to FirebaseThere is some template code in place to help us get started, we will just say DEPLOY.
This will take a moment to complete as its creating an application in Firebase and deploying our code as a cloud function.
Clicking on ‘View execution logs in the Firebase console’ link will navigate to the newly created app in Firebase.
Under the same Firebase console, navigate to Database menu in the left panel and create a new Realtime Database where we will save user details using Dialogflow Fulfillment code.
Navigate to Realtime DatabaseChose test mode for demo purposes.
And then navigate to Project settings under Project Overview in the left menu to figure out the connection string for this database.
Finding Realtime Database credentialsScroll to your app section in the settings pageClick on </> symbol (web), to get the connection details.
Copy the entire config object and replace in the Fulfillment code.
Realtime Database credentialsFulfillment code — Saving user details to Realtime Database,Navigate to the GitHub link at the end of this article for source code.
The moment user details are picked, we can see the data pushed to Realtime Database.
Data pushed to Realtime DatabaseWhile all this is happening under the hood, the user will be responding with their preferred course.
We need another intent that can match when a user mentions his preference of programming language course.
Let's call it ‘take_course_preference’, then we shall train the intent to match for messages with programming languages.
Since Dialogflow doesn’t have a default entity viz.
, email or phone which can identify a programming language, we have to create one of our own.
So we will create a new entity called ‘ProgrammingLanguages’Creating an EntityNow we can go ahead and create ‘take_course_preference’ intent along with training phrases those will match to a programming language.
Manually mapping text to the custom entityWe will have to check if we have the training course user requested in our database and then respond accordingly.
Hence we have to enable fulfillment for this intent also and then create and map to a respective function inside the fulfillment code which can check and respond.
Checking course in Realtime DatabaseWe will also have to fill our Database manually with some sample data as shown below,Adding default available coursesAll good except that if a user gives a programming language that is not matched to ‘take_course_preference’ intent.
If this happens then Default Fallback intent is matched and our fulfillment is not executed.
An easy way to handle this use case is to give maximum training to ProgrammingLanguage entity with all the possible values.
Considering ‘take_course_preference’ intent is matched but that course is not available in our database, fulfillment code will respond by saying,Oops, we don’t offer this course at this time, let us know if you want to try some other course!And then when the user gives another preference again ‘take_course_preference’ intent is matched and responds accordingly.
If the fulfillment code finds a course is available then it will respond by saying,Sure, would you like to register for a Java class?The user may say Yes or No, we need to create follow-up intents for both cases.
Hover on take_course_preference to see follow-up intent optionYes fallback for take_course_preferenceFor Yes fallback, the response section should have,Great, registration complete.
You will get a call back.
Thanks.
No fallback for take_course_preferenceFor No fallback, the response section should have,No problem, do you want to try another course?That’s it.
!.We have completed all our backend setup.
There are a couple of ways to integrate this setup and give it a UI,By integrating with a wide range of available Dialogflow Integrations.
All the available Dialogflow integrations2.
Creating a customized web client setup (chat widget), typically by means of HTML and JavaScript frameworks like jQuery or Angular.
3.
We can also easily integrate this into a mobile app!You can make use of the jQuery client-side code which I have published to GitHub (refer to the end of the article), make sure to change the ‘Developer access token’ value and point to your agent.
Navigate to Settings to find Developer access tokenThat’s all, Hope it’s a worthy read, Thank you!P.
S.
Make sure to NOT use capital letters while naming ‘context’, In such cases inside fulfillment code agent.
getContext(‘context-name’) will return null.
https://dialogflow.
com/docs/contextsChat widget source code, Dialogflow agent backup, and Realtime Database backup is available at GitHub hereI have also presented a webinar on this topic, recording available here.. More details