How to Build a WhatsApp AI Chatbot in Minutes Using Flowise

17.4k views3395 WordsCopy TextShare

Leon van Zyl

This has been a highly requested video. In this video you will learn how to create and integrate an ...

Video Transcript:

Are you ready to bring your AI chatbot directly into WhatsApp? In this video, I'll show you how to build a no-code chatbot with Flowwise and seamlessly integrate it into WhatsApp for instant access. Today we're taking chatbot development to the next level by integrating it directly into WhatsApp.

Whether you need a single conversational bot or an advanced AI-driven solution, Flowwise makes it super easy. There's no coding required either. By the end of the video, you'll have a chatbot that not only integrates into WhatsApp but also remembers past conversations and allows you to monitor interactions for continuous improvement.

Let's get started. There are two ways in which you can access Flowwise in the cloud. The first option is to sell flowwise and I've already created a video on deploying Flowwise to Reindeer, and you'll find a link to that video in the description.

Alternatively, you can sign up for Flowwise Cloud. This is a paid service, but if you sign up now, you will receive a free trial period. And if you use the link in the description, you will be supporting my channel as I will receive a small commission.

After clicking my referral link, you will be taken to this sign-up screen over here. Simply sign up with GitHub, Google, or your email address. There will be a short wait for your instance to spin up, but afterwards you will receive access to the Flowwise dashboard.

If you're new to Flowwise, you can use it to create all sorts of AI applications, whether you want to create simple conversational chatbots or advanced multi-agent applications. So if you would like to learn more about Flowwise, then I highly recommend checking out my full Flowwise playlist on my channel. First things first, let's switch over to dark mode as this white background is blinding me.

Then under chatflows, let's click on add new. Let's then click on save. Let's give our flow a name, like WhatsApp chatbot.

We can use Flowwise to create some advanced chatbots, but for this tutorial, we'll just create a simple rag chatbot that can answer questions about our business. So for my business, I created this simple FAQ document in Word that simply contains questions and answers about my business. And what we want is to create a chatbot that will be able to answer questions about our business using rag.

Let's start by adding a new note to the canvas and let's add an agent. And under agents, let's add a tool agent. Let's add an AI model to this project by clicking on add notes.

Then under chat models, let's add the chat open AI node and let's connect this model to our tool agent, like so. For this chat open AI node, let's go ahead and select our open AI credentials. Then let's select our model by changing it to GPT 40 mini and we'll change the temperature to 0.

7. We want our assistant to be able to recall information from the conversation history so that the user can ask follow up questions. For that to work, we need to add a memory node.

Let's go to add nodes, then under memory, let's add the buffer memory node and let's attach it to the tool agent as well. For the tool, we will add a retriever tool which will allow the agent to fetch information from a knowledge base. So under tools, let's add the retriever tool and let's attach this retriever tool to the tool agent as well.

Let's give the tool a name like restaurant info. For the description, let's say use this tool to fetch information about the restaurant. This retriever tool takes in a retriever as input.

So let's go to add nodes, then vector stores and let's add the in memory vector store and let's attach it to the retriever tool. Then this in memory vector store requires a document as well as an embeddings function. Let's start with the embeddings function.

So under add nodes, let's go to embeddings and let's add the open AI embedding node and let's attach it to the vector store. For the embeddings node, let's also select our credentials and I'll leave the model as the default value. All we need to do now is to attach our knowledge base to this document input.

Now there are many different ways to add information to the vector store. First, under add nodes, you can go to document loaders and view all the different integration options over here. So you can add pdf documents, plain text, word documents, you can scrape websites, etc.

But what I prefer to do is to go back to the dashboard, then go to document stores, then let's create a new document store. Let's give it a name like oak and barrel. Let's click on add, then let's click on the document store that we just created.

Let's click on add document loader. Now I'll select the file on my pc, then under text splitters, let's select the recursive character text splitter. Let's change the chunk size to something like 400 with a chunk overlap of 50 and let's click on preview chunks.

Right, and we can see that the document was chunked into 13 smaller documents. Let's go ahead and process this. Fantastic!

We now have a super simple way to manage our knowledge base. If we wanted, we could add additional document loaders to this document store, but this is all I need for now. Let's go back to chat flows, let's open up our chatbot, then let's go to add nodes, document loaders, and let's add the document store node.

We can then select the document store that we just created, and let's attach this document store node to the vector store. Great! We're actually done with our chatbot.

Let's save it. After saving the flow, you will notice this green button will appear, and this will allow us to upsell the data from that document store into our vector database. We only have to execute this once.

Let's click on upsell, and we can see that the 13 records from the document store were now loaded into our in-memory vector store. We can now test out our chat, so let's ask it something about the business, like what are your specials? And we do get this response back, and we can see that there is the round info tool was indeed used to retrieve that context.

