How to Create a Chatbot for a Website in under 30 Minutes

how-to-create-a-chatbot

How to Create a Chatbot for a Website in under 30 Minutes

The question today is not just how to create a chatbot but also how to do it quickly, efficiently and without complicating well-established workflows. Read on to find the answer you seek!

Every day the world buzzes a little louder with the hype of conversational marketing. For a few years not, tech and business publications alike have been prompting brands to build a chatbot in order to bring their communication up to the personalization and immediacy standards of today’s audiences. After the global pandemic closed most of the world at home the call for smooth customer-business communication is even louder and more urgent.

Sure, but that’s easier said than done… or is it?

A few years back, the answer to how to make a chatbot was riddled with software development terminology and heaps of code. Hence, the task of creating a chatbot rested heavily on the shoulders of the few skilled chatbot developers.

But times have changed.

Thanks to the rise of no-code platforms, chatbot development became more intuitive and, consequently, more accessible to a wider range of brands and businesses.

Nowadays, you can not only create a chatbot, but you can also do so in just a few minutes. Better yet, for more than one channel!

No kidding.

We never kid about chatbots.

Before we get started, let’s get a few things straight.


What is a Chatbot?


A chatbot is a conversational software that allows companies to communicate with their audiences instantaneously and in a personalized way without having to cut back on automation. Most people associate chatbots with artificial intelligence, however, AI is not essential to creating a functional chatbot.

There are two main types of chatbots:

AI Chatbot

AI Chatbot uses natural language processing which is only a small subset of AI that deals with linguistics and the capacity of software to understand natural human language. It may but doesn’t necessarily have to also work with machine learning. If machine learning is involved it means the bot is capable of learning from its own mistakes. On the other hand, if an AI bot isn’t driven by a machine learning algorithm, it requires the bot creator to check the bot’s responses and “teach” it by making corrections when a mistake was made.

This type of chatbot is usually structurally loose and, for the most part, allows the user to drive and control the conversation. Its most cited benefit is offering the most natural conversational experience. However, its greatest benefit often manifests as its greatest downside. The lack of structure often leaves users confused about what the bot actually can do which results in unpredictable experiences.

Rule-Based Chatbot

A rule-based chatbot is a bot that works on a principle of a structured flow often depicted as a decision tree. While they have a less flexible conversation flow than AI bots, the structure poses an advantage since you are able to guarantee the experience they will deliver every time. Hence, they are highly secure and accountable, features that are key to flawlessly functioning workflows.

This type of chatbot doesn’t use artificial intelligence, however, that doesn’t mean it’s not capable of sophisticated actions. Rule-based chatbots can even be more fun as they are not restricted to text interactions and their flows can include interactive elements such as buttons, images and other media.


What Chatbot Will You Learn To Build In this Article?


Right about now you might be wondering which type of chatbot you’ll learn to build here.

The answer is simple. The tutorial shows you how to build the rule-based chatbot as these types of chatbots:

  • Deliver the most consistent and reliable experiences/results
  • Are quick to create and easy to control
  • Are applicable in a vast majority of businesses use cases

 

Here is a little sneak peek into the final result:

Though, if you are dead-set on creating an NLP chatbot, you can also do that without coding using Landbot’s Dialogflow (API.AI) integration. Just click on the link to access the tutorial!

Ready? Let’s learn how to build a chatbot – quickly and without coding.


How to Create a Chatbot Without Coding in Minutes


This chatbot won’t cost you an arm and a leg nor it calls for hiring a developer to get it done. Using this tutorial, anyone, be it a marketer, sales rep or customer support rep is able to build a sophisticated chatbot worthy of representing your brand.

Landbot makes bot-building easy, pretty, and (without a hint of exaggeration or bias) fun!

Let me show you…

1. Set Up Your Chatbot Builder Account (Fast & Free)


Before anything else, you need to create an account with Landbot. The signup is free and doesn’t require credit card information.

Upon completing the signup, your first bot project will be created automatically and you’ll be taken straight to the bot builder featuring a sample template flow based on the use cases you indicated in your signup process (e.g. lead generation).

2-chatbot-template

However, if you want to gain a better overview of the platform, click the little house icon on the left to direct yourself to the dashboard.

how-to-create-a-chatbot-with-landbot-dashboard

