How to Make a Chatbot for a Website in Minutes

Since the pandemic brought them back into the spotlight, chatbots are having their renaissance. Therefore, this article not only shows you how to create a chatbot, but also how to do it quickly, efficiently, and without complicating well-established workflows.‍

Each Today, the world vibrates a little stronger with the hype of conversational marketing. For some years now, technology and business publications have been driving brands to build a chatbot to bring their communication up to the personalization and immediacy standards of current audiences.

After the global pandemic shut down most of the world at home, the need for seamless customer-business communication is even stronger and more urgent.

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

A few years ago, the answer to how to make a chatbot was littered with software development terminology and loads of code. Therefore, the task of creating a chatbot fell largely on the shoulders of a few expert bot developers.

But times have changed.

Thanks to the rise of Codeless platforms, chatbots development became more intuitive and consequently more accessible to a broader range of brands and businesses. If you’re not convinced, you can always check out some great chatbot examples built with Landbot!

Today, you can not only build a chatbot, but you can also in just a few minutes. Better yet, for more than one channel!

Not kidding.

We never joke about bots!

What is a chatbot?

A chatbot is conversational software that allows businesses to communicate with their audiences instantly and in a personalized way without reducing automation. Imagine getting user information in real time. ! Most people associate intelligent chatbots with AI. However, AI is not essential to creating an intelligent and functional bot.

There are two main types of chatbots:

  • Natural Language Processing (NLP) chatbots ( aka artificial intelligence chatbots)
  • Rules based bots (choose your own adventure)
  • Conversational apps (rich UI elements + can combine NLP with based elements) ​in rules)

What type of chatbot will you learn to create in this article?

By now you may be wondering what type of chatbot you will learn to create here. The answer is simple. The tutorial shows you how to build the rules-based chatbot for a website with some conversational app basics such as these types of bots:

  • They offer the most consistent and reliable experiences/results
  • They are quick to create and easy to control
  • They are applicable in the vast majority of commercial use cases

Here’s a little preview of the end result:

However, if you are hesitant to create an NLP chatbot, you can also do it without coding using Landbot’s Dialogflow (API.AI) integration. Click the link to access the tutorial! (Machine learning-powered NLP may be the best choice if you’re trying to build an assistant for WhatsApp, plain text messages, or another messaging platform with a more limited user interface.)

‍¿ Ready? Let’s learn how to make a chatbot, quickly and without coding.

How do I make a chatbot for my website?

This bot won’t cost you an arm and a leg or require hiring a developer to do it. With this chatbot tutorial, anyone, whether you’re a salesperson, sales rep, or customer service representative, can create a sophisticated conversational assistant worthy of representing your brand.

Landbot makes it easy to create a chatbot, pretty and (without a hint of exaggeration or bias)fun!

Let me show you..

1. Set up your Chatbot Builder account (Fast and free) and get started

First of all, you must create an account with Landbot. Registration is free and requires no credit card information.

Watch this video to get an idea of ​​how the builder works:

For the purposes of this tutorial, I chose to create a website chatbot even though the creator is the same no matter which option I choose.

NOTE: I’m more interested in the solution of WhatsApp for your business? If you choose to create a WhatsApp bot, you will not be able to use all the features that Landbot offers, as this messaging service has a limited user interface. Visit our guide to designing WhatsApp dialogs for rule-based chatbots to learn how to fix it.

After selecting the channel, you will be taken to Landbot’s library of chatbot templates, which is full of pre-built templates specific to use cases. … But, to make this tutorial at least a bit difficult, we’ll start building a chatbot from scratch. 😉

3.Optimize the welcome message

Creating a chatbot from scratch with Landbot is extremely easy. It is about optimizing the conversation blocks of your choice.

The first message to customize is the welcome message, which is a fairly flexible block. which allows you to incorporate text messages, multimedia 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”.

So, I decided to customize my welcome block as follows:

My bot introduces itself and the user can start the conversation with the chatbot by clicking on the “Hello” button. Since this is a welcome sequence, keeping it simple with a single answer helps drive engagement.

