How to Build a WhatsApp AI Chatbot in Minutes Using Flowise - Bilingual Subtitles
Are you ready to bring your AR chatbot directly into WhatsApp?
In this video, I'll show you how to build a no-code chatbot with Flow-wise and seamlessly integrated 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 conversation.
bot, or an advanced AI driven solution, Flow-wise makes it super easy.
There's no coding required either.
By the end of the video,
you'll have a chat bot 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 rain there 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 for 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 you would like to learn more about FlowWise, then I highly recommend checking out my full flow wise playlist on my channel.
First things first, let's switch over to dark mode as this white background is blinding me.
Then under chat flows, let's click on add new.
Let's then click on save and let's give our flow a name like what's app chatbot.
We can use flow wise.
is to create some advanced chatbots.
But 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 if a queue document in world that simply contains questions and answers about my business.
And what we want is a great chatbot that we'll be able to answer questions about our business using rag.
Let's start by adding a new node 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 nodes then under chat models.
Let's add the chat open AI model.
node.
And let's connect this model to our tool agent.
Like so.
For this chat openAI node, let's go ahead and select our openAI credentials.
Then let's select our model by changing it to GPT 4.0 mini and I'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 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 for my 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 race to run.
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 Embalings function.
Let's talk.
function.
So under add nodes, let's go to embeddings, and let's add the openAI 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, then, There 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 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,
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 wait and process this.
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 observe the data from that document store into our vector database.
We only have to execute this once.
Let's click on absurd, and we can see that the 13 records from the document store were now loaded into our in-memory vector store.
We now test out our chat, so let's ask it something about the business, like what are your specials and features.
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 the 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 dropdown.
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 On this 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 Flowise 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 a link.
watch app 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.
The 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 two-number.
The from number is the mobile number that your users will see when they receive messages from your chatbot.
Then two number is a taste 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 you add your numbers.
simply click on manage phone 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 release,
message, your Now let's have a look at how we can receive messages from the user and same responses back to the user as well.
For this we will use make.com.
You will find a 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.
Make.com to effectively glue Flow-wise and WhatsApp together.
Go ahead and sign up for a new account or login.
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 events.
From 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 her 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 verified token and this can be anything you want.
I'll just call mine flowwise.
Under events, let's listen for messages and let's pick on save.
Now let's copy this webhook that was generated and let's go back to meta.
Let's click on configuration,
within configuration,
we now paste in that webhook URL and let's enter the verified token, which I called flowwise, and then let's click on verify and save.
Within the webhook fields, scroll down to messages and enable the 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.
from WhatsApp.
So let's go back to WhatsApp and let's send any message or 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 it'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, app, we cannot 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.
receiver, let's click on messages and let's add the same there, 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 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 of 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 that everything from HTTP up until the end of this We'll next time.
We'll characters,
and in mic,
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 contained 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 row for the With content type,
let's select application JSON and for the request content, we actually copy the example provided by FlowWise, like so, and space 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 hard-guide this value over here.
But instead we want to pause in which every 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 okay Let's test this out.
So I'm going to click on run once in what's added Let's say hi and back in mic we can see that this flow was executed successfully and if
you 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 whole lot of other data as well.
Also, if we go back to Flow-wise and under same things, if we go to View Messages,
we can also see the conversation that was just sent to Flow-wise.
Now let's see how we can pause 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 hot let's go to the HTTP output, let's go to data, in fact, it's at his data value over here.
Let's click on OK, let's click on run once, back in WhatsApp, let's say hi 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 the 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 parse 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 will now 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 ever 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, that message ID, etc.
So now in the WhatsApp Business Cloud module, all we need to do is I'm actually going to delete this data entry every year.
And now from the JSON parse module, we can add the text.
Like so, let's give this a song.
Let's click on run once and this time we should receive a proper message.
It's a 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 rack chat pot is definitely working.
Now let's have a at adding conversations.
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.
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 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 okay right let's click on read 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.
It's a 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 you go back to flow wise and view messages,
we will We 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 this is out by saying hey and I get a response back immediately.
Fantastic.
Another improvement we can make to our chatbot is to go back to Flowwise 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 Okan Barrel.
And just for fun,
let's say something like include emojis in your responses,
let's save this flow, and in WhatsApp, let's try this out, let's enter do you sell steaks.
And we get our response back, which also includes emojis.
Now at the moment we are using a temporary access token within meta and the 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.
non delays, as these WhatsApp chatpods 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.
Unlock More Features
Install the Trancy extension to unlock more features, including AI subtitles, AI word definitions, AI grammar analysis, AI speaking, etc.
Compatible with Major Video Platforms
Trancy not only provides bilingual subtitle support for platforms like YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, but also offers AI word/sentence translation, full-text immersive translation, and other features for regular web pages. It is a true all-in-one language learning assistant.
Supports All Platform Browsers
Trancy supports all platform browsers, including iOS Safari browser extension.
Multiple Viewing Modes
Supports theater, reading, mixed, and other viewing modes for a comprehensive bilingual experience.
Multiple Practice Modes
Supports sentence dictation, oral evaluation, multiple-choice, dictation, and other practice modes.
AI Video Summary
Use OpenAI to summarize videos and quickly grasp key content.
AI Subtitles
Generate accurate and fast YouTube AI subtitles in just 3-5 minutes.
AI Word Definitions
Tap on words in the subtitles to look up definitions, with AI-powered definitions.
AI Grammar Analysis
Analyze sentence grammar to quickly understand sentence meanings and master difficult grammar points.
More Web Features
In addition to bilingual video subtitles, Trancy also provides word translation and full-text translation for web pages.