How To Create an AI Chatbot for Free in 2024
By Joren Wouters • Updated on
In this tutorial, I will show you how you can create an AI chatbot for free in 2024.
We will create a chatbot that automatically answers questions about a business and is trained on your data. I will give a step-by-step guide on:
- What chatbot tool you should use
- How you can train your chatbot on your own custom data
- How you can publish that chatbot on your website
At the end of this tutorial, I will even give you the template for free.
With this template, you won’t have to build the chatbot yourself. You can just download it and use it for your own business.
Let’s get started!
Table of Contents
What We’re Building
We will build a customer support chatbot that automatically answers questions about an eCommerce business on their website.
This will actually work for any type of business, we just use eCommerce as an example.
And we will create the chatbot in 5 simple steps:
- Step 1: Create a chatbot in Botpress
- Step 2: Add a Knowledge Base in Botpress
- Step 3: Create your Welcome Message
- Step 4: Build the AI Chatbot Flow
- Step 5: Add the AI Chatbot to Your Website
Let’s dive in!
Step 1: Create a chatbot in Botpress
Botpress is the AI chatbot tool that will use to create our free AI chatbot.
There are basically two reasons why I’m using Botpress:
- Botpress has a flow builder and built-in AI. This allows you to create custom chatbot flows and train your chatbot on your own data with AI
- You can get started for free and then pay as you go. They have a free plan but if you want more so if you want more messages or you want more AI tokens then you can just pay for it.
To create a Botpress account, all you need to do is click the button below:
When you’re on the Botpress website, click Sign Up and create your free account:
Then, click on Create Chatbot:
Now, Botpress will create the Chatbot for us. You just need to wait a little bit, and then you’ll get a notification saying that your chatbot has been created. Then, we can click on Open in Studio:
The Botpress Studio is the environment we will use to build our chatbot. To continue, click on Start from Scratch:
And click on Use Template:
Step 2: Add A Knowledge Base in Botpress
The next step is to add a knowledge base to your chatbot.
A knowledge base is nothing more than just a collection of documents that explain your business. In Botpress, you can add multiple types of documents that include:
- Website URLs
- Table
- Text
- Documents
- Search the web
Once your chatbot is trained on your knowledge base, it can automatically answer questions about it.
In Botpress, you can go to Default knowledge base:
Here, we can upload a document to Botpress. We will upload a document that contains information about delivery, warranty and returns of an eCommerce business (also part of my free template)
First, click on Document:
Then upload the document from your computer and click on Confirm:
Now, the document is uploaded to Botpress and is indexing the document.
Indexing means that your chatbot trains itself on your document. As Botpress indexes the document, we can start on creating our conversation flow.
Step 3: Create your Welcome Message
The next step is to create our welcome message.
A welcome message is the first message the user gets when talking with the chatbot. It basically welcomes the user.
To create a welcome message, you need to click on Main:
The Main flow will automatically have some information in it that you can remove. After that, the first thing you need to do is add a trigger.
A trigger is an event that starts the conversation. And in this case, that will be when somebody starts a conversation via our website.
To do this click on Trigger and then click the Conversation Started option:
Now, every time someone clicks on the chat bubble on your website, this chatbot flow will start.
To send our welcome message, we can connect the trigger to a new Standard Node:
Then, inside this Standard Node, you need to click on Add Card:
Now, under the Send Messages option, choose Text and drag it into the Standard Node:
Here you can type in your welcome message:
Hey 👋
I’m the digital assistant of eCommerce Bizz.
I will try to answer your question. If I don’t know the answer, I will connect you with one of my support agents.
Please type in your question below 👇
Within your welcome message, you want to do a couple of things:
- Greet the user
- Tell them that they are talking to a digital assistant or a chatbot (that sets the right expectations)
- Tell them that you will try to answer their question
- Let them know that you can always send them to one of your support agents
- Ask them what their question is about
Step 4: Build The AI Chatbot Flow
The next step is that user will ask a question to our chatbot.
Once they do that, the Start trigger will start.
And when you click on it, you actually want to Disable Search (under “Included Knowledge Bases”):
The reason why we disable the search is because we want to control whenever we send something to the knowledge base.
To build the rest of our flow, we will connect the Start trigger to a new Node:
Inside this node, we will send the message to the knowledge base. So, you can click on Add Card and then select Query Knowledge Base:
Now, we can drag that over to our node:
Then, we can determine what we will send to the knowledge base. We basically want to send the question someone has asked us.
We can do that by using “{{event.payload.text}}”:
Then the knowledge base will give us an answer we can store in a variable. To do that, click on select and type in the variable “Knowledge_base_response”:
Now we will send the question to the knowledge base, and the knowledge base will store the answer in the variable workflow.Knowledge_Base_Response.
But, it could also be that the knowledge base doesn’t know the answer to our question. So after this step, we also need to check if the knowledge base knows the answer to our question.
We can do that by using an Expression. Again, you can just click on Add card and drag the Expression to our node:
With an expression, we can add a condition that uses if-then logic.
Within Botress, using expressions is pretty technical, but Botpress knows this, so they added a cool feature.
In the Label of a expression you can describe what you want to do, and then Botpress automatically creates the condition for you.
So we can type in: “Check if workflow.Knowledge_Base_Response has any value” and hit Enter:
Now Botpress is going to create the technical condition for you and this is what it looks like:
When the variable has a value (so the chatbot knows the answer), we want to send the answer to the user.
So we can add the answer to a new Standard Node where will give the answer.
The answer will again be just two brackets and then workflow.Knowledge_Base_Response:
Next, you want to ask if this answer answered their question. Because it could be that the chatbot is giving the wrong answer or it’s not the answer they are looking for.
We can do that by adding a Raw input:
With the raw input, we can ask a question and we provide two buttons. However, the user can also choose not to use any of those buttons and just ask another question.
Inside the Raw Input, we can ask: “Does this answer your question?”
And we also want to disable the answer from the knowledge base again:
Then under advanced configurations you can add two buttons, “Yes” and “No”:
If they click on Yes, we will send them to a Node saying:
Great! If you have any more questions, feel free to ask them here!
And if they click on No, we will send:
Please send an email to info@ecommercebizz.com and we are happy to help!
But it can also be that the user doesn’t click on any of the buttons and just asks another question. When that happens, we want that the Start node is activated. To do this, just connection option to our first node:
Now Botpress will send that question to the knowledge base and we’re doing the same check again.
The next step is to add another option when the chatbot doesn’t know the answer to a question.
In this case, we need to add another card with and Expression and connect the Expression to another Node containing text that says:
Then you can check the chatbot responses using the emulator:
Now, when you create a new conversation and say “What is a truck?” then the knowledge base doesn’t know the answer because we don’t have any information on trucks. It will say sorry, but I don’t know the answer to your question:
Then, if you say, “What is your return policy?” which is something that the knowledge base knows, then it will give the return policy:
So that’s working, but then if we repeat the same question “What is a truck?” then it will actually give the wrong answer:
This happens because if the knowledge base doesn’t know the answer, the value in the variable workflow.Knowledge_Base_Response isn’t updated. So while we asked a question about trucks, the answer to the return policy is still in the variable.
To prevent this from happening, we need to empty the variable workflow.Knowledge_Base_Response before we query the Knowledge Base.
To do that, we can add another card, and we’re going to use the Execute code.
In Botpress, you can set and empty fields using code. The disadvantage here is that we need to use code, but the advantage is you are extremely flexbile.
And Botpress knows that this is technical, so we can let Botpress create the code for us.
So, in this case, we are going to click on it and ask Botpress to edit the code so we can say “Empty the variable workflow.Knowledge_Base_Response”:
Now, click on Accept Changes and then click Close:
Now, if you try out the same conversation in the emulator, the responses are correct.
The next step is that you need to publish your chatbot, and you can just click on Publish to do that:
Step 5: Add the AI Chatbot to Your Website
The next step is to add the chatbot to our website.
To do that, click on the Botpress logo and click on Back to dashboard:
Then, you need to select your chatbot and click on Integrations:
Now, you will have to fill in the required information:
Once you’ve added the required information, click Save Configuration.
From here, click on the Pre-configuration option and copy and add the Embedded code to your website:
On WordPress, you can use the Insert Headers and Footers plugin:
Now you can go to the plugin’s Settings and then Insert Header and Footers:
After that, scroll down the Script in the body section and paste the code and click Save:
And that’s it! So now if you go to your website, you can see your chatbot in the bottom-right:
Free AI Chatbot Template
Now It’s Your Turn
And that’s how you can create a chatbot for your website, without writing a single line of code!
Now I have a question for you:
Do you already have a chatbot on your website?
And if not, what are you waiting for?
Please let me know by leaving a comment below!
What is the best chatbot to use with Facebook messenger ads?
Hey David! I would recommend using ManyChat.