How to build a web chatbot – best practice and step-by-step instructions

Chatbots have matured a great deal in the past few years in terms of their sophistication and usefulness. What was once a novelty with not much real-world value, is now a key part of a business’s strategy for attracting new customers, providing a better service to more people, and making significant cost savings. Crucially, with the development of no-code chatbot building tools – anyone can build and deploy one without needing a developer.

A growing number of people now use a website’s chatbot as the primary way of finding the information that they want rather than navigating through the page structure or using the search function. With this in mind, chatbot designers must focus on customer intent to make this process as streamlined and simple as possible.

In this blog we look at best practices for designing a web chatbot, the types of chatbot that can be deployed on a website, and finally step-by-step instructions for actually building your own web chatbot, with no coding experience necessary.  

That’s an easy one surely? Web chatbots are integrated into a website and chat app bots are deployed on chat channels like WhatsApp, Messenger, or Viber.

That is true, but the differences are more numerous and, in some cases, far more subtle. Trying to take the same approach to designing each kind will result in a poor customer experience and missed opportunities for both engagement and sales.

Some of the key differences between web chatbots and their chat app equivalents that you need to consider before beginning the design process are covered below.  

One of the advantages of web chatbots is that the business has complete control over the behavior, intent, and functionality of the any virtual assistants that they deploy on their websites. On the other hand, app chatbots are integrated into mobile applications and are limited by the functionality that is exposed by the apps’ API.

The apps will also have strict guidelines on how the chatbot is implemented and rules for interacting with customers, for example around opt-in and the types of messages that you can send. Any future changes to these guidelines might require significant re-coding to make your chatbot compliant.

For a web chatbot the potential target audience is literally anyone that has access to a browser and an internet connection. No single chat app has the same reach, with different apps having very different usage rates in different regions. To reach anywhere near the same number of people as a web chatbot would require a business to build multiple versions of their chatbot for apps including WhatsApp, Messenger, Telegram, Viber, and WeChat.

The benefit of chatbots deployed on mobile apps is that they can get direct access to the phone’s features, for example its camera, microphone, and location services.

By being deployed on your website a web chatbot can be closely aligned with your brand identity and tone of voice. Bots deployed on chat apps have limited scope for branding, but there are no limits for web chatbots, which can also be updated for holidays and special occasions like Halloween and Valentines Day.

There are two considerations when looking to enable appropriate contextual interactions.

Chatbots that have been designed for a very specific task are often better suited to being deployed on a chat app. For example, a chatbot that guides a person through a process like a product registration or activation which can be launched by scanning a QR code on the product packaging. Some of our Telco customers have used this tactic very successfully to help their customers to register new SIM cards.  

This could be achievable with a web chatbot, but it would require more steps and where multiple products and regions are involved it would get complicated very quickly.

These chatbots follow a pre-configured decision-tree structure to enable people to find the answer they are looking for via a set of options. You could think of them as the digital equivalent of an automated phone system where the caller selects a series of numbered options to be connected to the correct department.

Rule-based chatbots are the quickest and easiest to set up but can be incredibly useful for answering day-to-day queries that customers may previously have had to find for themselves on your website or speak to an agent to find an answer to. Anything from store opening hours, product availability, and account balances can be provided via a simple set of options displayed in a chat window.

Also known as conversational bots, they are designed to provide a more conversational experience for people interacting with them. They become very useful when the person doesn’t know exactly what they want. Rather than enquiring about something specific like store opening hours or the outstanding balance on their account, they perhaps have a problem that needs solving, but need to be able to explain what the issue is.

The chatbot can help by being able to recognize the intent of the person and providing appropriate answers. This can only be achieved by thoroughly planning every stage of the chat flow taking into account the goals and values of the chatbot, its personality, and its scope.

This process is called conversation design and requires chatbot designers to train the AI engine to be able to recognize all the possible versions of the same intent.

Best practice dictates that at least 50 different versions of each phrase are required to be able to train recognition, but this number can be as high as 400 for intents that are more complex.

This is the only way for web chatbots to accurately mimic the experience of interacting with another person and requires a significant investment in time and resources.

Our worked example uses the free trial version of our chatbot building tool Answers.

To follow the steps, just sign up for your own free account using this link. You get full access to Answers with the ability to build web chatbots as well as bots for WhatsApp, Messenger, Viber, and more.

Note that to deploy your chatbot to a live website will require adding credits to your account.

To get started building your first web chatbot, log into your account and select the Answers icon from the panel on the left.

Then click the Try for Free button.

Under Basic setup, click Your first chatbot and then from under Start from template or create new select CREATE CHATBOT.

This page displays a number of pre-built templates that you can use to form the basis of your chatbot, or you can select Start from scratch to create your own.

The final setup step is to give your chatbot a name and select Live Chat as the deployment channel.

Answers’ interface provides a drag and drop canvas where you can build up your chatbot flow by dragging elements from the panel on the right-hand side. Simply drag on the element that you want and then configure it using the settings on the right.

We can now start building up our web chatbot flow.

As discussed previously, the chatbot should be unobtrusive and should not interfere with person’s browsing experience or make assumptions about what they are looking for.

Drag on a Text element from the Chatbot sends menu and configure a welcome message.

It is best practice to include a Delay when displaying multiple options to give the user time to read and absorb the previous message. Simply drag on a Delay element from the Chatbot actions menu and set a suitable delay according to the length of the previous message. You can always fine-tune delays during the testing phase.

For a web chatbot when providing a list of options for a user to select from, it is best to use buttons to simplify the process and make it clear what the chatbot is capable of helping with. Don’t provide too many options and stick to the use cases that you have identified as being most valuable.

Add a Send Button element from the Chatbot sends menu, add a message and then click Add Button to configure a title and the destination URL.

Once you have added your three options, the Send Button dialogue should look like this.

When building a web chatbot you should always ensure that the chat ends on a positive note and that the person has achieved their goal.

Once you have confirmed that the person has got what they came for you can sign off the chat or loop them back to the menu of options.

To close and reset the chatbot interaction add a final Close session attribute. This can also optionally delete any saved data – or it can be copied to your customer database to enrich future interactions with the person.

Answers provides a Simulation option that can be used to test your chatbot flow and make final adjustments to ensure a good user experience.

This is basic example of a rule-based web chatbot that uses buttons to help website visitors find information quickly. Using the same methodology, you can go on to create highly sophisticated web chatbots that use natural language processing to understand customer intent and to facilitate conversational interactions on your website.