How to Build Your First Chatbot

Daria Zabój
9 min read
updated: Mar 17, 2021

Long gone are the times when building chatbots required advanced coding skills. Platforms like ChatBot let you build conversational bots across many communication channels without writing a line of code. Doesn’t that sound exciting? 

This tutorial will show you, step by step, how to build a lead generation bot using the ChatBot platform. You’ll learn how to test your brand-new bot and find out how you can easily add it to your website. 

how-to-build-your-chatbot

What’s inside:

  • How to create a lead generation chatbot 
  • How to test your chatbot
  • How to add a chatbot to your website 

Let’s get started!

How to build a chatbot

how-to-build-your-chatbot

To create your bot using the ChatBot framework, you need to have an active ChatBot account. To create your account, visit chatbot.com and sign up as a new user. 

ChatBot offers a free 7-day trial, so you can build your bot during that time. You can extend your trial by an extra 7 days by completing a short onboarding lesson. 

Let’s begin the journey!

  1. After creating your account, you’ll land on the ChatBot dashboard where you can create a new story. Click on the Create bot button. how-to-build-your-chatbot

  2. Name your new story as lead generation bot. how-to-build-your-chatbot

  3. After creating your first story, you’ll be transferred to ChatBot’s Visual Builder. By default, we’ve already prepared a basic conversation tree there to help you get going.

    Start point shows where your story begins. It’s a trigger point that can’t be edited. Also, to welcome users, we’ve added a default Welcome message. You can edit it to be the way you want it. Let’s use this occasion to catch a user’s attention!
    Start point shows where your story begins. It’s a trigger point that can’t be edited. Also, to welcome users, we’ve added a default Welcome message. You can edit it to be the way you want it. Let’s use this occasion to catch a user’s attention!
    how-to-build-your-chatbot

  4. Click on the Bot response block to open its edit window. We’ve already prepared four variations of a welcome message. You can leave them as they are or edit them the way you want.

    What is Bot response? The Bot response block contains a message your chatbot sends to a user. Here, you can ask the user a question or let them choose from the set of predefined answers.
    What is Bot response? The Bot response block contains a message your chatbot sends to a user. Here, you can ask the user a question or let them choose from the set of predefined answers.
    how-to-build-your-chatbot

  5.  Next, choose an Image response from the left-hand menu, and drag it below the first text message. Then, upload the image you want to display to users. how-to-build-your-chatbot

  6. Your image is ready! how-to-build-your-chatbot

  7. Next, drag another Text response from the menu, and drop it below your image. Then, enter your message. how-to-build-your-chatbot

  8. Next, add a Quick reply response. Here, you can ask the user whether they want to sign up for your newsletter. You can encourage the user to do so by offering, for example, a coupon code. how-to-build-your-chatbot

  9. Now, you need to set your buttons to let users decide whether or not they want to leave their email. Click on the first button to open its content. Type the button’s name in the Button title field. Next, set the Button type to Send message. When you’re ready, save settings. how-to-build-your-chatbot

  10. Now, you need to prepare the second button for users who don’t want to sign up for your newsletter. Click on the Add button field. how-to-build-your-chatbot

  11. Type in the button’s title. Then, choose the Send message button type, and save settings. how-to-build-your-chatbot

  12. When you’re ready, click on save to close.  how-to-build-your-chatbot

  13.  Now, it’s the user’s turn. To continue the conversation, choose the User input block from the main menu, and drop it after the Bot response block. 

    What is User input? The User input block lets you collect user responses. In this block, you need to define what types of user messages will trigger the bot’s response. To create User input, you have to define Keywords and User says. These are matching systems that you can choose from.
    What is User input? The User input block lets you collect user responses. In this block, you need to define what types of user messages will trigger the bot’s response. To create User input, you have to define Keywords and User says. These are matching systems that you can choose from.
    how-to-build-your-chatbot

  14. Click on the added User input to open the edit window, and type in the block’s name. Then, enter the type of messages that will trigger the chatbot’s next response. You can do that in the Keywords or in the User says section.

    If you want your bot to respond to a certain keyword, use the Keywords matching system. If you expect users to reply using some longer phrases, use User says.
    If you want your bot to respond to a certain keyword, use the Keywords matching system. If you expect users to reply using some longer phrases, use User says.
    how-to-build-your-chatbot

  15. When your response is ready, click save and close.  how-to-build-your-chatbot

  16. Now, you need to collect the user’s email. Drag the Question block from the main menu, and drop it after the User input block.  how-to-build-your-chatbot

  17. Click on the Question block, and type in the block’s name. how-to-build-your-chatbot

  18. Now, enter your question in the Question variants field. You can add more variants here. This way, when the user provides the wrong email format, the bot will use different words to ask about the proper email form again. By doing this, you can make your chatbot sound more natural. how-to-build-your-chatbot

  19. Now, in the Validate response with entity field, choose Email from system entities. Because of that, your chatbot will know whether or not the user provided the proper format of their email address. how-to-build-your-chatbot

  20. Next, in the Save response to attribute field, set up the default email attribute. This way, if the user provides the correct email address, ChatBot will assign this email address to the user. how-to-build-your-chatbot

  21.  Next, in the Action on failure block, you can choose what your bot should do if a user fails to type the correct format of their email. 

    If you choose Go to the failure block, the bot won’t save the wrong email address format, and it will ask the user again about providing the proper format of their email.
    If you choose Go to the failure block, the bot won’t save the wrong email address format, and it will ask the user again about providing the proper format of their email.
    how-to-build-your-chatbot

  22. Then, choose Retry after filled so that your bot will keep trying until it gets the proper answer. When you’re ready, click save and close.  how-to-build-your-chatbot

  23.  Now, you need to thank the user for their email address and provide them with the promised coupon code. To do so, drag Bot Response from the main menu, and drop it after the Success block.  how-to-build-your-chatbot

  24. Type in the block’s name. how-to-build-your-chatbot

  25. Now, add an Image response and upload an image you want to use. how-to-build-your-chatbot

  26. Lastly, add some text responses, and enter your messages. Remember to add the coupon code! When you’re ready, click save and close. how-to-build-your-chatbot

  27.  Now, you need to prepare the bot’s message in case the user doesn’t want to sign up for your newsletter. To do this, drag User input from the main menu, and drop it after the Welcome messagehow-to-build-your-chatbot

  28. Click on the User input block and type in the block’s name. Then, enter the user responses using Keywords or User says. Type in all the possible replies your users might send. When you’re ready, click save and close. how-to-make-chatbot

  29. Now, you can end the conversation. Drag Bot response from the main menu, and drop it after User input with the refusal to sign up to your newsletter. how-to-make-chatbot

  30. Click on the Bot response block. Choose the text type response, and enter the bot’s message. Then, click save and close.  how-to-make-chatbot

  31. Lastly, below the welcome message, you can see Default fallback. In ChatBot, each story comes with four variants of a Default fallback message. You can click on it and edit its content the way you wish. 

    What is Default fallback? Default fallback functions as a trigger point, and it can’t be edited. It’s activated when a chatbot can’t find a matching answer to the user’s question. To recover the conversation, you can add Bot response to the Default fallback and display a dedicated fallback message.
    What is Default fallback? Default fallback functions as a trigger point, and it can’t be edited. It’s activated when a chatbot can’t find a matching answer to the user’s question. To recover the conversation, you can add Bot response to the Default fallback and display a dedicated fallback message.
    ChatBot collects all unmatched interactions that have responded with the fallback interaction and stores them in the Training section. You can add them directly to your chatbot story so that your bot can recognize them next time and provide matching replies.
    ChatBot collects all unmatched interactions that have responded with the fallback interaction and stores them in the Training section. You can add them directly to your chatbot story so that your bot can recognize them next time and provide matching replies.
     how-to-make-chatbot

