Button

This is going to be a tough one, so buckle-in for the ride. The button element opens up another world for your bot, makes it more intuitive and fun with the range of options you can choose.

So let’s just dive in. When you add a button you will get a screen like this.

First things first, display text is exactly what you’re thinking. It is the text that is going to be shown to the user.

Button Types

Moving on from the obvious, there are numerous actions that you can do with the button. Isn’t that convenient? We have left no stone unturned to make your bot incredibly skilled.

Let’s discuss the actions now:

None

None is when you don’t want anything to happen when the user clicks the button. It may not have much use except for in cases of Quick Replies where you want to give the user options for their responses.

🔔 Note: None button would only be applicable for quick replies, besides that it will not be shown to the user.

Postback

Postback is a feature that makes changes within the flow of the bot. This is a complication feature, but the most useful one.

It can not be simply explained through a definition, it is much easier to understand it through examples.

The 3 types of postback options we have are “GotoFlow”, “SetContext” and “GotoDirection”. Let’s understand them one step at a time.

Goto Flow

This feature allows you to move across different flows. For instance, consider a restaurant bot with different flows for booking a table, placing an order, getting information about the restaurant, etc. Consider this,

In the welcome flow you introduce the user about yourself, next you ask them what they’d like to do using a button of options. Here based on their selection you can direct them to the right flow. If they want to place an order, they can select the button for that and directly be shown that flow.

This gives them immediate value, doesn’t it?

Another option while jumping between flows is passing information from one to another. This is done by passing entities.

Let’s get the use case for this too using the restaurant example. While placing an order the user has selected a bunch of dishes alright? Now, he/she moves on to a flow where the user information is collected to store the order. In this case, the dishes picked need to be moved to the next flow, only then can we save the user information+the dishes ordered together right?

This is just one of many possible use cases, do let us know when you find others.

Set Context

This allows you to save the users’ response for future purposes. The use is similar to that of context/entities.

Goto Direction

Often, you are going to be at crossroads. A user’s selection will mean different paths the bot must take. How does the bot decide which path to take? That’s where GotoDirection swoops in to the rescue.👩🏼‍🎤

Let us say you are asking the user if they would like to share their contact information with you or no. In that case, you may include “Yes” and “No” as quick replies. In this case, “Yes” means that you continue asking the user about their phone number, email ID etc while on the other hand, for “No” you are more likely to say “Oh alright! You can contact us at ….”

This seems plausible right? Now, here there isn’t much of a conversation for you to make a separate flow for this. This is when gotoDirection comes in, you just have to mention the name of the direction and setEntity is there is information you would like to store. And that’s that. Your bot is out of his plight.

You can see a simple example of gotoDirection here for the restaurant bot. Where the bot will proceed with the booking if it has got the name of the restaurant right.

Quick tip 💡:

When you are confused between gotoFlow and gotoDirection, figure out the conversation proceeding it. In case it is a long conversation, you should choose gotoFlow or else, gotoDirection is a good option.

Open Webpage

Like the name suggests, it allows you to open a different webpage. To get this started you will have to mention the URL you want the user to be directed to.

Next you choose the height ratio, based on the importance and focus on the content you would like to give a particular webpage you can decide the size of screen that it covers. The 3 options are: compact, tall and full.

This is what a compact ratio looks like

On the other hand tall is beneficial useful use cases. Not sure how it would like? Here’s a glimpse! 👀

Well that covers quite a bit of the screen. Full ratio is even better and very useful when you want the user to browse through a website. This is when you wish the user would see your portfolio, or website properly without them having to leave the bot. This maintains an enriching experience of the bot as well as of the website you are directing them to.

Here, have a look.

The same settings in Messenger appear like:

Quick Tip 💡:

Ideally you might want to use compact where there is acceptance of terms and conditions, or little content you may want to focus on. It can even be images or videos. Here there is not much browsing and the focus needs to be maintained on one particular thing.

Share

Well we all know that one of the best ways to increase your presence is through ‘word of mouth’ 🗣 That’s why we want to give you the ability to let the user share information with their friends.

Take for instance, the user is browsing through the an e-commerce bot and they liked one of the dresses that you have neatly shown in a carousel. Before selecting the dress, the user is going to want to share it with their friends or family to get their opinion. The share option helps with that.

🔔 Note: This feature is applicable only for the messenger bot

Phone Call

Again, like the name suggests it is going to make a call on a specific number. All you need to do is enter a mobile number and that’s it.

This is a functionality you can use, when some queries are better answered via call. It is a good option to include in your bot, this makes it easier to get in touch with you and resolve the users’ queries.

Add Buttons

There are going to be times that our default number of buttons are not going to be enough, so we are prepared for that eventuality too.

How do you do it? It’s as easy as ABC.

Step 1: You move your cursor over the button section

Step 2: A green icon will appear below the last button

Step 3: Select it

Step 4: Add button

Step 5: Voila 👏🏼, you have yourself another button!

Delete Buttons

Well we may not always get it right, and you may just want to get rid of a few buttons there. Don’t worry, there’s a way out of this. You can delete the button that is unnecessary.

This is how you do it

Step 1: Move your cursor over the button you want to delete

Step 2: A red icon ⛔ will appear on the side of that button

Step 3: Click it, and there you go. You have one less button

Fun Fact 💡:

A good way to make the user stay and talk to your bot, is by not giving them a reason to go. In terms of opening a website or sharing, once they leave the bot for these activities, the chances of them coming back reduces. Keeping that in mind we have included these elements. These prevent them from leaving your bot, and giving them a wholesome experience.