4. Add your first thread

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

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

‍Given that our welcome message only has a button option (so it’s not really an option 😁), it doesn’t matter if you drag an arrow from the “Hello” button or the default one. After dragging an arrow, you’ll see a menu of questions and embed blocks.

Choose “Simple Message” as your new block type, and to edit it, simply type your message . And that’s your first sequence!

5. Ask a question (Name)

The key to knowing how to create any basic interactive chatbot is real-time customization. It would be a shame not to take advantage of that right from the start, for example by asking for the username.

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

See Also:  Restaurant App Builder

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

As the Name block is displayed, its side settings window will also appear on the left:

Here, you can customize the text from the default question “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 preset @name variable so you don’t have to. valuable seconds configuring your own.

NOTE: In the Landbot chatbot application, variables in the form “@” + “variable name” are used to categorize and store the data collected by the bot. You can use this data for personalization within the conversational flow or export it to an external database. You can use default variables or create your own.

‍By saving the user’s name under the variable, you can customize the interaction in the next step:

6. Ask Questions (Button Choice)

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

The button block works the same as the welcome/message block.

You can split your bot’s speech into multiple bubbles or add visual media before presenting the user with a button option.

We couldn’t resist including one more GIF!

p>

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

  • Learn more about GameWorld
  • Subscribe

If the user is not yet ready to subscribe, they can get more information about the platform and answer any questions they may have. To split the flow based on the user’s response, drag an arrow from “More Information” About GameWorld” and design the flow that will follow:

We set up another message block, this time with a short video, which we assumed it would be a more fun way to learn about the magazine and meet the founders! Still, our main goal is subscription, so after this little introduction, we wanted the bot to ask one more time:

This time the options offer subscription or just proceed to front use the magazine to give them an outlet (and not cause any frustration).

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

The goodbye block offers quite a few advantages.In addition to saying a goodbye message, you can:

  • Include social sharing buttons
  • Offer the option to restart the conversation
  • Activate automatic URL redirection and customizing the redirect message

Thanks to the message, even if the user does not subscribe, they can check their social accounts or go directly to your website without having to do click nothing. click “Subscribe” though?

In that case, we’ll guide you to the subscription flow… let’s build it!

7. Ask a Question (Email)

The most important piece of information 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 option (Learn More vs. Subscribe) and draw an arrow from the “Subscribe” option.

Luckily, Landbot’s chatbot app has a question designated as “EMAIL”. block that not only comes with a preset @email variable, but also checks the format of the email. That means the bot will not accept the user’s response unless it is the common format ” xxx@xxxx.xx“.

After setting up the email block, draw an arrow from the “Subscribe 🚀” option in the “Learn more” Conversation Branch. In this way, whether the user decides to subscribe immediately or after learning a little more about the magazine, they will be directed through the same subscription funnel.

8. Export data to Google spreadsheets

Another secret The part of knowing how to create a chatbot that will make your life easier is the integrations >!

So, now that we have the most important piece of data, we want to integrate Google Sheets into the bot and export it to our database. It’s these kinds of integrations that make it a powerful virtual assistant! To do so, you must first set up a designated spreadsheet in your Google Drive:

Once this is done, go back to Landbot chatbot builder platform,drag a green arrow from the email block and choose “GOOGLE SHEETS” from the menu:

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

Click “ADD ACCOUNT” and pair the two tools. Next, from a dropdown menu enter:

  • Account (email address) you want to link your bot with. (If you’ve paired your Landbot account with more than one account, you’ll see all previously added accounts in this dropdown list)
  • The spreadsheet you want to submit the information to
  • The sheet within the spreadsheet where you want to submit the information

You will then be prompted to “Select an Action” that you want to perform:

  • Create an new row (Export)
  • Update an existing row (Export)
  • Retrieve data from the spreadsheet and bring it into the conversation (Import)

Since you will be creating a new row for each new subscriber at this point, select “Insert a new row”.