How to test your chatbot 

 how-to-make-chatbot

It looks like you’ve built a lead generation bot. Well done! Let’s look at it in action. ChatBot’s Visual Builder enables you to test your story from within the application. This way, you can detect mistakes much faster and correct them before you show your chatbot to customers.

  1. Click on the Test your bot button at the top right-hand menu bar. This will open the Testing tool.  how-to-make-chatbot

  2. The chatbot welcome message appeared. Chat with the bot to see whether it works as intended.   how-to-make-chatbot

  3. If you’d like to test other paths, click on the three dots icon at the top of the Testing tool. Choose the Reset chat option.  how-to-make-chatbot

How to add a chatbot to your website

how-to-add-chatbot-to-your-website

When everything looks good, you’re ready to place your chatbot on your website! 

  1. Go to the Integrations section.  how-to-add-chatbot-to-your-website

  2. Choose Chat Widget from the list.  how-to-add-chatbot-to-your-website

  3. Choose Lead generation bot in Set up for bot. how-to-add-chatbot-to-your-website

  4. Now, you can customize the look and feel of your Chat Widget. Go to the General settings and Appearance sections. Choose your brand colors, and upload images that will steal your customers’s hearts. how-to-add-chatbot-to-your-website

  5. When your Chat Widget is ready, go to the Publish your bot section. Here, you can copy the chatbot code. 

  6. Now, paste the copied code before the closing </body> tag on every page of your website. Then reload your website. Chat Widget should appear in the bottom right-hand corner.

That’s it! Your chatbot is ready and waiting to connect with your customers and build great relationships with them. Remember that you can always go back to your chatbot story and improve it over time. Keep up the good work!

Do you have questions concerning building chatbots using the ChatBot platform? Write to us at support@chatbot.com.

Was this article helpful?

Got it!

Thanks for your feedback.

Thank you!

We’re happy to help.

Start a free ChatBot trial
and build your first chatbot today!

Free 14-day trial No credit card required

Discover our other products