User Menus

One problem with chatbots is that the user can say anything. To have a useful chatbot with a specific purpose, you need to guide the user to say things that are meaningful — to ask the right questions.

One way to help guide the conversation is to provide menus, or multiple choice options for the user to select from. The BotCentral Platform provides three way of doing this, Persistent Menus, Quick Replies, and Structured Tiles.

Persistent Menu

Facebook Messenger allows for a Persistent Menu which appears in the lower left corner of the messaging window. This menu may contain up to five items.

Persistent Menu in Facebook Messenger

Persistent Menu in Facebook Messenger

To set up a Persistent Menu, select Menu Action from the Editor Menu. A Menu item has three attributes:

  • Name — This is displayed to the user in the menu.
  • Type
    • Postback — Lets you define a user message that is sent from the user when they select the item.
    • Web URL — Lets you define a URL which is opened when the user selects the menu item.
  • Callback — The last input on the form is where you define the Postback string or the web URL for the menu item.
    • If Type is Postback — The postback string does not appear in the chat window; the Name appears. However, the postback string can trigger patterns and is accessible from Embedded Code with getCurrentUserMessage(). (That is — it is treated in every way like standard User Input, except that the User doesn’t actually see it.) You can also use the Callback to display Bookmarks (see below).
    • If Type is Web URL — You can enter a web address with or without the protocol included (http:// or `https://). If you omit the protocol, http:// (that is, an insecure connection) will be used by default.
Add Menu actions to the Persistent Menu

Add Menu actions to the Persistent Menu

Here are some items to consider for this sort of menu:

  • Main Menu
  • Help
  • Settings
  • Start Over
  • Go to our Website

Remember, you can only have one Persistent Menu for a bot.

Quick Replies

Quick Replies sets of simple buttons, great for when you need the user to answer a multiple choice question. These are generally shown as text only, but in Facebook’s latest release of Messenger, they’ve added support for small emoji-like icons. You can have up to ten Quick Reply options. Once the user makes a selection, the buttons disappear.

Quick Replies in Facebook Messenger

Quick Replies in Facebook Messenger

Quick Replies can be used in a Message or in a Required Context. Each choice in a Quick Reply has a Title, Type, Payload, and (optional) Image.

../_images/blank-quick-reply.png

Quick Reply Title

The Title of a Quick Reply defines the label of the quick reply button in the chat.

../_images/quick-reply-basic.png ../_images/quick-reply-basic-phone.png

The Title of the Quick Reply also becomes the User Input when selected, as if the the user has actually typed that text into the chat platform. If you want to use Pattern matching to pick up the response from a Quick Reply, latch against the Title.

Quick Reply Payload

When creating a Quick Reply, you also define a Payload. This is a string which you can retrieve in Embedded Code with botContext.getQuickReplyPayload(). You can then (for example) use the payload to set a bot variable or trigger another message with setTriggerNextMessage().

/* Trigger a message based on the payload. */
botContext.setTriggerNextMessage(botContext.getQuickReplyPayload());

/*----------------*/

/* Or, set the payload to a persistent Bot Variable to use later...*/
botContext.setBotVariable('selection', botContext.getQuickReplyPayload(),true);

/* ...later... */
botContext.setTriggerNextMessage(botContext.getBotVariable(selection));

Location Quick Reply

If you set the Quick Reply Type to Location, the user will be able to send their location to your bot when selecting that option. This creates a special location object.

../_images/test-geo-ask-location-phone.png

This can be combined with other Quick Reply options also:

../_images/quick-reply-which-city.gif

Structured Tiles

Structured Tiles allow you to display a set of horizontally-scrolling content tiles which can have a title, subtitle, image, and up to three buttons. They are usually used for displaying a list of results — for example, articles from a News Source or items in a menu. These tiles persist in the chat window after being selected, so the user can scroll back to them again later. You can have up to ten tiles in a single message.

Structured Tiles in Facebook Messenger

Structured Tiles in Facebook Messenger

Static Message Tiles vs. Dynamic Responder Tiles

Structured tiles are normally presented in sets.

../_images/structured-tiles-example.gif

When created as part of a Message, you define each tile individually.

../_images/static-structured-tiles.gif

On the other hand, you can use Structured Tiles to display the results from a Responder. (This is more common.) In this case, you only define a single tile, and use parent-element[i] to iterate through repeated elements. (The entire JSON path to the element you want needs to be enclosed in curly braces. The dollar operator represents the root of the JSON doc.)

../_images/dynamic-tiles-setup.png

Buttons

Each Structured Tile can have up to three buttons. You define the following attributes for each button.

  • Name — This appears as the label of the button in the tile.

  • Type

    • Web URL turns the button into a link that opens the address defined in Callback.
    • Postback sends the value of Callback through the chat. The Callback will be treated as User Input for Pattern Matching, intents, and the getCurrentUserMessage() function. However, it will not visibly appear in the chat window.
    • Postback for Bookmark lets users bookmark the tile (see below for details).
    • Phone Number lets you define a phone number in Callback, which connects to the phone on mobile devices.
    • Share provides a way to embed a shareable link which users on Facebook’s mobile Messenger app can use to share links directly to other Messenger app users.
  • Callback — The value of Callback is handled differently depending on the Type, as described above.

Bookmarks

One of the button Type options on Structured Tiles is Postback for Bookmark. This can be used to create a set of bookmarked items the user can bring back later.

../_images/bookmark-button.png

The Name of the button is the label the user see. The CallBack is the name of the bookmark set (you can create more than one set of bookmarks).

You can display a saved set of bookmarks with the postback function __showbookmark__:name-of-bookmark-set, called from a Persistent Menu item.

../_images/show-bookmark-menu-action.png

Share Button

If you’d like to add a share button, set the Type to Share. The Callback syntax is share|link title|link url.

../_images/share-button-setup.png

In the Facebook Messenger app, this creates a share button which lets the user share the message with other app users. (The share feature is not currently available in the web version.)

WebURL and Webview

If you setup a Web URL button, you get another option, Webview. This lets you determine how the page opens in the Messenger mobile app. If you select Full, the page opens full screen. Tall and Compact both cause the link to be opened in a partial-screen overlay on top of the Messenger app.

../_images/webview-tall.png

Tall webview

../_images/webview-compact.png

Compact webview

These choices do not affect the behavior in the web app, which opens all links in a new browser tab.