Easiest Way to Connect AI Chatbots to WhatsApp

34.54k views4977 WordsCopy TextShare
Dave Ebbelaar
Let's build an AI chatbot with Botpress and connect it to WhatsApp. There are no coding skills requi...
Video Transcript:
let's build an AI WhatsApp bot in about 30 minutes or so without writing a single line of code so throughout this video I'm going to walk you through a step-by-step process in which we're going to use the botpress platform to build an AI WhatsApp bot connect it actually to WhatsApp and being able to send text messages to it via your phone and get AI replies now the use case that we will be going over in this video is the example of an Airbnb sabot now we're going to use this as an example to show you
how you can make a document available to an AI and then use this whole conversation flow to answer questions about this all right so I'm now going to walk you through the entire process to build this bot in bot press from scratch so I have a document over here with all the steps that we have to go through which I will also make available for you so let's get into it and we will mainly be switching between the botpress platform and The Meta developer apps So Meta formally Facebook owns WhatsApp and we have to set
up some configurations there as well so I've outlined it in the document we'll be switching back and forth but let's start by creating a botpress account if you don't have one already so if you follow the link either in this document or in the description you can come over here to the botpress webbsite and you can already see kind of what they're doing how they have created a very visual Builder a very intuitive way of putting these Bots together and it's um it's really fun and nice to work with so if you don't have an
account sign up and then log in which will eventually bring you to your workspace where we can start to build a bot now I already have one here but we will create one uh completely from scratch so let's come over here and first start by creating a new bot so there we go we can now come over here we have comfortable Nightingale and let's change that name to something more descriptive so this go this is going to be the WhatsApp Airbnb chatbot all right let's save that and come over here to edit let's open it
up we can either start from a template but for now I'm going to start from scratch use the template so there is some in here but I'm just going to delete all of that start completely from scratch so we only have a start and an end note so this is the botpress Builder and I'm going to walk you through the elements that we need so we have a start note and an end note and in between we're going to build our conversation flow what we can do is we can come in the conas over here
and write click and put in a standard note over here and we can literally just visually come over here and connect the start uh to this note over here and now decide okay what is the action that the put should take over here so so we can for example add a card and we can put in a text message over here so we can for example say hi there and now let's create a very simple one uh and just connect this to the end and so we have a very simple flow where if we start
with the conversation the bot says hi there and then we go to the end now the cool thing about bot press as well is that they have this emulator function so we can already start to experiment and see what the bot is actually doing straight from the UI over here with without having to configure any connections for that so if I now also say hi there to the bot we should see that the bot should respond to us with hi there as well based on what we've described over here then it ends the workflow so
this is now uh a completed Loop so from start to end so you can see conversation ended this is of course a very simple setup but this is really the start and what we can now do is we can now come to the WhatsApp integration and first make sure that we have have that connection going back and forth so that we actually get a message on our phone and then we can implement the AI stuff later so with that out of the way let's come back to our document the final step is we have to
make sure that our bot is published so let's see come over here big blue button publish thebot so we can now come back to the dashboard and see what that actually looks like and for now we can continue with the next steps so now we have to go to the meta uh Developers platform where you met a developers account so again for this you either have to uh first sign up create your account or if you already have one you can just follow this link and come to your apps so this is developers. face.com and
then slaps so here you can see the two Bots that I was already working on so we have one uh in Python that I created uh in a different video and here's the one that I used for my initial test experiments but let's again do this from scratch follow the instructions and now create an app and now there are some steps that you have to follow over here we have to start with create app other business then we have to name your app and then select the WhatsApp integration so let's see what that looks like
if we come over here create the app and we first select other over here we go next we select business then we're going to name this one and call it B press Airbnb bot demo then you have the contact email over here and then you can select the business account but that's optional over here so I'm going to leave that empty and we're going to say create the app and here we can add products to our app so here you can see that for example there's also an integration for for Instagram which is also owned
by meta but for now we'll do WhatsApp so let's click on that so then I'm going to select my business account here which I'm going to put under data Lumina and then I'm going to continue all right and now we have set up our meta app and have added WhatsApp as a product so let's now come back to the steps over here that's step four and five completed we have to go back to botpress go to the integration and then click browse in Hub so let's see what it looks like we come back over here
to our app make sure you selected uh or your you're your Bot I should say and then we come over here to the Integrations because now we are going to configure the connection so here you can find all of the Integrations that botpress already has out of the box and this is just what makes botpress even more amazing because as I've experimented in my previous video setting something up from the ground doing it from scratch is so hard so building the chatbots the AI chatbots is not even that hard even if you do it completely
from scratch but setting up the Integrations and having like a two-way communication that is just a lot of work and botpress makes this very very easy so let's see what it looks like if we choose WhatsApp so you can see an overview over here from all the different functionalities that we can use so we can use choices dropdowns cards so this is all very cool so we can use it actually within WhatsApp so click on the button here to install it to your chatbot and then once we have the configuration set up we can come
back to our dashboard and then we can come to the Integrations and you should now see what app over here all right so let's come back select WhatsApp browse project okay this is probably the hardest part that we have to set up right here because now we have to do some configuration back back and forth but bear with me so we're going to set up first a verification token and this is a string that you can select so you can for example put 1 2 3 4 5 in here it doesn't really matter as long
as you remember this one all right so that's the first one now let's see now now we have to get our access token from The Meta app dashboard so you can come back to your meta for developers apps you then come to the API setup and there you have to copy the temporary access token over here so copy this one and please note this token will expire within 23 hours so this is for testing purposes if you set this up today and you come back tomorrow um it won't work anymore and you have to set
this up I will leave a link to show you how you can actually create a permanent token to uh but this is great for testing purposes all right so we copy that one then come back over here put in the access token and then we have to put in your default phone number ID for starting conversations now and this should be your test phone number So Meta creates this number automatically for you and here you can see it your test number so you should have that if you followed all the steps up until now and
then you also have your phone number ID over here and that is the number we need so let's copy that one click on here then come back to the setup part and put in the default phone number ID all right so now we're going to save the configuration over here and now so this was the setup on the bot press part but now we have to do one more thing to make the connection also on the meta site so we follow all of this we save and now on the same page copy the web hook
URL so come over here and copy this web hook URL so that is this bot press part completed now we go uh can continue with Step 11 let's go back to your meta app uh select configuration and then edit the call back URL so come over here configuration and then we're going to uh edit the Callback URL so come over here put it in and then say one two 3 4 5 1 2 3 4 5 okay and then I have I have to do one more thing I have to enable this integration first and
save it so I forgot that so it should be live so that means that this URL is now accessible and we can send some information to that and we need the verification token of 1 2 3 4 5 and if that is all correctly set up and we do it in here we should be able to verify and save so let's see if that works all right so that went through and we can now let's see we p that in verify and save okay now one more thing that we have to do for this webbook
setup we have to select what kind of events we want to subscribe to so this will get um or it's very straightforward but in terms of how this works can get a little bit technical but because the web Hook is basically listening and everything that happens all kinds of events that happen on WhatsApp we can send it to this URL so here you can see we have account alerts riew update account update we have all kinds of things that we can do but for now we only wanted to subscribe to messages and that essentially means
so we now can click on we can make sure that the check mark is here under subscrib click done so now essentially what we do is we want to send a message to the Callback URL Whenever there is an incoming messages on WhatsApp so this literally means if we send a message to the bot so from our side to the WhatsApp number then this whole system will get a ping and that is its initial start to start processing that information and to eventually create the AI response so a little bit of a technical background on
that how that works but yeah it's pretty straightforward to set it up so step 14 is now completed and now we can go back to the API setup and okay so this is where we can almost test the integration but we of course also have to put in our own phone number first to uh to to validate this because since this is still in a test setup a test environment let's come over here we have to widel list so to say our own phone number so this is a test phone number and this is not
a number that everyone can send messages to so this is not a public number we have to specifically indicate which phone numbers are allowed to send messages to this number and uh I Believe by default you get five numbers that you can add but you start with your own number of course so what you now have to do is you come over here so back to the API setup and then you select the two field over here and if this is your first time there should not be a number over here and you can come
to manage your phone numbers so what you can then do is add phone number and select the country codes and then put in your own phone number over here whatever that may be and then once you click next you'll get a verification code and this code will be sent to your phone but on WhatsApp so not within your text messages like you normally get but this is through WhatsApp so the phone number that you use should also be a number through which you have access to WhatsApp so please note that all right so then if
you do the verification your number will then show up over here and you can select it now the only thing that we still have to do is send a test message so select your number over here and then click Send message now this can take anywhere from 60 to 120 seconds is really what I've what I've found so I'm going to get my WhatsApp over here all right and there we go we now got the template hello world message so um if you get this message congrat congratulations then it means that you followed all the
steps correctly up until this point and literally this was the hardest part everything that comes after is is pretty straightforward because what we can do right now is we can send a message for example let's say hey to our bot and since the connection is already live and we have published our app we can see hey there we get the response that we programmed within our very complex chatbot over here all right so again congratulations if you managed to follow everything up until this point um and got the message back the high there let's now
get into the actual AI part of this bot so I'm going to provide you with an fhq document in which there are very qu various questions and answers um about a hypothetical Airbnb in Paris so this can be a very cool use case if you're for example the host of an rbnb and you don't want to answer the same questions over and over again about like what's the Wi-Fi password what when is the check-in time we can just hand that over to a bot but remember this is just one example and you can very easily
swap out the document for something completely different or and create your own use case and you will have a completely different bot the setup and the process is all the same all right so now let's make make our bot a little more interesting than just being able to say hi there so let's come back to our bot press workspace and come to our chat bot and click on edit so we'll open up the editor again and let's see what we can do over here now let's come over here and see what we can do so
bpress has a lot of functionality but I'm going to show you the very Basics like I've explained in the introduction where we can answer questions BAS based on this fhq PDF for a hypothetical Airbnb in Paris so we have various QA pairs over here and when people that are visiting the Airbnb want to know for example is smoking allow what's the what what's the Wi-Fi password Etc they can ask the question via WhatsApp to the bot and the bot will reply based on this information so this is a very common use case that you can
use AI for especially with WhatsApp so this also ensures that the AI has uh access to factual information and it's not just you talking with CET GPD for example which is also very nice in some cases but it misses the context specific information that you need to make these applications useful let's see how we can do that and first we have to provide that PDF to our bot and we can do that with the default knowledge base selection that we have over here so we can click on plus and we can say hey we want
to add a document but you can see you can add much more you can do a website search a web text document but let's do a document come over here and you can see PDF HTML txt doc or docx so we have a PDF so let's come here drag it in and again I will make this available for you the Airbnb fhq let's confirm this and it will now process all of that it will take some time couple of seconds and we now have have this fhq available within our environment now let's come back to
our main workflow and show what we can actually do with this let's make the bot a little bit more personal to start with and let's put a text field in here and let's see let's start with hello I'm here to help you with all your questions about your stay in Paris so if we now come over here and we say hi the bot will say this and then it will immediately end so end of the conversation so that is not uh very helpful so let's put in a another note and now this is where we
actually get into the the building of your conversational flow so let's just link it up and say hey we first want to start we want to have a welcome message and then we want to do some stuff in here and then eventually it's okay to wait let's let's actually wait with the end we first want to identify what we can do in here so so now if we add a card what we can do is we can put in raw input and why is that because that can map the message that the user just sends
so if you send a message to Whatsapp you will get the Hello message and we can capture the raw input and now what we can then do with that is we can uh enable the answer questions from knowledge base and here you can say select uh in all or search in all knowledge bases but you can also select uh which one you want to use and here you can say this is the default one already so let's just put it on so you can also rename this so actually this should be the Airbnb fhq you
can also put multiple uh multiple documents or items in here so just for the sake of clarity put it in here make sure that that is so we can now see so that is the Airbnb fhq we only have one so that should be good all right so we take the raw input we can have a question over here so what uh do you need help with for example let's put that in here and then uh what we can do let's see let's first just go straight to the end so let's see what we have
right now if we rerun this and let's say hi there so user comes in says hi there all right so we get first the welcome message and then is it what do you need help with and then for example let's say what's the wifi password so let's see all right and there we go we get the Wi-Fi password over here we can look that up in the document to see whether that is actually correct come over here and here you can see it matches what is in the document so that is perfect and now the
conversation ended so this is just a one-way stream or conversational flow where users can ask one question so that is still not very helpful chatbot so let's add a little bit more functional it and make it a little bit nicer like what can I help with and then what we can do over here is we can uh add another card and we can do a multiple choice over here so let's scroll down select multiple choice and then let's get the end over here and then what we can say is do you have another question and
then we can say either yes or let's add one more we can say no and this should not be a knowledge based answer this is just a way to configure the flow of the conversation and now what we can do if the answer is no we can just end it okay that's all good but if the answer is yes we can Loop it back to this same node again so now what we've essentially done is we've created a loop where users can come in they get the welcome message and then they can ask questions and
then based on if they have another question yes or or no they can just fill that in again and they will come over here so let's see how that works let's come over here let's reset this start the flow again and let's say hi there we have the greeting message what can I help with again what's the Wi-Fi password and there it goes so it gives the answer but then it immediately goes to the multiple choice do you have another question and then if we say no it will go to end conversation if you say
yes it will loop back to what can I help with and we can for example ask is smoking allowed and then we get the answer smoking is strictly prohibited and then we get another question so you can see that we have now set up this Loop and for example we can now say no and this will end the conversation that's all good and well now we can uh prompt the conversation Again by just sending another message so we've created a very basic but already very powerful flow that has access to this document can ask answer
questions until uh the user doesn't have questions anymore and rinse and repeat all right but now of course this was all in the browser and now we of course want to test does this also work within WhatsApp so for that we first have to publish the bot so make sure you publish that and that will push all of your changes to the live version of thebot so let's wait for that to finish and then in the meantime I can come over here and go to my WhatsApp so we can now see bot is published successfully
um I open up the conversation again with my test number and you can also by the way rename that number so I've uh renamed it to airbn bbot and now I can come in here and let's say hi there and let's see what we get as a response and there we go hello I'm here to help you with all your questions about your stay in Paris what can I help with uh let's see when is the check-in time all right so it takes about two to 3 seconds for it to process everything and then it
says checkin time is after 300 p.m. do you have another question and now this is what's really cool out of the books WhatsApp supports a lot of like functionality where you can do multiple choice uh selections all of that so here now on the screen I get just the option to say yes or no so do you have another question I say yes and then you immediately reply with that and then it should trigger the loop again what can I help with let's do another one let's see what's in there for the sake of demonstration
restaurants can you recommend a restaurant so let's just check can you recommend a restaurant see what it will do and there we go we get a lot of good recommendations from the B itself do you have another question let's say no to end the conversation then we don't get a reply uh so it leaves it at that and then we can just prompt the bot again by uh sending another message press so I've shown you all the steps now this is of course a very simple bot and there is a lot more that you can
do so you can really come in here start with different notes and you can look at all of the cards that they have in here so we can execute code we can get data images files we can do a lot of cool things in here but that's not for this video like I said if you want to learn more about that make sure to check out bot press's YouTube channel uh dive into the documentation or tutorial videos uh but this really I would say is the hardest part to get that end con end to endend
connection going and once you see and have that working um now you can really start to get creative with this and just build cool applications and now of course this is all using a test number so this is now not actually live you can only send messages to this with the wide listed numbers but if you eventually want to publish this you should come over here and then add a phone number uh which you can either use your own phone number for or get another phone number and then you should come back to the Integrations
so then you would have to fill in that phone number ID over here so that is if you really want to take this from from test to a real real phone number you would have to go through this process again uh but that's not for the scope of this video all right and that's how you build a AI WhatsApp bot using botpress so that whole process took like 30 minutes or so I think if you if you follow through with all the steps compared to literally two days of grinding and research to build this using
a custom solution with python so a platform like bpress is really ideal if you want to like set yourself up for quick prototyping quick testing or if you don't have the coding experience to build a custom application of course so I'm definitely going to experiment more with the botpress platform and if you want to do so too if you want to if you haven't already checked it out and followed along make sure to check out the link in the description you so you can sign up for botpress and start building your own Bots either deploy
them or Whatsapp or any of the other plenty of Integrations that they have on the platform and that's it for now thank you all very much for watching if you found this video helpful make sure to leave a like as well and of course subscribe to the channel so you can stay tuned for more videos on artificial intelligence and data science um that's it for now then I'll see you in the next one
Copyright © 2024. Made with ♥ in London by YTScribe.com