How to Design a Chatbot for your Website

 

These days, if you land on a website, there’s a very high chance you’ll see a chat bubble in the bottom-right hand corner.

And what’s in that bubble? It could be the support you’re looking for. A quick way to connect with a sales team. Helpful information to navigate the website. Almost anything, really.

But what it definitely contains, and what makes all of that great stuff possible, is a chatbot. 

A chatbot is a powerful yet efficient way to tackle challenges a webpage alone can’t. It’s even fair to say that a modern website isn’t complete without one.

The good news? With tools like SnatchBot, chatbots are easy to set up, use, and maintain. In this article, we’ll show you how to get one up and running on your website by walking you through some of the most crucial elements.

Step 1: Design your Start Screen (Pro plan only)

One of the many great features included in the Pro plan is the customizable Start Screen. With it, you’re able to display an additional screen to users on web chat before they begin a conversation (rather than just the standard introduction).

For example, in this case, a user is able to provide information about themselves, such as name, email, or phone number. You can make some fields obligatory or leave them as optional. This is highly valuable for customer support use cases, where the faster you can access details about a user's account, the faster you’re able to find them the answer they need.

As you can see, you’re also able to customize other parts of the Start Screen such as colours and greeting messages. All in all, it adds up to a much more pleasant first interaction—which many chatbot designers would say is the most important one.

Step 2. Customize Webchat

For pretty much any organization, keeping everything visual on-brand is critical. That’s why SnatchBot allows users to customize the look of their webchat window.

To do so, select your chatbot, choose Channels, followed by Webchat, and then click Customize. You can customize both the Button (the bubble you see before beginning a conversation) and the Webchat.

When customizing the button, there are an incredible 18 elements you have at your control. They range from the text of the message all the way to the position in which it shows, so you’re always getting exactly what you want.

When customizing the webchat itself, you’re even more in the driver’s seat with 20 different customizable elements. We recommend trying out a few different options once you’re up and running to see which design triggers the most conversations.

The Persistent Menu is available to users at any point in the conversation. That means it should include the most high-value actions users would need most frequently. The Persistent Menu also has the effect of communicating core capabilities of your bot to first-time and returning users. The menu will automatically appear in a thread if the user has been away for a certain period of time.

To get started, select Persistent Menu from the left menu, followed by the WebChat channel at the top. 

You can add two types of actions:

1. “Send a message to bot: This allows users to quickly send a message without having to take time to type it.
2. “Go to URL”: This opens a predetermined link in a web browser.

There are two default menu sections. The first is a Restart option, which is generally recommended for all chatbots. The second includes the “Powered by SnatchBot” message which is removed when you select the Pro plan.

The amount of items you can add varies by each individual channel, and must be configured individually. For webchat, you can add 5 custom items and a two-level submenu, where you can add up to 5 items per each level.

The Persistent Menu is also where you can disable text inputs from the user. Keep in mind that while this may make it faster for you to build the chatbot, it also means that users will only be able to interact with a bot using quick replies, cards, and the persistent menu itself.

Step 4. Add Company Information

To add even more helpful details to your chatbot, be sure to include your company information. You should do so by connecting information about your company with the purpose of your chatbot.

There are two main reasons to do so:

1. Make it clear to users who they are interacting with.
2. Provide reassurance to users that the chatbot is in fact affiliated with your organization.

Here’s how you can do it:

• Select My Bots from the left-hand menu
• Select the chatbot you’d like to customize
• Select Configure
• Update the Bot name and Bot description fields

The Bot name field does give you the opportunity to establish who exactly the user is communicating with. There are a few different naming conventions that are quite popular:

1. Company name (most common)
2. Company name support (common for support-focused chatbots)
3. Invented names (often named as a person or representation of the organization)

While inventing a name for your chatbot may seem fun, and is fairly frequent, keep in mind that it impacts the entirety of how your chatbot is written. You’re essentially committed to writing every interaction from the point of view of that character. While engaging, it’s an extra level effort, especially for first-time chatbot builders.

When adding your company information, be sure to focus on whatever is most critical. The description is limited to 150 characters (including spaces), and your users probably wouldn’t read much more than that anyways.

Add your logo

Once you’ve added your company information, you can put the cherry on top by adding your logo. While this doesn’t necessarily change your chatbot’s performance, it goes a long way to solidify your brand and create a consistent experience for your customers.

From that same screen, select the “Drop image here” box. You can then add your logo, with a few important considerations:

• The maximum file size is 5 MB.
• The logo will display as a circle, so consider adding more border to the image to prevent it from getting cut off.