Make a chatbot using Microsoft Bot Framework – Part Two

Part two in a series of articles about my experience with developing a chatbot using Microsoft Azure Bot Framework.  You can find part 1 here

What are the design considerations when it comes to building a bot?

Make a bot is now easier than ever with the Microsoft Bot Framework. You have the tools available at your fingertips,  but you still need to think ahead the WHAT and the HOW. I thought that sharing few tips and things to remember could save you time and efforts.

First, what is the Microsoft Bot Framework?

Microsoft Bot Framework let you build a bot targeting multiple channels with the same code based.  It simply consists for you to create a Web API ( Your Bot ) that will handle messaging from the Bot connector.

The bot connector is hosted on the Microsoft side and it takes care of the translation of messages between you and your users, store the state and handles telemetry.

Conversation flow

When it comes to building a bot, one of the early steps is to design your conversation flow. This will shape your code and help you to be more efficient during your development.

Let’s look closely to a conversation.

Greeting

Every conversation starts with a handshake and bot are no exception to the rule.  You first have to set the context by welcoming your users and let them know who you are and a hint of what your bot can do.

Some channels offer an easier entry point than others. For example, Facebook Messenger has a Get Started option, but in the end all paths lead to a welcome message.

14302685_243106819419381_1314180151_n
Is this our first encounter?

Welcome to Cafe Depot!

Are you a returning user?

Welcome Again Danny!

Set the expectation

Your next step is to set the expectation.  What your bot has to offer?  Explain in few words what your users should do?  Hold their hands and lead them!

Is this our first encounter?

Welcome to Cafe Depot! I can help you buy the coffee beans that fit your palate. Do you have already an account with us? Are you’re ready to order? Maybe you’re just browsing?

Are you a returning user?

Welcome back Danny! We hope that you enjoy our coffee line. Would you like to reorder some Arabica? Or maybe try a taste of mountains British Columbia beans?

Choose wisely

There are 3 ways to exchange with your users.  You have to choose wisely which one is more appropriate for what you are trying to say.

Text

Remember to be short and concise.  No one likes to read long text on a small device. If you have to say a lot, just split your text in multiple messages to improve clarity.13503471_1613963512265939_694041731_n

Rich media messages ( Text, Images, Videos, Buttons and Audio )

When it comes to rich media messages, each channel has different renderings and limitations .  Facebook has a nice way to present structures messages.

 

13503520_1697054043890703_949706974_n

14235537_178238889274354_2098325353_n

When using rich media messages make sure to test your bot using different screens sizes. Low-resolution images might appear “pixelated” on a larger screen device. Also double check the size of your media.  Remember that your users often have to download them over a cellular network.  Latency and bandwidth limitations could be an issue here.

Quick reply

Quick Reply  is great to display options. Once again they are displayed differently on each channel. Facebook one is pretty neat.

14175277_1582251242076612_248078259_n

 

Typing

Sometime, you might have to deal with a longer response. For example, you have to call an external system on your backend.  Sending a visual tip is a good idea.  Facebook has a typing animation.  On other channels you could simply send a text saying that you have received the user request.

13480169_570751053131489_689799179_n

Recognize the user intent

Even if your using buttons or Quick Reply to make the conversion easier on both sides, your users still have the possibility to send text at any time.

14858155_1136082199802015_362293724211838976_n

Let’s say that you are displaying a list of t-shirt. Instead of using the buttons which is the expected behaviour, your users could write something like:

I want the blue one

So how do you deal with this type of message. You have two options:

First you could use the built-in regular expression recognizer in the Bot Framework to detect the user’s intent. It could do the trick, but only for simple matches.

bot.recognizer(new builder.RegExpRecognizer( "CancelIntent", { en_us: /^(cancel|nevermind)/i, ja_jp: /^(キャンセル)/ }));

Your second option is to use a Language Understanding Intelligent Service (LUIS).  This service let you train your bot to understand your users intent from natural language.

So if you user say

I want the blue one

or

The blue one it is

This will be translated to the intent of buying the blue shirt. Something that your bot will easily understand.

I will be covering this in more detail in a further article.

luis-overview-process

Asking your user location

You have the ability to ask the current location of your user.  Once the user sends his location using the native control, you will receive a longitude and a latitude called Place.

Native Facebook location control

14235551_1274248235927465_1935714581_n

Bing support location control

multiresults3

Please note that the Bing Control return with the Geo localization a place name but not the native Facebook control.

Scrolling the conversation history

OK, this one had me spinning a little bit more.  If you use action buttons, be aware that they will be still accessible if the user scroll back in the conversation history.  Which means that you need to consider supporting them at any point in the conversation. Note that Quick Reply in Facebook disappear after selection. So you’re off the hook for these.

I decided to use an URL as my buttons payload.  Something likes “select?product=12&variant=blue”.  This way, at anytime I have all the information required to handle the selection.

Collecting metrics from your bot will help you refine

It’s probably true for all applications, but for bot this is absolutely a must. Make sure you add logging capabilities such as Microsoft Application Insights to monitor your bot. With these metrics you will be able to understand how your audiences are using your bot, monitor performances and track errors. This will help you to increase the quality and improve your bot using real insights.

Here a list of potential useful questions:

  • How many users per time range?
  • What is the average session time?
  • What is your users exit point?
  • How many returning users vs new users?
  • How many exceptions per time?
  • What are the exception details?

Adaptive Card

I said it many times. Each channel has its benefits but when it comes to make a cross channel bot you have to be aware of all these distinctions.

In my experimentation, I tried to build an SMS, Skype and Facebook bot with a shared code based . I rapidly discovered that I had to have different code for each UI because of their unique nature. It made my code messier.

During the last Microsoft Build event ( 2017 ), Microsoft announced numerous updates to the Bot Framework.   They added more channels, a better built-in bot analytics, a better integration with LUIS and speech recognition but the update that caught my eye was the Adaptive Cards.

Adaptive Cards provide developers an easier way to compose user experiences that span devices and modalities. A card is a piece of UI defined by the developer and rendered by the host application to display to the user. An Adaptive Card is made of composable visual building blocks described in JSON that automatically adapt to the host’s branding, UX, themes, layout and modality.

So in another word, a better way to support and organize UX and Layout. I have to say that I didn’t do my homework on this one, but it is definitely on my radar as a bot maker.

What is next?

In part 3, we will create a new project and start building a new Facebook bot with Microsoft Bot Framework.

Stay tuned!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s