Create a Facebook and Whatsapp Chatbot using Dialogflow - Ultimate Chatbot Tutorial

[Music] [Applause] so [Applause] [Music] [Applause] [Music] hey everyone welcome back to another tech tuesday with tech with such my name is sachin a google developer expert and in today's video we'll learn how to create a facebook messenger and a whatsapp chatbot using dialogflow if you're new to the channel make sure to subscribe as well as hit the bell icon so that you can be notified for future videos so without further ado let's get started so in terms of what we'll build today the agenda for today's show is actually will actually kind of start with dialogflow we'll understand what is dialogflow why we need to build with dialogflow and what are the main features of dialogflow and after that by creating your chatbot in dialogflow we will then integrate the chatbot that we have created in dialogflow to our facebook page or facebook messenger from there we would also explore how we can send rich responses like cards images and urls through our chatbot and finally for today's session we'll be targeting one of the biggest platforms which is whatsapp how you can actually build your chatbot and integrate it into whatsapp so the first thing to do is go to console.dialogflow.com and for those who are joining us today from different parts of the world let me know where you're joining from i'll be more than happy to see what you would like to see for today's session as well as the upcoming sessions every week so we have these tech tuesdays with tech good search happening every tuesday and feel free to leave your comments and chat in the live section and see what you would like to see in the upcoming sessions so with that being said let's actually start with dialogflow so we'll be continuing from where we left off in our previous session which was how to build a chat drop from scratch we'll also see how easy it is so we'll do a quick repa recap and see how to build something with dialogflow and how we can integrate it with multiple platforms so in our previous session we actually built a simple appointment scheduler where you can actually have your chatbot built and interact with you based on whether you'd like to set an appointment so based on that it will schedule an appointment for you so it's a simple response and how you can actually build that so the next part of it was we also touched base on knowledge basis how you can actually use your existing faq documents that you have for your website for your company or your startup you can actually use the existing faq documents as knowledge bases and use that to feed your chatbot response so for people who are joining us for the very first time let's see what this chatbot does so if i go to the right hand side and say hi it says greetings i can help you set an appointment and also help you get information about the coronavirus and again this was actually designed through intents and the default welcome intent is the first intent that actually gets triggered based on the conversation that you're having so in this you can see under the default welcome intent we had a few training phrases so in conversational design and building chatbots you don't actually program of every possible combination of what the user would say but here you add in training phrases so what are the typical phrases that people would say or give us an input to your chatbot so the main idea is to capture those training phrases and give it a pretty much a pretty but i would say around 10 to 20 or even more so the more training phrases that you have the better your chatbot would be so this is where the whole machine learning model and all the magic happens behind the scenes so based on these training phrases as an intent you can also give out a response and here the response is something that i have predefined and again for people who are joining us uh for the first time in the channel please do check out the previous video where we covered all of this from scratch and coming back to responses so this is the response that you see so anytime your user inputs a conversation or a statement or a phrase that is similar to what you have designed in dialogflow it will then match the specific intent and then give out the response so in this case if you go back to intents and if you come to the schedule appointment intent you can see that the phrase is like appointment for 5 30 p.m i would like to schedule an appointment at 4pm tomorrow so all of this is being captured through as training phrases and based on that we would also have responses which said great appointment all set at dollar date and time so this is the next part of it where dialogflow also allows you to capture key information so over here you can see that 5 30 p.m at 4 p.m tomorrow is all considered as entities so these are the main two concepts i don't want to dive deep into intents and entities in this session please do check out the previous session and we'll be doing more of intents and entities in the upcoming tutorials as well so just to save time and give you a quick recap system entities basically are provided by dialogflow built in and these entities extract key information as you type the information so i can type something like appointment at 6 pm and the moment i do that you can see that dialogflow automatically identifies the key entities or system entities in this case and it has identified this as a date time entity so now with that being said what you can also do is what if the user basically says set an appointment but you also have to capture this key information which is the date and time so let's see what happens in this case if i just say set an appointment you can see that the default response is when would you like to set an appointment so where did this actually come from so you can see that by clicking on actions and parameters you can make sure that this is a required field so this system entity should be a required field and the value of that is actually stored in this variable at this point you can always go and add a prompt over here we say when would you like to set an appointment so this is the same response that you get here so the key over here is to make sure that you gather the required information from the user if it is not provided to the user in one single statement you can actually ask step by step follow-up questions and extract that information and then send the response so if i say 6 pm tomorrow immediately it has identified it goes to the text response which is great appointment all set for the date and time so since i mentioned tomorrow it's automatically identified that it's on the 18th okay so uh feel free to leave your questions and queries in the chat window i'll be more than happy to interact with you all and let's make this an interactive session as well okay so this is what we kind of did in the previous session so we created an agent we have intents and entities defined to sim simply handle a simple conversation about setting up an appointment or a schedule an appointment and finally we talked about entities which are system entities you can also define custom entities now coming to the main integrations part so let me move to the integrations so in the previous tutorial we covered how to integrate the chatbot to google assistant we also covered how to integrate it with web data flow messenger that is create your own messenger bot and then we also touched up on facebook and for some reason we were missing a specific configuration we couldn't complete it due to lack of time so i just want to make sure that the steps for integrating it with a facebook messenger is pretty straightforward and simple we will be doing that today and finally today we'll also see that how you can actually integrate this into whatsapp now if you look at dialogflow integrations you have quite a lot of options available over here but the most important thing to notice note over here is you don't see whatsapp so how can you actually build this specific chatbot and integrate it to whatsapp so let's actually start with facebook so i just want to show you how it is done so the first thing that you need to do is go to facebook and create a page here you can see that i've created a sample page called chatpad chatbot demo and in the button i've just made sure that the button is edited to have a messenger so you can send messages over here now this is actually i'm viewing it as a visitor so this is what you guys would see if you go into this specific facebook page and let's see what happens when i click on send message you can see my previous messages over here but let me just type in hi immediately you can see that our chatbot has automatically responded it so if the chatbot was not active when whenever a user actually sends a message to your facebook page or your messenger what happens is you would get notified but you might not be available 24 7. so as a business it's very key to actually have this information available to you so the key information that the your users might ask from a marketing standpoint from a business standpoint from a startup standpoint you can handle those frequently asked queries and questions through your chatbot right so that is if at all you're targeting a wider audience across multiple geographic regions so your chatbot is technically ready and active for any number of users 24 7. so that's the beauty of creating chatbots now with that being said let me just go ahead and ask few more questions and you can see that it's also able to chat with me for small talks and if you kind of look back at what we did in dialogflow we never handle something like this how are you doing so if i say you are awesome thanks i try so these options are not available i mean i wouldn't say available these options are not designed by us we never designed it as part of our conversational design but where is this coming from so if you this was something that we covered in our previous session as well we kind of enable pre-built agents so as part of pre-built agents you can make sure that you can go and add all of these pre-built agents for handling different scenarios like setting alarms like coffee shop dining out food delivery flights faqs so if if your business or startup is into any of these categories you can actually use these pre-built agents as a quick starting tool to get started designing your conversations okay so in this case what we have enabled is small talk so the small talk was enabled and through that we are able to handle these small talk conversations so if i say thanks it's my pleasure to help so this is what we have in terms of a chatbot now let's actually see what was the missing step that we did as part of the previous session which was kind of uh important to get the whole chatbot up and running so we'll go back to dialogflow click on integrations and then from there you can always go ahead and click on messenger from facebook the moment you click on it you will see few key information over here and again dialogflow provides you with the steps to actually get your chatbot up and running so in this case get your facebook page access token and insert it in the field below create your own verify token click start below and use the callback url and verify the token so this callback url is actually generated by dialogflow itself what we need to provide is the verify token and page access token now since this is already provided that's the reason why this one is working and what how do we actually link both the platforms how do we link facebook with dialogflow so for that what you need to go do is go to developers.facebook.com so create an account if you have an existing account just click on my apps and what you need to do over here is create a new app so in this case we previously created this chatbot demo okay so we already created um an app in developers.facebook.com then we enabled messenger so if we go down to settings the missing step that we didn't have last time was under web hook when you enable web book you have to enter your verified token here right and then below that for your page for the page that you have uh your chat bot active you need to click on edit and subscribe to messages and messaging post backs okay so this is the the key important missing part that you need to have in terms of how you can capture these information again depending on the level of permissions that you need you can actually explore this information and then apply that based on your implementation so in this case let's go ahead and what i would like to do is just for the purpose of uh people who have joined us for the very first time i would like to actually do this entire process quickly and show exactly how it is done so we have our chatbot up and running as it is so we don't really need to design anything new in that so what i'm gonna do is i'm gonna stop this and i'm gonna go to the facebook page [Music] and just gonna delete this one [Music] so let's do everything from scratch so that we have a very good idea of what exactly we need to do so i'm going to go back to my apps and i'm going to delete this one as well okay so we have that application already deleted so if you are starting this for the very first time what i would do is go to your facebook page right go to pages and click on create a new page so once you create a new page what you'll have to do is provide some few information over here i'm just going to say chatbot demo 2. and for the category you can provide any category based on what your facebook page is all about and just go ahead and click create okay so once you have created the page you can decide to add additional information like images and cover photo i'm just not gonna do that for this demo i'm just gonna click on save and once you've saved it we basically have created our facebook page at this stage but next thing is we would like our visitors to actually interact with us through a messenger so to do that click on add a button and choose send message so in this case receive messages in your page inbox so you can see that we have added the messenger as part of as an option and over here you can also click on view as a visitor so this is what your facebook page would typically look like when the user visits your page for the first time and in this case let's go ahead and click on send message and send a message say hi and you would see that you don't have any response at this stage because we haven't integrated our chatbot to our dialog flow yet so what's the next step step one was to integrate uh was to create a facebook page make sure that the send message button is up there step two is to go to developers.facebook.com and create a new app so i'm just gonna click on create app manage business interactions click on continue and let's call this the same chatbot demo 2 app purpose and click on create app okay so from here what you can then do is now we've already reached to the page where we have to add products to your app so the product that we are looking to do is set up as messenger so click on setup and over here you can see that if you scroll down we have to generate access token so if you go back to dialogflow the reason why we need this is we need these two information the verify token and page access token so if you're doing this for the very first time these two fields would be empty so if you're using dialogflow and for the very first time you have created your chatbot you want to integrate it to facebook messenger when you click on facebook messenger this is the screen that you would see so over here you can see that by default callback url is generated but you don't have the verify token and page access token how do we actually get these two information so for that let's jump back into developers.facebook.com so we were under the messenger platform settings and click on add or remove pages in this case what you're going to do is choose the page that you want your chat bot to be integrated with and click on next so again you have submit for login review that's something that you need to go through as well but either way if you come back choose the page again okay manage and access page conversations in many messenger okay done so you have now linked chatbot demo 2 to facebook so what we have done right now is we've create we have basically associated our page to this specific application that we have created so in this case what the next thing that you need to do is generate a token so just click on generate token this token is generated for you and this is the token that you actually copy it in um your dialog flow so let's copy this information make sure that your tokens are always secure i'll be deleting this after this session so make sure that you provide the page access token to this specific field in dial-up flow now what's the next step we need to have some kind of a verified token and how do we link facebook messenger and dialogflow so the next step is now if you come down you have something called as web books so let's click on add callback url and over here you have a callback url which we are going to copy it from dialogflow and then we also have verified token so this is a string if you go back to dialogflow you can see that the verify token can be any string so you this can be your own string so what we can do is under verify token you can say chatbot demo to verify token and you can give it a unique string so what we're gonna do is come back here and click on verify token and verify and save let's start this over here as well chatbot demo to verify token and [Music] start this [Music] so come back here and click on verify and save now that you can see that a callback url is linked based on dial-up flow and we've also given the same verified token now the the step which is most crucial for your chatbot to work at this point is you have to add subscriptions or permissions on what what are the necessary capabilities of your chatbot so in this case go to add subscriptions and choose messages and messaging post backs click on save and finally once that is done that's all you need from an integration standpoint right i see a few questions coming through rob is asking can you get personal information about the person who's chatting with you on your page yes rob you can actually do that through apis you can also do that design it directly from your dialogflow agent as well so you can actually ask key information directly from dialogflow and get that information automatically to your backend so we'll be handling some of those things as part of the backend integration in our upcoming tutorials so stay tuned for that so now that we have done all the setup between facebook messenger and dialogflow let's actually go back to our chatbot so this is the facebook page that we created and let's see if if our chat would act if a chatbot is actually working so in this case i'm gonna say hi you can see that immediately we have our chat bot integrated into facebook we are able to get the responses that our agent is supposed to handle so it's greetings i can help you set an appointment so let me actually have an interaction with this chatbot i say i can okay i would like to set appointment tomorrow at 6 30 p.m so immediately you can see that great appointment all set and i can also say thank you so much and your chatbot replies back so here you have an instant response to your customers the your users who are actually participating in this chatbot experience would have a real-time interaction and get the information that they need in at a lighting speed so with that being said so this was the first integration that we would be covering for today and moving on from here we've tackled facebook messenger now how we can kind of take this a step further and integrate this with whatsapp now before we actually proceed with the whatsapp integration i would uh like to show you what that chatbot would look like from a whatsapp chatbot standpoint so here you can see that i've already created one and this chatbot is actually interacting with interacting with me based on the messages that i have sent and finally you can see that i've also disabled it for now so that you exactly understand how you can actually build the whatsapp integration from scratch so if i say at this point you wouldn't find a get a response back because i've disabled the entire integration so the next step is how can we actually integrate this and get this up and running because dialogflow by default doesn't offer you any solution to integrate with whatsapp so also keep in mind that in our previous session we did the telephony thing that has the same experience your chatbot experience you can dial a number and talk to the number and have the same experience and at the bottom we have text-based integration so these are all directly integrated with dialogflow now if you scroll down even further we have some open source integrations so in this case what happens is the integration part the hosting part is has to be done by you right so it's an open source solution so for if you're targeting let's say skype twitter viber or twilio you can actually follow the steps that's shown over here so in this case since we need whatsapp what i thought about is twilio is a platform that actually does integration with whatsapp so the best way to actually kind of build a whatsapp chatbot is through twilio so if if you're new to twilio twilio is a great platform where you can build uh messaging applications sms related so anything like otp and if you have to have messages automated everything is actually coming from twilio and again it does a lot more chile also does voice calls video call capabilities and a lot more so the first step that you need to do is in terms of integrations click on this twilio option and over here we need to actually go through some of these steps so by default this would open up github so if you actually look over here this would actually take you to a github repository now the main thing that you need to do over here is follow the step-by-step instructions and for this specific tutorial what i would do is i'll actually show you the step-by-step steps that you need to actually do so in this case follow the instructions in the main readme file so either you can click on this or you can actually go back to the main repository so if you're doing this for the very first time i would highly encourage that you do this but the beauty of this open source uh implementation is for all the platforms that fall under the open source implementation this main readme file will actually give you a base or starting phase to actually build something now each of these platforms that you're seeing over here over here has their own implementation so in this case we're gonna use twilio right now let's actually start this entire process so the idea is if you do not have an existing dialog flow agent you can set up one so we've already done that although it's possible to set this integration deployment on any hosting platform these instructions will use google cloud run so we'll be using cloud build and cloud run to actually host this entire solution so what is the first step that we need to do on the gcloud cli documentation page so again click on this this would actually take you to the document the documentation page click on get started and in this specific page depending on your os make sure that you select the os that you're using in this case i have windows you can either download it download the download the file exe file and install it just like how you regularly install applications in windows once the installation is done which is the cloud google cloud sdk setup once the installation is done you'll see a screen like this create start menu start google cloud shell and run google cloud in it to configure the cloud sdk so this step is already done from my end okay so if i go back to my desktop you can see that i have the google cloud sdk shell installed so this is how it would look like when you actually built once you install the application okay so let's see what's the next step now we've already done this you can also run gcloud in it so what would gcloud in it do is if you come here and type for if you're doing this for the very first time it will actually ask you to login to the gmail account or your google account that's linked to your project so for example for this dialog flow application i've created a test email called t9 so this is the account that i've built this entire solution with and that's the account that i've logged in using dialogflow as well so all my projects is actually being built using this account right and the project name of my dialogue flow agent is this so how would you actually find your project name so let's imagine that you you're in a scenario where you have multiple projects how would you identify that you're on the correct project or not so you can go to dialog flow click on this gear icon and over here under project id you will see what's your project id so this is your google cloud project id okay so you can make sure that this matches the one that you have that's showing up over here now in this case pick configuration to use reinitialize this configuration okay so let's type one and this is actually gonna make sure that our google cloud is actually connected to this specific email address so in this case choose the account you would like to choose i'm just going to choose one you're logged in as let me push it back yeah so here you can see you're logged in as this specific account now pick the cloud project to use so again over here you can see there's multiple crowd projects number two is the one that we actually chose so that's our project that we need to target so i'm just gonna hit two and that's done now you can also choose to update the components by typing the same okay so you can decide to update or not but you can all also make sure that while running this you can run it as an administrator so that's something that you can try again so for example instead of directly opening it you can right click and run as administrator so this would actually allow us to install certain things so for example if you want me to update the package or update the components and dependencies you can actually run with the administrator role so again for just to make sure you can just type gcloud init okay and click on one you can choose the account that you need so that's d9 so that you're gonna choose one and finally you can also choose the cloud project that you're associating it with so that's two this is the dialog flow agents project id okay so we are all good so at this stage we've done with the cloud shell sdk shell cloud sdk shell so what's the next step so we've initialized the project so if you go back to our github page you can also set run google config get value project to check the gcp project configure so this is another step that you need that you can do but we've already done this through we are sure that you know our project is actually set so in this case it's actually set as this one so that's perfect now go into dialogflow's agents and check the project id which we have already done if the project ids do not match so let's say you had multiple and you wanted to actually set it by command you can actually run this command and give the project id so in this case since our project is already set we don't we don't have to actually do this step okay now the next step is key it's it's very important that you need to actually set up a service account so what you can do is for integration to function properly it is necessary to create a service account in your agent's gcp project so you can actually see this documentation on how you can create a service account so in the cloud console if you click on this so always think about dialogflow project is directly linked to your google cloud project so whenever you create a project in develop flow you're actually creating a project in google cloud behind the scenes so if i make sure that if i come to the right account which is t9 here you can see that you can create a service account click on uh choose a project so i'm going to choose the project as this and you can choose a new service account okay and give it a name like dialogflow um agent a dialogflow api client or dialogflow client api okay and once you create a service account it will automatically create a file so let's actually do this i've already done this step and what i can do is i can create another service account okay i call it dialogflow client api demo and as part of the role you can give project owner so what happens is this service account has access to all the necessary services that's part of the google cloud as part of your account okay now the next step is once you create a service account you have to create a key so here you can see this json key would automatically be generated for us [Music] now again make sure that this key is actually stored in your computer do not share this with anyone so this is your private key and this allows you to use the cloud resources so store it securely so in this case you can see that it's automatically generated a json file which is now available in my downloads folder so you can click and if you at any point you would like to go and see what your service account is you can always go to apis and services sorry you need to actually go to i am so if you go to looking at i am yeah go to i am oh just search for yeah so here you can see that the dial up flow api client demo is available for us okay so the one that i previously created is called dialogflow client api as per the documentation so this is already created so this is the account that has access to all the cloud resources under this account so i hope that you guys understand the reason um we are creating a service account because this service account is in turn actually using permissions that's required to actually use the cloud resources from your account now that we have that setup what we will then like to do is go back and you can also make sure that you run this comment in powershell run this command and give it to the part of your key that you have just downloaded so the way how you can do that is you can open up a folder and go to the project that create a folder that you have and again or you can even do search for powershell windows powershell right click run as an administrator and over here you can actually go ahead and enter the information right so this specific command along with the key so my hyphen key is equivalent to this name the the file that was generated by a service key service account right so this json file needs to be added over here and hit enter i've also done this specific step so i'm not going to do that now the next thing that you can do is go back so we've created a service account so step one was setting up cloud gcloud cli we've done that step two was to create a service account and create a json file we have done that as well step three is deploying the integration now go into dialogflow's agent and click on project id to go to the gcp repository and also make sure that at this point you can go to the github page and download the zip right either you can if you have uh installed git in your environment you can just directly get clone and copy this url so this would automatically fetch all the code into your directory or you can just directly click on download zip which would then encapsulate this entire code and once you have that zip you can actually go and place it in a specific folder so in this case uh let me go to the folder that i have so this is the extracted zip file so extract the zip file and once you extract the zip file you'll find a folder like this so this is exactly the same code that you see in your github account right now while you're here [Music] you can either open up um this entire project in a code like visual code so what i'll do is i can just shift and open powershell window here right so once i am here i can also open up code type in code dot to open up visual the open up the entire project in visual code or you can also make sure that you can open up any ide of uh that you're using and then open this entire project up okay now within this folder you can see that we have within this project you will see the two files that you need to work with is docker file and server.js5 right so in the docker file what you need to make sure is what is the environment that you're targeting so in this case the environment that we are targeting is twilio which we have done that now with twilio being set up open up server.js so again server.js is available here under server.js you need to provide the project id the phone number account sid and odd token so these are the four key information that you need to provide to connect your twilio account with this solution right so if you look at the project id it is the same project id that we have got from the dialog flow settings page then how do we get the remaining if you look at the remaining information it's phone number account sid and ort token so to get these three information we need to actually go ahead and create a twilio account so feel free to go to twilio.com so i'm just gonna go to twilio.com and sign in with your accounts so sign up for a new account so in this case i'm just going to log into the one that i've already created and once you sign up for an account you would be actually in the dashboard in the dashboard what you would then see is your account as id so this is the same account sid that you need to copy and paste it in the server.js file okay and then for the odd token you can basically click on view and copy this information and then paste it in the auth token as well now from a coding standpoint i promise that this is the only setup that you would actually need to do so open up this docker file target the implementation that you need in this case we are targeting twilio so just put twilio over here and in server.js file enter the project id and the account srd and auth token now for the next step for the phone number you need to actually buy a phone number from twilio now again you can actually do this with your twilio trial account now if you come back to this three dots on the left side navigation you can go to four numbers and you can actually buy a phone number okay so you can click on buy a number and choose the number that you'd like make sure that you have capabilities like sms and other capabilities like voice calls and other things depending on your uh solution that you're targeting now in this case i've actually created a number or bought a number so this what it is and then what's the next step to do is now that you can copy this number and come back to your server.js file and paste that information on the phone number that's it so in terms of configuring twilio with the solution we have actually done the configuration steps so what's the next step so let's go back to the documentation the next step is to deploy the integration how do we deploy the integration make sure that you have enabled billing first so the way how you do that is you can always go to dial up flow or you can go to console.cloud.google.com and click on or click on this google cloud icon make sure that it's opened up with the right account so if you have multiple google accounts make sure you switch to the account that you're actually working with and finally with that being said once you come over here under billing you can make sure that you you have enabled building okay so in my case i've already done this and also keep in mind that as part of creating a new google cloud account you have 300 of credit for worth of 90 days valid for 90 days so again it's not going to be charged on your credit you decide when to actually go ahead and enable that option okay so now that we have billing enabled what is the next step that we need to do so enable cloud build and cloud run api for this project so you can click on this link which would open up a page where it will ask you to enable google cloud run and build so again for this step i've already done the same thing so when you're doing this you can choose the project that you want register your application for cloud build api cloud run admin api in the google cloud platform you can choose choose the project that you want and you can click continue so once this is enabled the next thing that you need to do is clone the repository which we have already done when when it says clone the git repository is the one that we did so either you can use git or you can download the zip and put it in a specific project folder of your choice now if you go back the last step that you need to do is then open the root directory of the repository on your local machine okay and then we've done this so the docker file integration we've con change this to twilio which is again over here and then the next step is go to platform specific instructions in this case since we're using twilio you can directly click on this and see what needs to be done over here so again i've already covered all of these topics so you need to create a twilio account which we already did replace the values of the project id in server.js which we did and all of the information which is required is already shown here now the key information that we need to do next is to bundle this entire code and host it right so the way how you can actually do this through serverless implementation is you can just open up your run the following command okay of your repository into gcp container registry and replace the project id with your listing so what you can do is copy this command once again open up cloud shell i'm gonna do that again so i'm just gonna close everything so that you guys can see how we can do this so open up powershell or command line make sure that you run as an administrator okay now with that being said i'm just gonna switch to the project folder that we have this repository or our code so in this case it's gonna be projects [Music] and if you look at where we are it's dialogflow integrations master make sure you come to this folder okay okay so now this is the folder that contains all of our code right and from the root directory which is this we need to run certain commands so the first command is gonna be targeting the cloud build so we're gonna copy this and paste this command over here and instead of platform you're just gonna type in twilio and for the project id again it's easy you can always go ahead and copy it from dialogflow perfect so that's all that is so that's this step one okay so now the first command is done you go back while that's actually going on in the background the next step is to actually run the second one so deploy your integration to live using the following command so copy this entire command again so once this operation is done again let's make sure it's clear once again if you have any questions or queries make sure you leave them in the chat section i'll be more than happy to answer that while these comments are running okay so our first statement is successful now we've created our entire thing into a google cloud container registry and now the second command that we need to run is this one and now for your key file you do not have to enter the path all you have to enter is the service key so if you come over here under twilio you remember the json file that we created make sure that it is actually placed in in this folder and just copy this so this json file if you're not if you have any confusion in regards to this this is a json file that we actually downloaded or created when we are creating a service account right so just copy this [Music] and go back to your command and paste this and put dot json now that's the google application credentials now the next one is we need to target our platform so in this case instead of dialogflow platform i'm gonna put dialogflow twilio so that's also done and the last step is also replace project id with the project id that we have so in this case go back and copy this and paste this over here so once you're done with that it will ask you for the target platform choose number one that is cloud run fully managed specify the service name so over here you can see by default dialogflow julie is already chosen so you can just hit enter also target the region so specify a region so you're gonna target u.s central one so you can type in 18. okay and allow an authenticated in invocations to dial up for twilio press y and this is actually deploying the container to cloud run so cloud run will basically host this entire solution your code and it will basically act as your dialog flow agent of your own implementation with your own implementation so this is actually running in your own cloud so compared to other implementation where we had direct integration with dial-up flow uh platform here you are actually having an open source solution where you actually built the entire thing directly into your own cloud solution so now that we have the entire thing up and running you'll find a service url so this is the key information that we need so copy this information from here okay and all you need to do is go back to twilio now this is where we start linking things right as of now we've hosted our solution now we need to start linking our twilio account and whatsapp and dialogflow as well so if you're looking to integrate whatsapp click on these three dots click on programmable messaging and over here what you can then do is under this option called try it out click on this you'll find try whatsapp so click on try whatsapp and this would again help you kind of configure your whatsapp account to your twilio so in this case what you can do is make sure that the the number that you have created in twilio you can just directly add it to your contacts and send this message so i'm just gonna type in join green upward right so this needs to be sent from the your mobile number so in this case i'm just going to go back here and type in this join green upward so you immediately you can see that it's activated the twilio sandbox you're all set the sandbox can now send and receive now if you go back to twilio you can also see that the message is received right so what's the next step how can you configure the callback url now you can click on try out the different options finally the most important thing is configuring your sandbox so when you click configure your sandbox you'll have to specify your when a message comes in what is the url that you need to target and what is your status callback url what you can then do over here is this is the url that you actually get from here so what you can do is copy this information from here and paste it in these two windows so when you're doing this for the very first time you'll see a default demo url so make sure that you copy this information over here so that's it so from with just doing that we have basically uh configured our chatbot right so if we come back we've configured everything that's as part of the configuration steps now the phone number in the phone number section go to active numbers click on purchase and you can also go and configure that information over here right so when the message comes in you can type in the same configuration now with whatsapp being configured let's actually go ahead and give it a shot and see how our application is interacting with dial-up flow and whatsapp so if i say hi so for the first time it would take in few seconds for the chatbot to kick in you can see that previously when i said hi before activating this entire solution you don't get any messages but now with our entire setup once it is done you can go ahead and see when you type in a message it's able to pull the information directly from the dialogflow agent that you have created wonderful so that's how easy it is to actually kind of connect of course there's some configurations that you need to follow hopefully through this video it's actually helpful again we're not going to stop here we have multiple sessions following up and every tuesday we call it tech tuesdays so if you're new to the channel if you like the contents that you see make sure to like the video as well as subscribe to the channel and also make sure to hit the bell icon so that you can be notified for future videos now let's actually interact with our chatbot and see how it's working at this point so say about let's say i would say set an appointment i'm not i'm not gonna give it any information let me see if the chatbot is able to ask step by step questions when will when would you like to set an appointment great so i would say tomorrow at 6 00 45 pm great appointment all set so i can say thank you so much [Music] okay so that's how you integrate dialog flow with facebook messenger as well as dialogflow with whatsapp now considering the fact that you're just trying this and trying this out you would like to you've already hosted something on google cloud but you don't want your google cloud resources to be eaten up because you know people are chatting constantly with this or at any point you would like to bring down the entire solution we have steps for that as well so if you go back to github and if you go to the very bottom you can also see post deployment shutting down and integration if at any point you would like to do this you can open up and run these comments as well so let's actually do that i would like to also show you how to shut down the entire thing so that it saves up on your cloud resources copy the first comment and again as usual you can run this in powershell [Music] [Music] please choose the target platform we choose one and again specify right so we've already done this to specify platform yourself we don't need to do that we've have one solution over here now with that being done so we just the first command basically lists the running services now the second command over here will basically bring down the entire thing so it will delete that cloud on service so if you go back to a command line and instead of service name over here you can just copy the one that's being listed and hit enter again choose number one choose the region so your central one do you want to continue yes and our service is deleted now at this point since our service is down it's deleted it's no longer running if you go back to your whatsapp and try interacting with your chatbot you wouldn't receive any response because there's no service which is actually listening to your messages so i hope this was actually helpful for you all once again i would highly encourage that you all have a look at the first session uh the previous week's tutorial so i call this the ultimate chatbot tutorial series so make sure that you guys join me next tuesday similar time and also follow me on twitter all the information and the links will be provided in the description below so with that being said once again thank you all for joining today's session my name is sachin and see you all in the next one

Channel: TECH WITH SACH

Views: 15,383

Rating: 4.8833818 out of 5

Keywords: Create a Facebook and Whatsapp Chatbot using Dialogflow, create a facebook messenger bot, create a whatsapp chatbot, create a whatspp chatbot using dialogflow, how to create a facebook messenger chatbot for free without coding, dialogflow integration with facebook messenger, dialogflow integration with whatsapp, dialogflow integration with twilio, how to, build your own chatbot from scratch, whatsapp chatbot, machine learning, chatbot tutorial, scratch, beginner, 2020, tutorial, twilio

Id: bccFFjk76IA

Length: 70min 40sec (4240 seconds)

Published: Tue Nov 17 2020