how-to-create-a-chatbot-for-a-website

Every day the world buzzes a little louder with the hype of conversational marketing. Blogs and online magazines encourage you to make your own chatbot to bring your customer service or lead generation to the 21st century. But how?! How to create a chatbot? Did someone give a course to all humanity but forgot to invite you?

You are no programmer. Nor are you a corporation with a fat budget to play around with futuristic concepts of artificial intelligence and natural language processing.

No.

You have to take care of your business, your customers, your potential customers.

So what? Should you just give up on all the incredible conversational bot benefits everybody talks about?

Of course not!

We are here to tell you that making chatbots is no rocket science. You can do it. Better yet, you can do it in just a few minutes!

No kidding.

We never kid about website chatbots .

We will teach you how to make a bot quickly. To be more precise, we will teach you how to make a friendly, personalized website chatbot your customers love – quickly – a bot that can answer customer questions and drive qualified leads!

So, forget the complexity and the complaints about robotic, monotone, and boring conversations that people arent thrilled with. Heres how to create a chatbot for a website, landing page, pop-up or messenger in just a few minutes.

Ready? Lets jump in.

Make your own chatbot from scratch (in a few minutes 予)

Building a chatbot shouldnt cost an arm and a leg. While we are at it, it shouldnt require hiring a chatbot developer, either. Not when youre a small business, and not when you need to fire up conversational bot campaigns in a snap of a finger.

Using Landbot.io chatbot platform, you can.

Its easy, its pretty and (without a hint of exaggeration and bias) its fun!

Let me show you

1. Set up your website chatbot (fast & free)

Before anything else, you need to visit Landbot homepage and create your free account by clicking to sign up or hitting Yes! Create my bot.

make-your-own-chatbot

After a painless signup process (if you could even call it that), youll land on the Landbot dashboard (pun intended).

2. Select the next step (template vs blank bot)

The Dashboard lets you pick between a variety of templated conversation bot structures we created to help you get started:

make-a-chatbot-landbot-templates

OR you have the option to develop your very own bot formats for your landing page, Facebook Messenger, or WhatsApp.

create a chatbot online

In this easy-peasy How to Create a Bot tutorial, well show you how to build a bot using Landbot from scratch.

3. Create a chatbot (from scratch – without coding)

create-chatbot-for-website

Hover over Create a new Landbot, and then select Blank Bot – you will be directed to the new bot builder and editor.

chatbot-without-coding

Its not just pretty on the surface! Creating bots with Landbot is extremely simple. For example, you just got in and there is already an engaging welcome message that gets the conversation flow started 儭.

conversational-flow-welcome-message

The text in the highlighted box is what your bot will say when engaging a new user (along with the Gif). You are free to completely change this if you wish – nothing is written in stone.

Below that are your buttons. Buttons are simple ways that users can respond to your bot. Given that this is a welcome sequence, keeping it simple with a single answer helps to speed up the process.

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

Lets adjust our welcome message and GIF:

  • Message: Simply type in whatever you want to say to welcome your user
  • GIF: Click the edit pencil icon in the upper left corner of the GIF (You can search GIF directly from the Landbot bot builder!)

making chatbot without coding

4. Add your first sequence

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

In this case, we only had Hi! as the user response, so you will want to drag the green arrow from the Hi! button.

Next, select Simple Message as your new block type.

To edit just type in your message.

make-your-own-chatbot-online

5. Ask a question

First of all, drag the green arrow/dot again from your latest message block.

This will let you create another block type.

bot-without-coding-block-types

For our next block, we will ask our first-time visitors a question about how they arrived on our website.

We will give them several options to choose from, simply to avoid the endless response variety at this point and keep control of the conversation!

So, to create a question that can be answered by clicking on a given selection of answers, select the Buttons option.

A new block will open.

  • Use the text box to type the question you want your bot to ask the user.
  • To edit the responses click on the button and type your answer.
  • Each time you want to add a new answer option, click the little plus that appears when you hover the mouse over the button area. Alternatively, click the icon to delete the answer.

easy-chatbot-builder-buttons

6. Diversify the conversation flow (when needed)

From here, you have an array of options on how to continue creating your bot.

First of all, you can either:

  1. Drag the green arrow from individual answer options, like Google and Facebook.
  2. Drag the green arrow from the Default button to give the same continued string to all the answers above.

So, whats the difference?

By dragging multiple arrows from different answers, you can tailor the conversation to different customer segments.

For instance, dragging the green arrow from Google, you could ask your users if this is the first time they are visiting your website. On the other hand, for Facebook, you can create an entirely separate conversational string specific to that segment of your traffic.

Why would you want to do that?

Different customer segments respond better to different messaging. Cold Facebook traffic who is just getting to know you will respond to a vastly different campaign than brand-aware users from Google.

BUT

We dont want to do that at this point. In our example case, we do want to know how the new users heard about Game World but our goal is different get a subscription!

So, we will drag an arrow from Default button and ask our next question!

chatbot-for-you

There is an array of question options to choose from, all tailored to be the perfect means to your intended goal.

To give you a general idea… Besides Simple Message, Media or Button question options, you can ask for:

7. Develop branches of the conversation

Here is where things get interesting! Our last question gave users two clear options:

  • Subscribe
  • Learn more about GameWorld

Naturally, the conversation flow needs to branch out in different directions.

Subscribe Thread

On the other hand, those who choose to Subscribe will be able to complete the process as part of the conversation!

  • First, we asked for a name by selecting Questions option and then Name.
  • Choose the adjust or stick to the default question. When done, click Save.

make-a-chatbot-without-coding

  • After you as for a name, its a great time to give it a more personal touch by including the user’s name in your response. Drag the green arrow and create another Simple Message field and type in: Thank you, @name.

create-a-chatbot-online

  • Continue the thread by asking for an email.

easy-chatbot-builder

And we have our first subscriber! Though its always a nice touch to let people check their info. Its human to make typos!

  • Insert Simple Message listing the entered information for the user to review
  • Give them options to correct individual fields or continue if all is OK

make-your-own-chatbot-online

  • Thank the visitor for subscribing and…

create-chatbot-from-scratch

  • Connect to the final Goodbye block (its a real treat). Drag the green arrow and scroll through block types and select Goodbye.

create-website-chatbot-free

Open the block and customize in the panel that will appear on your left. You will be able to:

  • Customize goodbye message
  • Activate social share buttons
  • Activate the Start Again button for anyone who wants to go through the conversation again
  • Redirect the chat to a URL

chatbot-for-website

In our text case for GameWorld, we decided to customize the message and redirect the subscribers to the magazine home page so they can start exploring.

The coolest thing? You can set a redirection countdown!

website-chatbot

“Learn More” Thread

I hope you didnt forget about the Learn More thread!

For the Learn More option you can:

  • Provide a short description or a compelling business origin story summary (select Simple Message)
  • Treat your visitor to a short video about your business or service (Select Media option)
  • Send them to your blog or about us page (Select Questions & URL)

We decided to combine a couple of simple messages with a video!

Pro tip: If your written message is too long for a chat, split information into several parts (just click plus icon to create a new typing field – see below). To learn how to create a natural sounding chatbot conversation check out “How to build a chatbot conversation that converts!

how-to-create-a-chatbot

Once done with the text, create one more field and switch to media. You will be able to enter a YouTube link to your video.

After the introduction, we asked again if the user wants to subscribe or (this time) proceed to browse the magazine.

  • Connect the Subscribe button to the Subscribe thread you created for the other answer.
  • Connect Browse Magazine to the previously created GoodBye block.

Voila! Youre done!

8. Test your chatbot in Preview

Now you can test your creation directly within the editor to make sure it flows just like you expected.

To do so, click the Preview button on your dashboard.

From here, you can directly engage the new bot 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 that you will need to fix.

You can even test the bot in a mobile view!

So, we just created a working subscription chatbot in a matter of minutes.

The hard part is behind us

9. Integrate your bot with the tools you use!

Now that we have created the chatbot and ensured the conversation flow works perfectly, its time to CONNECT it to the tools that matter and ORGANIZE the data it collects.

Dont worry!

You can set up to receive notifications to your email, a designated Slack channel, update the collected data on a Google Spreadsheet or directly on Mailchimp.

Lets see how to set up email notifications for every new subscriber!

First of all, break the green arrow connection, when you define the spot where you want to be notified.

drag and drop interface

 

Now, drag the green arrow and scroll down the Block Types menu and select Email

optimize email notification

  1. Enter all the email accounts where you wish to receive email notifications.
  2. Adjust email subject according to your needs
  3. Enter the necessary variables into the email message
  4. Click Save

 

setup email notifications

Drag the green arrow from the email field to the final message to close the thread.

landbot-builder

And we are done!!!!

Here is how the email notification looks like:

landbot-email-notification

10. Customize Your Chatbot Branding For a Better Experience

Ok, so weve 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!

So, lets do it! Landbot gives you plenty of options to let your brand personality shine through.

To bring up design elements, click on the little artist on the right side of your bot building dashboard.

goodbye message

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

personalize-your-landbot

  • Design Templates: Allow you to select a theme from already created attractive Landbot templates. These come in handy when you need to get the chat bot 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 coding 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, we selected a theme we liked, adjusted the brand, message and logo in the header as well as our avatar:

landbot preview

Once you are satisfied, remember to press Save & Publish in the upper right corner!

11. 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 bot platform makes this process super easy!

Go back to the Landbot app and focus your eyes to the top center of your screen and click on the lovely word Share.

how to share your bot

In the chatbot building dashboard, click to the Share step in the creation process. From here, you can either:

  • Share the landbot link directly on Social Media
  • Embed the chatbot on your website

embed options

The embed option presents you with four different styles:

  1. Full page: Have the bot engage the user and take up the entire screen
  2. Popup: Have the bot popup upon landing on your site (or after a certain amount of seconds)
  3. Embed: Display your bot as an embedded function in one 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 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 embed instructions to your developer

embed bot on website

And thats it! Once youve applied the code, your Landbot will be ready to interact with users and collect valuable lead information or assist them in their journey.

All this has been done in under 25 minutes. Don’t believe us? Watch the video below:

12. Life after you learn how to create a chatbot…

Well, you did it!

I bet you thought thatlearning how to create a chatbot is going to be much harder…

One thing is certain, your life will never be the same.

Every time you will need to create a form, collect leads, design surveys or publish job applications, the thrill of creating a bot will take over

Thats not a bad thing!

Chatbots have become an extremely popular and effective marketing tool. And, whats even better, they are no longer out of your reach. There is no need to study up on complicated machine learning and NLP, nor is there a need to be depended on the whims of Facebook messenger platform. Just hop on the wave and dominate the rise of conversational websites.

Landbot lets you build and create a number of bots in a very short time. Drag, drop, publish and collect leads! Even the complex conversational bots are easy with Landbot Bricks feature.

So, I hope we convinced you.

Chatbots dont have to be hard to build. And they dont have to be boring and robotic to talk to.

Related Post