2. Click “Build a Chatbot” & Select Your Channel


From the dashboard, you can click to modify an existing bot project or build a new one by clicking “Build a Chatbot”.

Once you do, the bot builder will ask you about the type of channel for which you want to create your bot. You can choose between the web, Facebook Messenger/WhatsApp, or API.

For the purposes of this tutorial, I selected to create a website chatbot although the builder is the same no matter what option you choose.

NOTE: If you choose to make a WhatsApp bot you won’t be able to use all features Landbot offers and the WhatsApp app has a limited UI. Visit our WhatsApp dialog design guide for rule-based chatbots to learn how to work around it.

After channel selection, you will land on Landbot’s template library which is filled with pre-built use-case specific chatbot templates… But, to make this tutorial at least a little bit hard, we will start from scratch. 😉

3. Optimize the Welcome Message


Creating bots with Landbot is extremely simple. It’s all about optimizing conversational blocks of your choice.

The first message to personalize is the welcome message which is a fairly flexible block allowing you to incorporate text messages, media messages such as images, gifs, videos or files, and buttons.

In this bot building exercise, we will create a subscription bot for a fictional online gaming magazine “GameWorld.”

Hence, I decided to personalize my Welcome block as follows:

3-build a chatbot with personalized-welcome-message

My bot introduces itself and the user can begin the conversation by clicking the “Hi” button. Given that this is a welcome sequence, keeping it simple with a single answer helps kick-start the engagement.

4. Add Your First Sequence


To add a new sequence to your welcome message, simply drag the green arrow from a given response.

NOTE: Every button option sequence will end with a purple “DEFAULT” button. This button is only visible to you in the builder. When there are multiple buttons to select from but the flow remains the same regardless of that choice, simply drag an arrow from the default option to create the next sequence (instead of dragging one from every single answer).

Since our Welcome message only has one button choice (so not really a choice 😁), it doesn’t matter if you drag an arrow from the “Hi” button or default. After you drag an arrow, you will see a menu of question and integration blocks.

Select “Simple Message” as your new block type and, to edit it, just type in your message.

And that’s your first sequence!

5. Ask a Question (Name)


The key to knowing how to create a chatbot – a good chatbot – is real-time personalization. It would be a pity not to take advantage of that straight from the start, for instance, by asking the user’s name.

As you may have noticed, Landbot builder offers a wide variety of question types. This is to make the bot setup faster since they come pre-formatted for the data they are supposed to collect. (e.g. the URL question will only accept an answer with a correct URL format and phone number question will only accept digits).

4-landbot builder question types

So, to add the Name block to the bot flow, drag an arrow from the last block, and select “NAME”.

As the Name block visualizes, its side settings window will appear on the left as well:

create a chatbot name-block

Here, you can personalize the default question text “What’s your name?” with something that more suits the tone of your bot/brand.

The advantage of using the name block is that it comes with the pre-set @name variable so you don’t have to lose valuable seconds setting up your own.

NOTE: In the Landbot builder, variables in the format “@” + “variable name” serve to categorize and store data collected by the bot. You can use this data for personalization inside the conversation flow or export them to an external database. You can use default variables or create your own.

Thanks to saving the user’s name under the variable, you can personalize the interaction in the very next step:

6-name-personalization-in-flow

6. Ask Questions (Button Choice)


As you may have noticed in the image above, our next step will be to set up a first true button choice. So, if you haven’t done so yet, drag an arrow from the name block and selected “BUTTONS”.

Buttons block works the same as the welcome/message block. You can divide your bot’s speech into various bubbles or add visual media before presenting the user with a button choice.

how to make a chatbot

We couldn’t resist getting in there one more GIF!

The key point is, this time, the buttons will lead our prospect down different paths:

  • Learn more about GameWorld
  • Subscribe

If the user is not ready to subscribe yet, they are free to learn more about the platform and resolve any doubts they might have.

To divide the flow based on the user’s answer, drag an arrow from “Learn More About GameWorld” button choice and design the flow that will follow:

create-alternative-flow

We set up another message block, this time including a short video, which we assumed would be a more fun way to learn about the magazine and meet the founders!

Still, our main objective is the subscription, so after this little intro, we wanted the bot to ask once again:

offer-choice

This time the options offering subscription or simply proceed to browse the magazine to give them a way out (and not cause any sort of frustration).

