How to Create a Chatbot for your Website

By Joren Wouters Updated on

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!

 

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:

tidio-dashboard-after-login

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

tidio-chatbots-section

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

tidio-delete-chatbot-flow

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:

tidio-add-chatbot

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-trigger-click-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:

tidio-set-trigger-settings-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:

tidio-add-quick-replies

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

tidio-welcome-message

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:

tidio-add-text-message

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

tidio-select-message

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

tidio-simple-text-response

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

tidio-text-message-pricing

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

tidio-activate-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:

tidio-appearance-widget

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:

tidio-copy-website-code

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:

install-insert-headers-footers

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

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:

tidio-chat-widget

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

tidio-website-widget

 

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:

tidio-add-chatbot

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:

tidio-trigger-specific-page

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:

tidio-set-trigger-url

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

website-chatbot-pricing-page

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

tidio-pricing-page-yes

And one for the No button:

tidio-pricing-page-no

So that our flow looks like this:

tidio-chatbot-pricing-page

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:

tidio-add-condition

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:

tidio-check-if-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:

tidio-greeting-message-pricing-page

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

tidio-chatbot-pricing

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:

tidio-talk-to-human

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

tidio-forward-to-human

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:

tidio-notify-operator

And add a message that the live chat agent sees when he gets that notification:

tidio-notify-operator-message

So, now you can just hit Save and this will be published.

When a user now clicks on the Talk to a human button, the live chat agent will automatically get a browser notification:

tidio-browser-notification

And then you can reply with the live chat of Tidio:

tidio-livechat

 

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