Now that we have an awesome chatbot that we can run with inflow-wise, we now want to move on and integrate this chatbot into WhatsApp. That's why you came here after all. So let's go over to developers.

facebook. com, and let's click on My Apps. You will need to sign in with a Facebook account, and afterwards you should see a dashboard similar to this.

Let's start by creating a new app. On this screen, you will be asked to select a business portfolio. When this is your first time running through this process, you won't have any business portfolios in this list.

But in order to use WhatsApp with this application, we do need to create a business portfolio. You might see a link on the screen that will allow you to create a business portfolio, but if you don't see anything like that, then you can go over to business. facebook.

com, and on the left hand side, click on this drop down, and then click on Create a Business Portfolio. After you've created a business portfolio, you can simply refresh this page, and you should see your business portfolio show up in this list. Then select your business portfolio, and click on Next.

On this screen, let's click on Other, and let's click on Next. On this screen, let's click on Business, which will give us access to WhatsApp. Let's click on Next.

Let's give our app a name, like Flow-wise Chatbot, enter your email address, and again, select your business portfolio. Let's click on Create App. Great, we're making good progress.

On this screen, find WhatsApp, and click on Set Up. From this screen, you can either click on Start Using the API, or on the left hand side, click on API Setup. This screen might look intimidating, but I promise you, it's not that bad.

We will use this access token in a minute, but when we scroll down, we can see a From number, as well as a To number. The From number is the mobile number that your users will see when they receive messages from your chatbot. Then the To number is a test number which we can use while building this application.

Initially, when you click on this drop down, you won't see any numbers here, and to add your number, simply click on Manage Find Number List. Then enter your phone number, and then the rest of the process is quite simple. Once you've added your number, simply select it from this list, and if you click on Send Message, you should receive this Hello World message to WhatsApp, indicating that it is working.

But of course, if we send a reply, nothing will happen. Now let's have a look at how we can receive messages from the user, and send responses back to the user as well. For this, we will use Make.

com. You will find the link to Make. com in the description of this video, and if you use that link, you will be supporting my channel as well.

We will use Make. com to effectively glue Flowwise and WhatsApp together. Go ahead and sign up for a new account, or log in.

After signing in, click on Scenarios, then click on Create a New Scenario. Then let's add a new app by searching for WhatsApp Business Cloud, and let's select Watch Events. From the webhook, let's click on Add.

Let's give our webhook a name. I'll just call mine Flowwise YouTube Tutorial. Then under Connection, click on Add.

Then give your connection a name. Again, I'll just call mine Flowwise YouTube Tutorial. Then for the permanent token, go back to Meta, then copy the temporary access token, and paste it into this field.

Then for the WhatsApp Business Account ID, let's copy the WhatsApp Business Account ID from over here. And let's paste it into Make. Let's save this.

Let's also enter a verify token, and this can be anything you want. I'll just call mine Flowwise. Under Events, let's listen for messages, and let's click on Save.

Now let's copy this webhook that was generated, and let's go back to Meta. Then let's click on Configuration. Within Configuration, we can now paste in that webhook URL, and let's enter the verify token, which I called Flowwise.

And then let's click on Verify and Save. Within the webhook fields, scroll down to Messages, and enable this toggle over here. This is all we have to do to start receiving messages from WhatsApp.

Let's go back to Make. com. Let's click on Run Once.

Make is now listening for messages from WhatsApp. So let's go back to WhatsApp, and let's send any message. I'll just send Hello.

And if we go back to Make, we can see that we received the message. And if we go to Messages, and let's scroll down within Messages, let's click on Text, and here we can see the message Hello. Now that we're receiving messages from WhatsApp, we can now do a whole bunch of cool stuff.

As an example, let's send a hard coded response back by adding a new module. Let's click on WhatsApp Business Cloud, and let's click on Send a Message. Select the connection that you created earlier.

And for the sender ID, we'll select the test number. And for the receiver, let's click on Messages. And let's add the sender phone number.

Let's scroll down. And for the message type, let's select Text. And for the body, I'll simply enter Hi, how are you?

Let's save this. Let's click on Run Once. Then back in WhatsApp, let's send Hi.

And look at that. We received the response from Make. Great.

Now what we want to do is pass the message from the user to our FlowWise chatbot, this guy over here, and then take the response off the chatbot and send it back to the user. Thankfully, FlowWise makes it incredibly easy to integrate with these chatbots. When we click on this API endpoint button, we can see many different integration options over here.

What we're interested in is this curl option over here, which gives us this URL and some additional parameters. Let's copy the URL. So it's everything from HTTP up until the end of these characters.

And in Make, let's add a new module. So let's click on Add a Module. And let's search for the HTTP module, which will allow us to call the FlowWise endpoint.

Under HTTP, let's select Make a Request. And let's paste in that FlowWise URL. Let's change the method to Post.

Let's also add a header. And we can see exactly which values to pass in by copying this header value over here, which is Content Type. And for the value, let's also copy this Application JSON section and add it over here.

Now for the body type, let's select Raw. For the Content Type, let's select Application JSON. And for the request content, we can actually copy the example provided by FlowWise, like so.

And let's paste it into this field. This is simply a property called Question with a value of, hey, how are you? Now, obviously, we don't want to hardcode this value over here, but instead we want to pass in whichever message the user sent.

So on the left, let's click on Messages. Let's open up text. And let's add this body value over here.

And be sure to add these within these double quotes. Let's click on OK. Let's test this out.

So I'm going to click on Run once. In WhatsApp, let's say, hey. And back in Make, we can see that this FlowWise executed successfully.

And if we look at the response from the HTTP module, we can see in the output, this data structure with the text, hello, how can I assist you today? And a whole lot of other data as well. Also, if we go back to FlowWise and under Settings, if we go to View Messages, we can also see the conversation that was just sent to FlowWise.

Now let's see how we can pass this response from the AI model back to the user via WhatsApp. Now, of course, we could open the WhatsApp module and simply grab that output from the model. So instead of this hardcoded value, let's go to the HTTP output.

Let's go to data. In fact, let's add this data value over here. Let's click on OK.

Let's click on Run once. Back in WhatsApp, let's say, hey, again. And we do get a response back.

But this is really not very helpful. All we want is the value of text, not all this other crap as well. Now, unfortunately, this data value is this long, messy string of values.

And all we really want is the value of text. So what we need to do is take the string value and pass it into a structure where we can selectively grab the values that we need. Let's select Add a Module.

Let's go to JSON. And let's select parse JSON. Now, for the JSON string, we can actually add this data value.

And this one, I'll split the string up into properties that we can use. Let's click on OK. So let's run this again.

I'll just say, hey, again. Now, if we have a look at the output of this JSON module, we can see that we now have these individual values coming through. So we've got text, the message ID, et cetera.

So now, in the WhatsApp Business Cloud module, all we need to do is I'm actually going to delete this data entry over here. And now from the JSON parse module, we can add the text, like so. Let's give this a spin.

Let's click on Run once. And this time, we should receive a proper message. Let's say hello.

And look at that. We now get the AI's response back. However, we can still greatly improve this chatbot by adding memory to it as well as a personality.

But first, if you do enjoy this video, then please hit the Like button and consider subscribing to my channel for more Flow-wise content. Let's ask a question about our business. What are the current specials?

And of course, I shouldn't forget to click on Run once. I'll just select Use Existing Data, and we do get a response back. So our RAG chatbot is definitely working.

Now, let's have a look at adding conversation memory to this chatbot. If I say something like, my name is Leon, we do receive a response. But if I didn't ask it, what is my name?

Our chatbot will tell us that it actually does not know our name. And that is because it's got no view of the conversation history. Thankfully, this is super easy to set up as well.

So what we can do is use the user's phone number to uniquely identify that user and then return all the previous messages that were sent by that user. That way, the chatbot will be able to answer follow-up questions and recall information about the user. This is really simple to set up.

Let's double-click on the HTTP module. And in the request content, let's add a few more things. I'm just going to move these curly braces.

And at the end of question, let's enter comma and below question, let's enter override config, then colon, then opening and closing curly braces, and then a property called session ID colon. And now we can specify a unique ID for this user. And we can use the user's phone number for this.

So under messages, let's add the sender number like so. And let's click on OK. Right.

Let's click on run once. I'm actually going to clear this chat and let's see if our memory works. First, I'll say, hey, we do get a response back.

Let's say, my name is Leon. And now let's ask it, what is my name? And look at that.

Our chatbot remembered my name. And of course, if we go back to flow wise and view messages, we will be able to view the conversations that are linked to the user's phone numbers. Now that our chatbot is working, we can go to make and turn on scheduling.

And we can set it to immediately as data arrives. Now we don't have to click on run once every time we want to chat to our chatbot. Let's also save this.

Then let's test this out by sending, hey, and I get a response back immediately. Fantastic. Another improvement we can make to our chatbot is to go back to flow wise.

And within the tool agent, we can click on additional parameters. Here we can set the behavior of our model. Like let's give it a name.

Something like your name is Max. You work as a customer support agent for a restaurant called Oak and Barrel. And just for fun, let's say something like include the emojis in your responses.

Let's save this flow. And in WhatsApp, let's try this out. It's enter.

Do you sell steaks? And we get our response back, which also includes emojis. Wonderful.

Now at the moment, we are using a temporary access token within Meta. And this token will expire after 24 hours. Now I'm not going to cover the process of verifying your business on Meta, but there are plenty of other videos on YouTube that will take you through that process.

But I hope that you do find this video useful nonetheless, as these WhatsApp chatbots can be extremely valuable to yourself or your customers. If you want to learn how to build advanced, multi agent applications within flow wise, then check out this other video over here.