How To Create an AI Chatbot for Free in 2024

joren-wouters-avatar

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!

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:

  1. Step 1: Create a chatbot in Botpress​
  2. Step 2: Add a Knowledge Base in Botpress
  3. Step 3: Create your Welcome Message
  4. Step 4: Build the AI Chatbot Flow
  5. 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:

  1. 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
  2. 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:

Create Free Botpress Account

When you’re on the Botpress website, click Sign Up and create your free account:

The sign up option for Botpress

Then, click on Create Chatbot:

Button for creating a chatbot in Botpress

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:

notification stating that a chatbot has been created by Botpress

The Botpress Studio is the environment we will use to build our chatbot. To continue, click on Start from Scratch:

Start from scratch option for creating a chatbot in Botpress

And click on Use Template:

Chatbot template option in the Botpress studio

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:

Default knowledge base dashboard in Botpress

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:

Document upload option in default knowledge base dashboard

Then upload the document from your computer and click on Confirm:

Document upload notification in Botpress studio

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:

Main dashboard option in the Botpress studio

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:

Trigger in Botpress that starts a Conversation has started

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:

Option for adding a standard note in Botpress

Then, inside this Standard Node, you need to click on Add Card:

Option for adding a card in a note within the Botpress studio

Now, under the Send Messages option, choose Text and drag it into the Standard Node:

Adding a text card to a note in Botpress

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:

  1. Greet the user
  2. Tell them that they are talking to a digital assistant or a chatbot (that sets the right expectations)
  3. Tell them that you will try to answer their question
  4. Let them know that you can always send them to one of your support agents
  5. Ask them what their question is about

Add a Welcome Message to your chatbot in Botpress

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”):

A button that enables getting answers from the knowledge base

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:

Creating a new note in the Botpress studio

Inside this nodewe will send the message to the knowledge base. So, you can click on Add Card and then select Query Knowledge Base:

Query knowledge base option in the Botpress studio

Now, we can drag that over to our node

Creating a new note in Botpress for querying the knowledge base

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}}”:

Event payload text for the knowledge base

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”:

Creating the knowledge base variable in Botpress

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:

Adding the Expression option to a new note

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:

Checking the knowledge base variable

Now Botpress is going to create the technical condition for you and this is what it looks like:

Expression in Botpress that checks if the knowledge base knows the answer to a question

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:

Send the answer of the knowledge base in a message

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:

Add raw input to your Botpress chatbot

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:

Ask a question with the Raw Input in Botpress

Then under advanced configurations you can add two buttons, “Yes” and “No”:

Yes and no response options

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!

Response if the user clicks “Yes”

And if they click on No, we will send:

Please send an email to info@ecommercebizz.com and we are happy to help!

Send message in Botpress if the bot gives an incorrect answer

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:

Connect last option to the Start Node in Botpress

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:

Response if the user clicks on the third option

Then you can check the chatbot responses using the emulator:

Preview of the emulator with correct question

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:

An example of asking a question to the bot

Then, if you say, “What is your return policy?” which is something that the knowledge base knows, then it will give the return policy:

Preview of the emulator with correct question
So that’s working, but then if we repeat the same question “What is a truck?” then it will actually give the wrong answer:

Preview of the emulator with wrong question

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”:

Execute code labels button in Botpress

Now, click on Accept Changes and then click Close:

Accept Changes button for the code labels

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:

Publish your chatbot in Botpress

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:

Back to the main dashboard button

 

Then, you need to select your chatbot and click on Integrations:

Integrations in Botpress

Now, you will have to fill in the required information:Webchat integration option in Botpress

Once you’ve added the required information, click Save Configuration.

Save button for webchat integration

From here, click on the Pre-configuration option and copy and add the Embedded code to your website:

Pre-configuration embedded code for the chatbot

On WordPress, you can use the Insert Headers and Footers plugin:

Plugin for WordPress

Now you can go to the plugin’s Settings and then Insert Header and Footers:

Insert header and footer plugin options

After that, scroll down the Script in the body section and paste the code and click Save:

Body section accessed from the plugin and the save option

And that’s it! So now if you go to your website, you can see your chatbot in the bottom-right:

Live preview of the chatbot

Free AI Chatbot Template

Custom AI ChatGPT 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!

Comments (2)

  1. David

    What is the best chatbot to use with Facebook messenger ads?

    1. Joren Wouters

      Hey David! I would recommend using ManyChat.

Leave a Reply