Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

How to Build a Basic Chatbot with Motion.AI

Mar 23, 2020 • 9 Minute Read

Introduction

Chatbots are a great way to make a business competitive and in touch with its customer base. These bots can answer questions and communicate with customers through messaging platforms, even during business off hours. The bots can take advantage of the latest advances in machine learning algorithms to interpret language cues and answer questions more efficiently over time.

Creating chatbots was not an easy feat until relatively recently. A company called Motion AI carved out a niche by creating visual and multiplatform chatbot-building software. It was acquired in 2017 by Hubspot, a marketing company that previously relied on Motion AI software.

Why Chatbots?

You may be asking yourself, "why would I want to learn how to build chatbots?" Businesses are realizing the benefit of having chatbot engineers. A day, an hour, or even a second that a customer is frustrated and cannot answer their questions is potentially a wasted sale or a customer that may switch to a rival's product.

Chatbots offer a more personalized experience than other methods like call centers. The customer can interact directly with a bot rather than waiting to get through to a call center.

Motion AI's software allows you to not just build standard customer service bots that are designed to book meetings or diagnose problems without technicians present. This guide will explain how you can start to build your own chatbots with this tool.

How to Build a Bot from Start to Finish

Before starting the building process, think of what you want your bot to be able to accomplish. This way, you can take advantage of Motion AI's modules that are already available before starting to design anything too specific.

Modules

Motion AI's bot building process works through modules, which are packages of various logical capabilities or features you may want your bot to have. The modules you use will depend on what you are designing your bot for. This could range from the bot being a help tool to a problem solver.

Examples of modules include multiple choice questions and answers or the ability to send or receive data from a service. A bot can even scan your company's knowledge base for answers.

Building the Actual Bot

Before you can use Motion AI's software, you will have to register an account with HubSpot here by clicking on the Get started free button.

Once you register and have access to your account, go to Conversations and click on Chatflows.

imgbb

Then, click on Create chatflow on the upper right-hand side of the page. This will take you to a page where you have the option to create your bot for Facebook Messenger or to run it through your website.

imgbb
imgbb
imgbb

After clicking Add live chat, you can choose from a wide range of options to determine how the chat window will look. First, choose the color of the chat window and click the Next arrow to proceed.

imgbb

Then, choose the welcome message the chatbot will greet your site visitors with. You can also choose a custom name and avatar for the chatbot, and make yourself or anyone else on your team the owner.

imgbb

In this guide, Let me know if you have any questions? was chosen as the initial prompt, Chatbot was chosen as the name of the chatbot, and a logo was uploaded. The logo can be any image file.

imgbb

Next, you can choose the time the chatbot is available to interact with site visitors. In this example, Based on team member status was chosen, meaning that if a client messages the chatbot when no one is available to respond, a message will automatically tell the site visitor that someone will get back with them.

imgbb
imgbb

You can then preview how the chatbot will be displayed on your site across different devices.

imgbb

After previewing your chatbot, you will get the tracking code (a JavaScript script). You will need to insert this into the HTML file of every page you want the chatbot to appear on just before the end of the <body> tag. Adding it to your site footer is also an option.

Click on the Verify installation button on the lower right of this HubSpot window and publish. Now your chatbot should be available on your site.

Further Customization

You can target specific users with the chatbot from the setup menu after publishing it on your site. Go to Conversions > Chatflows and click edit in the window you see with your chatflow. Options include targeting users from certain regions of the world or who are using certain device types.

imgbb

From the Display section, you can allow the chatbot widget to appear and target your site visitors after any period of time you choose. You can even edit the chatbot placement by going to the chatflow settings and clicking inbox settings on the bottom of the Display section. This will take you to a menu where you can customize your chatbot’s location and change its availability from what you originally set up.

imgbb

When someone interacts with your chatbot, you'll get an email with a link that takes you to Hubspot's API so you can take over the conversation. You can also integrate it with Slack.

If you want your chatbot to become more of a service bot than just a helper, you can do so with Service Hub access. If you are an enterprise or professional user, you can also add if/then branches to control the flow of the conversation beyond just a greeting or basic answers.

You can do this with the plus icon in the edit chatflow section as is outlined here. You can think of if/then statements as conditional statements in code if you use a language such as JavaScript. This allows the chatbot to respond to the user's if queries using then commands.

If you are using one of the premium plans, you can add the knowledge base lookup within the chat. This can either make the whole knowledge base available to your visitor or just certain pages or sections based on questions the user asks.

You can also do things like create a contact property value for your visitor based on the questions they ask. This way you can track them easier and nudge the bot to classify them as a certain type of customer or visitor with specific needs.

Conversions API Explained

The Conversions API allows you to customize your chatbot even further. More information about this method can be found here.

This API is located in the window.HubSpotConversations object and treats the chatbot as a widget. Available methods can be accessed using the object, and the HubSpot script loaded on your webpage will create it for you. It may not appear right away.

To be able to wait to access the API until it has been implemented within the object, you may use the window.hsConversationsOnReady helper. Once this occurs, you can use JavaScript to further customize it.

The code below tells the chatbot widget to load in an open state:

      window.HubSpotConversations.widget.load();

/* ... */

// Force the widget to load in an open state
window.HubSpotConversations.widget.load({ widgetOpen: true });

This was a Boolean primitive and by default it was set to false. Here is another useful JavaScript function where the chatbot widget will refresh with a new render of information on route changes. If the widget.refresh is called when the site visitor is not engaged in conversation, it can disappear and let the site visitor continue browsing your site uninterrupted within the page URL.

      window.HubSpotConversations.widget.refresh();

If you want to force the widget to open, you can enter this code:

      window.HubSpotConversations.widget.open();

This is how to force it to close:

      window.HubSpotConversations.widget.close();

Conclusion

Motion AI's chatbot is easy to set up and allows customization even after it is live on your site. With the premium plan and options such as if/then conditionals and the Conversations API with JavaScript commands, you can customize it further.