How to Create a Chatbot for your Website (No Coding Required)

In this tutorial, I will explain how you can create a chatbot for your website, without writing a single line of code.

I will show you how to:

Add a chatbot to your website
Send personalized greeting messages per website page
And use live chat so you can forward a chat to a human

Let’s get started!

Table of Contents

Create a Welcome Message on your website

To create a chatbot on our website, we are going to use Tidio. Tidio is a chatbot builder that makes it really easy to set up chatbots for your website.

Also, they have a 14-day free trial and by using the button below you get a 20% discount on your Tidio plan:

Create Free Tidio Account

After you’ve created an account, you will see your Tidio dashboard:

Then you can click on “Chatbots” in the left menu and here you will see that Tidio automatically created a chatbot for you:

But, we are not going to use that one, so you can just click on three dots and then hit that Delete button:

And now we are going to create our own chatbot. So a chatbot in Tidio is basically one chatbot flow. So if you want to create one chatbot flow, you need to create a chatbot.

(With some other chatbot builders you can have a chatbot with multiple flows, but with Tidio, one chatbot has only one chatbot flow.)

So let’s click on Add from Scratch in the top-right corner:

And then we need to choose a trigger. A trigger is an event that starts the conversation. So for now we are going with Visitors clicks on the chat icon:

Tidio will automatically create a flow for us with this trigger. Then, we can click on the Trigger at the top and we can determine the Trigger limitation. So, you need to set it to Unlimited, so that it triggers this message every time a user clicks on the Chat icon:

When you’ve set the right trigger, we can add a Decision to our flow by dragging it in the visual flow builder:

A Decision is an element that you can use to ask a question to your user and then the user can respond by clicking on a button (also called a quick reply).

Let’s say we are a Software Company and we want to help the user with getting to know our company. Then, we can ask the question: “Hey, how can I help you?” and add two quick replies: “What is Software Comp?” and “Pricing of Software Comp”:

So, what this will do is that every time a user clicks on the chat icon, the chatbot will ask this question and show the two quick replies.

The next thing we need to do is add two responses for when the user clicks on one of the buttons. We can just drag the Message Element and connect it to the Decision element:

When you connect the Message element to the Decision element, Tidio will automatically ask for which quick reply the response is:

So for the “What is Software Comp?”, we will set a simple text message:

And then we can add another text message for the “Pricing of Software Comp”, so that the flow looks like this:

Now, you can just hit Save and Activate your chatbot:

And your chatbot is ready to launch on your website!

How to Add Tidio to Your Website

Now that we’ve created a chatbot flow, we need to add Tidio to our website.

To do this, you need to go to Settings and click on Appearance:

Here, you can set a lot of different settings for your website widget, such as changing the position, the label of the button, the colors and much more.

The only thing I highly recommend is disabling the Pre-Chat Survey, because this will ask some questions before the user can use your chatbot and generally users don’t like this.

When you’ve set the right settings for your website widget, you need to go to Installation and copy the code under Javascript:

And since I know a lot of you are using WordPress, I will show you how you can add it to your WordPress website.

P.S. If you are not familiar with adding code to your website, I highly recommend hiring a developer to do this. On Fiverr, you already have developers that can do this for as little as $5.

If you go the back-end of your WordPress website, you need to click on Plugins, search for “Install Headers and Footers” and click on Install now and Activate:

Then, if you go to Settings –> Insert Headers and Footers, we need to paste our Tidio code under the “Scripts in Footer” section:

And that’s it! Now you have successfully added Tidio to your website. And if you’ve done it right, you should see a small chat icon on the right-bottom of your website:

And when you click on it, you will get the welcome message we set up in the previous section:

Send personalized greeting messages per website page

Your chatbot is live and running on your website! But how can we get the most out of it?

By looking at the highest-converting pages. A high-converting page is a page where you want to convert a lead to a customer.

And an example of a high-converting page is the Pricing page. And a good way of converting a lead to a customer is by sending them a personalized greeting message with your chatbot.

So if we go back to Tidio, we can create a new chatbot flow. Just select chatbots in the left menu and click on Add from scratch:

And then we will add a trigger to this chatbot flow, which will start the conversation. Because we want to show a message on a specific page, we select the Visitor opens a specific page trigger:

When the flow is created, we need to click on the Trigger, fill in the URL of the pricing page and set the trigger limitation to Unlimited:

Here, we will also add a Decision element and ask the user if they want more information about the pricing:

And then we can determine the response for the Yes button:

And one for the No button:

So that our flow looks like this:

And as before, you just need to click on Save and Activate your chatbot!

A little thing we need to add to our first flow (welcome message) is that we don’t want this flow to be activated on the Pricing page. So you can just head back to the Welcome Message flow and add a Current URL condition after the trigger:

Note: Notice that after the Condition I’ve set the flow to “No”, because we want to check whether we are not on the pricing page.

And then check if the current URL is equal to the pricing page:

Now, the welcome message will not be triggered on your Pricing page when someone clicks on the chat icon.

So when you visit the Pricing page on your website, it will automatically show this message:

And when you click on one of the buttons, it will start the conversation:

So that is working!

Use live chat when your chatbot doesn’t understand the user

The last thing I am covering in this tutorial, is how you can activate the live chat when someone wants to talk to a human.

If we go back to our welcome message, we can add another quick reply, called Talk to a human:

And set a text response when somebody clicks on this quick reply:

What we then need to do is notify a live chat agent that they need to reply to the user. So we can drag the Notify Operator element and connect it to the text message: