- Chat Widget Theme
- Header Text
- Header Logo
- Hint Text
- Widget Colour
- Font Colour
- Chat Interface Position
- Notification Sound
How To Build Your First Chatbot In 4 Simple Steps.
This step by step guide will show you how to build a lead generation chatbot bot using the Hello Moe platform. You’ll learn how to test & customise your brand-new bot and find out how you can add it to your website.
What you will learn:
- How to build a chatbot
- How to test your chatbot
- How to customise your chatbots appearance
- How to add a chatbot to your website
Building a chatbot isn't rocket science, you don't need to have any coding or dev skills. In fact, you can go from beginner to expert in the time it takes to drink a cup of coffee.
Section 1 : How To Build A chatbot.
To create your bot using our framework, you will need an active Hello Moe account. Visit Hello Moe and create your account.
Hello Moe offers a free trial, so you can build your first bot and start communicating with customers and leads without any hassle or making any commitment. No card needed, no contract to sign, no strings attached. Go on then, what are you waiting for?
You can do this using either of the below action blocks:
After creating your account you’ll land in Bot Builder, this is the place where you will manage your bots or build new ones for different channels. You will find two different types of bot:
Inbound
Bot responds to incoming queries on your website or social channels
Outbound
Reach out to existing contacts via WhatsApp or SMS
Choosing Your Channel
Any bot you make is specific to a particular channel. No matter the method of creating a bot, you need to choose a channel. Hello Moe currently supports Web, Facebook Messenger & WhatsApp. We will be adding SMS soon.
In this guide, we will focus on building an Inbound chatbot on your website.
Select Web:
Build from scratch or choose a pre-built template:
Our conversation designers have created a library of templates that are task or industry-specific. You can use the templates out of the box, customise them with your own content or simply use them for inspiration.
We’re going to build from scratch; therefore, you just need to hit the button on the top right-hand side.
Bot Builder
Bot Builder is where you will create, customise and design each chatbot. It’s easy to use so you can design conversation flows without any experience or technical know-how.
Bot Builder is made up of four main components:
Utility Tools
Tools like version control, undo-redo, and auto-layout to make you more productive.
Canvas
Where you build & edit your conversation flow.
Action Blocks
The building blocks for the bot. Consider them as an action that the bot performs, like sending a message, collecting an input, etc.
Side Panel
Where you configure each block and add custom content
Setting A trigger condition?
A chatbot always has to start with a trigger, you will find the trigger block already there when you start to build a new bot.
By default, the bot is triggered to appear without any condition defined.
Here are 3 conditions that you can trigger the bot with:
- Date Range
- Browser Language
- URL
Starting the conversation - Adding Action blocks.
A bot is made up of multiple action blocks connected in a conversation flow.
Each block performs a specific action, for example, data capture, messaging, or appointment scheduling.
To discover the full list of possible actions, click the blue port (+) and
You can combine any of these blocks to design your conversations.
Welcome The User:
In our example, we will greet the visitor, collect their contact details & schedule an appointment.
Select the “Send Message” Action block. Click on the block to reveal the control panel and customise your greeting.
Lead Capture:
To capture a lead, you need to collect the visitor’s name, email, phone, and date of appointment.
You can do this using either of the below action blocks:
Collect Input
Ask visitors for their information via a series of questions.
Form
You can edit and configure data fields as per your requirement
We will use Collect Input to capture the lead information.
Ask for their name:
Ask for their email
Ask for their phone
Saving Customer Information With Input Validation:
When a user enters their details we need to capture the information and store as a custom variable. This lets us recall the information later.
Select the “Send Message” Action block. Click on the block to reveal the control panel and customise your greeting.
Input Name
Use input validations or create custom variables.
Recall
Use inputs and validations to confirm and summarise data.
Select Date:
Now we want the user to select a date for their appointment.
Choose the calendar action block & configure the date range in the control panel on the right.
Set up email notifications:
Once all the details are captured by the bot, you can use the ‘Send an email’ block to get notified that an appointment was booked.
In this email, you can include the entire chat transcript or only the fields that you want like name, email, phone, and date of appointment.
We recommend adding this block immediately after you’ve captured all the data you need.
Summarise & Confirm:
To confirm the appointment you will need to recall the information the user has provided.
You can do this by adding input variables into the conversation.
These variables can be used for replacing values in the conversation, such as #date# and #name#
Section 2 - How to test Your Chatbot?
Once you’ve built the conversation you will need to test your chatbot.
Click on the ‘Preview’ button to test the bot. A new tab will be opened, you can now experience the chatbot as a visitor would do. This will allow you to detect mistakes quickly and fix any issues before you set the chatbot live on your website.
Section 3 - How to customise your chatbots appearance?
Now that you’ve tested the bot you need to customise the look and feel of your chat widget. Head to the configuration tab then select appearance. Here you can. Choose your brand colours, change the theme and add profile picture and branding.
Section 4 - How to add your chatbot to website and set live?
Now you know how to build a chatbot, you’ve designed your first conversation flow and customised the appearance of the chat widget, let’s get ready to set your chatbot live.
Select configuration under the web menu then follow the instructions on the right
Step 1 : Enter the website URL
Your website URL where you’d like to deploy the bot
Step 2 : Copy & paste the code snippet
Copy & paste the code snippet only on those pages, where you’d like to display the bot
Step 3 : Test the integration
Visit your website URL and check if the chat interface appears
Try Hello Moe For Free
Build AI powered chatbots in minutes No code, no stress. Automate conversations, qualify leads, and support customers 24/7.
- 7 Days Free
- No Contract
- No Strings