After this, all you need to do is match the column names with the variables you want to store in these columns:

Click SAVE and the integration configuration is done. ready, a real piece of cake!

9. Ask a question (photo buttons)

There’s more to the button block than meets the eye! After we get the user’s email, we want to learn more about their preferences so we can provide an answer more personalized. subscriber experience.

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

A visual editor of button blocks will appear on the left side of the screen. There, you can enhance your button selection questions with some rich media:

See Also:  11 Ways Websites Make Money

Once you’re done loading the images, scroll down in the editor and create a variable to store this response:

Click “SAVE”. This is what the image button option on the front end might look like:

Isn’t it fun to create an interactive chatbot?

10 . Ask a Question (Picture Choice AKA Carousel)

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

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

To set it up, you need to >configure the three main fields:

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

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

Since there are quite a few main types of games, the carousel seemed like a much better option since the normal buttons would have taken up the entire screen.When configuring the image option, proceed in the same way as with button images: define the description and upload a corresponding image.

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

This is how your effort will be reflected in the interface:

Who would have thought to learn to create a custom chatbot? would it be as easy with a carousel wheel?

11. Ask a Question (Multiple Choice)

Our question variations adventure is not over yet… The Buttons block hides another key feature and that is multiple choice for occasions when that one option alone will not do it. For example, in our magazine subscription bot, we wanted to see what kind of content the new subscriber enjoyed the most without limiting them to just one answer.

To set up a multiple choice question:

  • Create another block of buttons and button responses
  • Click on the three dots in the upper right corner
  • Scroll down in the editor and activate “Multiple Choice !
  • Remember to set the response variable

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

12. Ask a question (open end)

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

To give space to write and the unrestricted user input, you can use the “TEXT” question block which simply provides an empty field for the user to fill out.

For example, one of our last questions on the subscription was “Where heard about us?” we wanted to be sure to capture all responses. Therefore, we created a button with the option “Other” and connected it to a block of open questions to find out what that other meant.

The only thing to specify here is the question and of course the variable which must be the same as the parent question variable for the new free input answer to override “other”.

13. Let the user rate the experience

Do you want to know how it goes?

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

Draw an arrow from the last question of the Buttons as well as the sub-question and select the “GRADING” block from the menu.

The setup is, once again, quite simple:

  • Write your rating questions
  • Select the rating format (number of stars, emo…)
  • Create the variable to store the response

14. Update the Google spreadsheet with new data

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 in the last block and use the Google Sheets integration block once more.

The setup here is pretty much the same, except you need to set the action to “Update a row” since we want the bot to update a row it previously created.

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

After the reference column, specify the fields you want update by selecting the column and the variable that corresponds to that column as before.

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

15. Create Segmented Mailing Lists in Mailchimp

As you build your bot, make sure it’s doing everything you can to make your life easier.

For example, if you’re collecting emails, keep the bot exports those emails and other user data directly to Mailchimp (or any other mail service Zapier uses).

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

So, before integrating Mailchimp into the bot, we set up some conditional logic blocks . These blocks allow you to set up conversational logic mechanismsin the style of “IF THIS THEN THAT”.

In the Landbot chatbot application, the conditions you can use are:

  • Equals
  • Not Equals
  • Contains
  • Greater Than
  • Less Than
  • Is set

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

We repeat the configuration for each of the possible devices.

If the bot finds that the condition is correct, it will channel the information to Mailchimp through the green output. If not, it will continue to check the next condition and the next one using the pink output.Mailchimp integration now!

Drag an arrow from the first condition and click “MAILCHIMP” in the menu. Pair your account with Landbot.

And set 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’s email
  • Light Blue: other values ​​you want to load (eg name, date of birth, etc.)

This way you can easily segment your emails subscription to the right group instantly. Repeat the setup for each group and you’re done!

NOTE: This conversational assistant only uses the Google Spreadsheets and Mailchimp integrations. However, Landbot builder offers a wide variety of similar easy-to-configure integrations to power your bots, including Slack and email notifications, Stripe, Calendly, Airtable, Zoom, Salesforce and Zapier. strong> that connects to hundreds of other apps!