If the user chooses to go to the magazine, you can simply add a special “GOODBYE” block:

goodbye-message-block

The goodbye block offers quite a few perks. Besides saying a goodbye message you can:

  • Feature social media share buttons
  • Offer option to restart the conversation
  • Activate automatic URL redirect & personalize the redirect message

Thanks to the message, even if the user doesn’t subscribe they can check out your social accounts or go straight to your website without having to click anything at all.

What if they click “Subscribe” though?

In that case, we will lead them to the subscription flow… let’s build it!

7. Ask a Question (Email)


The most important piece of data when getting a subscription is, of course, an email address.

So, our first subscription question will be just that.

Go back to our first button choice (Learn more vs Subscription” and draw an arrow from the “Subscribe” option.

Thankfully, Landbot builder has a designated “EMAIL” question block which not only comes with a pre-set @email variable, it also checks the email format. That means the bot will not accept the user’s answer unless the common format “xxx@xxxx.xx” is met.

email-setup

After you set up the email block, draw an arrow from the “Subscribe 🚀” option in the “Learn more” branch of the conversation. This way, whether the user decides to subscribe immediately or after learning a bit more about the magazine, they will be directed through the same subscription funnel.

9. Export Data to Google Spreadsheets


Another secret of knowing how to create a chatbot that will make your life easier are integrations!

So, now that we have the most important piece of data, we want to export it to our Google Sheets database.

It’s these types of integrations that make for a powerful chatbot!

To do so, first, you need to set up a designated spreadsheet in your Google Drive:

google-spreadsheet-integration

Once done, go back to Landbot chatbot builder, drag a green arrow from the email block and select “GOOGLE SPREADSHEETS” from the menu:

google-sheet-integration-set-up-inside-chatbot

First, you need to connect your Google Drive with Landbot.

Click “ADD ACCOUNT” and pair the two tools together.

Next, from a drop-down menu select:

  • Account (email address) with which you want to pair your bot. (If you have paired your Landbot account with more than one account, you will see all the previously added accounts on this drop-down list)
  • The spreadsheet where you want to send the information
  • The sheet within the spreadsheet where you want to send the information

google-spreadsheets-setup-sleect-action

Next, you will be asked to “Select an Action” you want to perform:

  • Create a new row (Export)
  • Update an existing row (Export)
  • Retrieve data from the spreadsheet and bring them to the conversation (Import)

Since, at this point, you will be creating a new row for each new subscriber, select “Insert a new row”. After your selection, all you need to do is pair the column names with variables you want to store in these columns:

Click SAVE and the integration set up is done, a true piece of cake!

9. Ask a Question (Buttons with Pics)


There is more to the buttons block that meets the eye!

After we have the user’s email, we want to learn more about their preferences to be able to provide a more personalized subscriber experience.

Below is our next question. However, we want to make the button choice a bit more fun to break up the routine. To do so, click on the three dots in the upper right corner of the block:

buttons-and-pictures

A buttons block editor will appear on the left side of the screen. There, you can spice up your button choice questions with some rich media:

After you are done with uploading the images, scroll down the editor, and create a variable to store this answer:

create-picture-buttons

Click “SAVE”

This is how the image button choice can look on the front end:

picture-button-example

Isn’t chatbot creation fun?

9. Ask a Question (Picture Choice AKA Carrousel)


Another great question type inside the Landbot chatbot platform is the picture choice block which allows you to offer image choice in the form of a carousel instead of buttons.

Draw an arrow from the “Default” button of your last block and select “PICTURE CHOICE” from the menu.

In order to set it up, you need to configure the three main fields:

  • The question
  • Answers (Images)
  • The variable to store the answer

picture-choice-carrousel

We decided to use this question type to ask about the type of games the user loves to play the most.

carrousel-configuration

Since there are quite a few major game types, the carousel seemed a much better choice as the normal buttons would have taken the whole screen. When setting up picture choice proceed the same way as with button images – define the description and upload a corresponding image.

carrousel-set-up

Last but not least, don’t forget to update the variable to save the answers in a way that’s easy to identify:

carrousel-variable

This is how your effort will reflect on the front end:

Who would have thought learning how to create a chatbot with a carousel wheel would be so simple?

10. Ask a Question (Multiple Choice)


Our question variations adventure is not quite over yet… The buttons block hides another key feature and that is multiple choice for times when a single choice just won’t do.

For instance, in our magazine subscription bot, we wanted to see what type of content the new subscriber enjoyed the most without limiting them to a single answer.

For configuring a multiple choice question:

  • Create another buttons block and buttons answers
  • Click on the three dots in the upper right corner
  • Scroll down the editor and activate “Multiple Choice!
  • Remember to set up answer variable

multiple-choice

And that’s it. Your bot will now be able to offer users a multiple choice:

multiple-choice-front-end

10. Ask a Question (Open-end)


Sometimes buttons can’t cover it all and you need to give space to your user to express their opinion freely.

To give the user space to write and unconstricted input you can use the “TEXT” question block which simply offers an empty field for the user to fill in.

For instance, one of our last questions in the subscription was “Where did you hear about us?” we wanted to be sure to capture all answers. Therefore, we created a button with the option “Other” and connected it to an open-end question block to find out what that other meant.

Open-ended-question

The only thing to specify here is the question and of course, the variable which should be the same as the variable for the main question so the new free-input answer will override “other”.

11. Let the User Rate the Experience


Want to know how you are doing?

For that, Landbot offers the “RATING” and “SCALE” blocks, the two key ingredients in an amazing survey bot.

Draw an arrow from the last buttons question as well as the sub-question and select the “RATING” block from the menu.

rating block in conversation flow

The set up is, once again, pretty simple:

  • Write your rating questions
  • Select the rating format (number of stars, emoji…)
  • Create the variable to save the answer

12. Export the Rest of the Collected Data Google Spreadsheet


Remember how we sent the user’s name and email address to our Google Drive? Well, now it’s time to update the rest of the information.

So, drag a green arrow from the “Default” button of the last block and select the Google Sheets integration block once again.

Here, the set up is virtually the same, except you need to set the action to “Update a Row” as we want the bot to update a row it previously created.

When you select this option, the builder will ask you to choose a “reference column” to find the row that needs updating. Since name is not very reliable as a reference, we set our reference column to “Email” and associated it with the email variable.

After the reference column, specify the fields you want to update by selecting the column and the variable to correspond to that column as before. This is why we needed all

This means the bot will go sheet, check the “Email” column, find a match for the user and fill out the rest of the information.

13. Create Segmented Mailing Lists on Mailchimp


As you build the bot, ensure the bot is doing all it can to make your life easier.

For instance, if you are gathering emails, have the chatbot export those emails and other user data directly to Mailchimp (or any other mailing service using Zapier).

We wanted our GameWorld subscription bot not only to export the data to Mailchimp but also to send them to the right group within the mailing list to simplify the segmentation process.

So, before going for the Mailchimp integration, we set up a few conditional blocks. These blocks allow you to set up conditional logic mechanisms like “IF THIS THEN THAT”.

In the Landbot builder, the conditions you can use are:

  • Equals to
  • Does not equal to
  • Contains
  • Greater than
  • Less than
  • Is set

Since we wanted the bot to segment the subscribers based on their gaming device, we set up the condition as follows:

conditional logic how to build a bot

We repeated the set up for each of the possible devices.

conditional-logic-segmentation

If the bot finds the condition to be correct, it will channel the information to Mailchimp via the green output. If not it will follow to check the next condition and the next using the pink output.

Now the Mailchimp integration!

Drag an arrow from the first condition and select “MAILCHIMP” from the menu.

Pair your account with Landbot.

And set up the following according to the color codes in the image:

  • Yellow: Email Associated with the account
  • Green: Mailing list where you want to add the email
  • Pink: Group within that mailing list (if applicable – in our case, the “Device” group)
  • Dark Blue: @variable under which you are saving the user email
  • Light Blue: Other values you want to upload (e.g. name, birthday etc.)

mailchimp-integration

This way you can easily segment your subscription emails to the right group instantly.

Repeat the setup for each group and you are done!

create a chatbot mailchimp-integration-segmentation

NOTE: This chatbot is only using the Google Spreadsheets and Mailchimp integrations. However, Landbot builder offers a wide variety of similar easy-to-setup integrations to empower your chatbots including Slack and email notifications, Stripe, Calendly, Airtable, Zoom, Salesforce and Zapier which connects to hundreds of other apps!

14. Preview


As you go and create your chatbot step by step, you can always check the user experience and quality of the connections with preview.

To do so, click the “PREVIEW” button in the top right corner of the user interface.

From here, you can directly engage the new chatbot you just made as if you were a real customer on your website. Just follow the different answer strings and queries to see how you did in the building process and identify any possible errors.

You can even test the bot in a mobile view!

We just created a working subscription chatbot in under a half an hour!

The “hard” part is behind us 😉

15. Customize Your Chatbot Branding For a Better Experience


Ok, so we’ve built a chatbot in a matter of minutes. What now?

Well, the next step in perfecting the conversational chatbot of your own making is giving it a consistent LOOK for better customer experience.

Since you went through all that trouble of making a chatbot from scratch, it better match your website branding and color scheme!

Landbot gives you plenty of options to let your brand personality shine through.

To bring up design elements, click on “Design” in the header menu.

how to create a chatbot-design

It will open you to a whole new world of options! On the left side you will see a large list of customization features:

  • Design Templates: Allow you to select a theme from already created attractive Landbot templates. These come in handy when you need to get the chatbot out into the world quite quickly.
  • Colors & Background: Give you absolute control over the color scheme of your bot, hence here is where you will customize it
  • Logo & Avatar: Allow you to modify the logo and text that appears in the header of the chat as well as customize the chatbot avatar.
  • Fonts: Naturally, here is where you customize the font of your bot which is great especially if a specific font is part of your branding.
  • Advanced: Well, if you are lucky enough to know a bit of CSS or have a programmer on board, this is the space that lets you make the most significant changes – the only limit is your creativity (and your programming skills 🙈)

In just a few clicks, you can select a theme you like, adjust the brand, message, and logo in the header as well as your avatar.

NOTE: Be sure to click APPLY to save the changes in each of the design sections. And, once you are satisfied, remember to press SAVE in the upper right corner to update the bot.

16. Embed a Chatbot on Your Website (or Make a Chatbot Landing Page!)

Now that our Landbot underwent the necessary “brand-lift” makeover, we can show it off to the world and start collecting subscribers and leads.

Sorry to repeat myself, but (once again) Landbot chatbot platform makes this process super easy!

Go back to the Landbot app Click “SHARE” in the navigation bar on the top.

Here you can find four different embed options:

  1. Full page: Have the chatbot engage the user and take up the entire screen
  2. Popup: Have the chatbot popup upon landing on your site (or after a certain amount of seconds)
  3. Embed: Display your chatbot as an embedded function in one section of your website.
  4. Live Chat: Have your chatbot display as a live chat message in the corner of the user’s screen.

Clicking on any of the icons will show you a slightly different set of easy-to-follow instructions.

If you are ready to place your new Landbot on your website, you have two options:

  1. Copy and paste the code in the <body> section of every page on your website that you want the bot to work on
  2. Email the embed instructions to your developer

share-and-embed-your-chatbot

On the other hand, if you just want to create a temporary landing page and don’t care so much about the URL, select the option “Share with a Link” in the left-side menu. Here, you will find an automatically generated Landbot chatbot URL which you can link anywhere on your website, in an email or share on social media.

share-chatbot-with-a-link

And that is all!


Did You Learn How to Create a Chatbot?


Well, we do hope so!

Maybe you imagined the art of chatbot creation to be much harder than this. But that’s the trick. Efficient things don’t always have to be complicated.

What now?

Once you know how to build a chatbot, one thing is certain, your life will never be the same.

Every time you will want to create a form, generate leads, score prospects, design surveys or publish job applications or empower your customer service team, the thrill of creating a chatbot will take over.

That’s not a bad thing!

Chatbots have become an extremely popular and effective marketing tool. And, what’s even better, they are no longer out of your reach!

For instance, Landbot lets you build and create a number of bots in a very short time and at a relatively low cost provided you don’t need to hire developers and wait months for completion. And, while there are many chatbot platforms out there, few offer such an intuitive interface which serves multiple channels including the web as well as messaging platforms such as WhatsApp and Facebook Messenger.

Chatbots shouldn’t be hard to build or control.

No-code tools like Landbot make that happen.

👇 Register with Landbot for free and create a chatbot for your website now 👇

Barbora Jassova
barbora.jassova@landbot.io