16. How to test your Chatbot?

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

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

From here, you can directly interact with the new bot you just created. Create as if you were a real customer. on your website. Just follow the different response chains and queries to see how the build process fared and identify potential errors.

You can even test the bot in a mobile view!

Simply created a functional conversational subscription experience in less than half an hour. The “difficult” part is behind us 😉

17. Custom-brand your chatbot for a better experience

Okay, we’ve built a chatbot in minutes.

Now what?

Okay, the next step to perfecting your own conversational chatbot is to give it a consistent LOOK and LOOK for a better customer experience.

Since you went to the trouble of creating a bot from scratch, it’s best to match your website’s branding and color scheme.

Landbot gives you lots of options for how the Your brand personality shines through. >.

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

It will open up a whole new world of options for you! On the left side, you’ll see a large list of customization features:

  • Design Templates – Allows you to choose a theme from attractive Landbot templates already created. These are useful when you need to get your bot out into the world relatively quickly.
  • Colors and Background: Gives you complete control over your bot’s color scheme; so this is where you’ll customize it
  • Logo and Avatar: allows you to modify the logo and text that appears in the chat header, as well as customize the bot’s avatar .
  • Fonts: Naturally, this is where you can customize your bot’s font, which is great, especially if a specific font is part of your brand.
  • Advanced: Well, if you’re lucky enough to know a little CSS or have a programmer on board, this is the space that allows you to make the most significant changes – the only limit is your creativity ( and your programming skills 🙈)

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

NOTE: Be sure to click APPLY to save the changes to each section of the layout. And, once you’re happy, remember to hit SAVE in the top right corner to update the bot.

18. How to add a chatbot on your website? (or Create a Bot Landing Page!)

Now that our Landbot has had the necessary “branding” makeover, we can show it off to the world and start collecting subscribers and leads! Sorry to repeat it, but (once again) the Landbot chatbot platform makes this process a breeze!

Go back to the Landbot app Click “SHARE” in the navigation bar at the top . Here you can find four different embed options:

  1. Full Page – Make the bot engage the user and fill the entire screen
  2. Popup: Have the bot appear on landing on your site (or after a certain number of seconds)
  3. Embed: display your bot as an embedded feature in a section of your website.
  4. Live Chat: have your bot 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’re ready to put your new Landbot on your website, you have two options:

  1. Copy and paste the code into the section of each page of your website that you want the bot to work on
  2. Email the embed instructions to your developer

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 “Share with a link” option in the menu on the left side. Here you will find an auto-generated Landbot chatbot URL that you can link to anywhere on your website, in an email, or share on social media.

Note: Do you have a WordPress website? Then be sure to check out our custom tutorial on how to install your custom chatbot for your WordPress site!

Have you learned how to create a chatbot?

Well, we hope so!

Maybe you imagined that the art of creating interactive chatbots was much more difficult than this. But that’s the trick. Efficient things don’t always have to be complicated.

Now what? Once you know how to create a custom chatbot, one thing is for sure, your life will never be the same again.

Any time you want to create a form, generate leads, answer FAQs, qualify leads, designing surveys, posting job applications, or empowering your customer service team, the excitement of building a bot will take over.

That’s not a bad thing!

Conversational assistants they have become extremely popular. and an effective marketing tool… In fact, the benefits of chatbots are endless. And even better, they are no longer out of your reach!

For example, Landbot allows you to build and create a number of bots in a very short time and at relatively low cost. Its visual interface allows you to master even “coder” skills, such as webhook integration. And while there are several platforms out there, few offer such an intuitive interface that serves multiple channels, including the web as well as messaging platforms like WhatsApp and Facebook. . Messenger.

Simple chatbots shouldn’t be difficult to create or control.

No-code chatbot tools like Landbot make it easy to that happen .

.

See Also:  How to create a blog and earn money in hindi

Leave a Reply

Your email address will not be published. Required fields are marked *