Facebook has different settings on Messenger to improve the user-experience of your chatbot. These settings apply to each page individually. In this document, we will learn about two such settings:
The Get Started button is only rendered the first time the user interacts with the page on Messenger. The welcome screen on Messenger displays a Get Started button. When this button is tapped, you can present a personalized message to greet the user or present buttons to prompt him or her to take an action.
You will be provided with an event called startchattingevent when someone clicks on the Get Started Button. This can be fetched from the messageobj parameter.
If you're using the hosted code then in the EventHandler use the code snippet below to setup the Get Started message.
function EventHandler(context, event) {
if(event.messageobj.text=='startchattingevent'&& event.messageobj.type=='event'){
var button = {
"type": "survey",
"question": "What would you like to do?",
"options": ["Eat", "Drink", "Both"],
"msgid": "gt_212"
}
context.sendResponse(JSON.stringify(button));
}
This code snippets implements the button template. In the same way you can send either plain text or other structured messages as defined in this guide
If you are using the callback then you can use the parameter messageobj and parse the JSON to get the event name.
The Persistent Menu is always available to the user and brings them directly into the flows in your bot. Persistent Menu can also be used to stop users from sending any text messages to the bot.
You can use the Publish tab in the IDE Bot Builder to set the Persistent Menu.
Sample JSON
{
"disableinput" : false,
"menu": [
{
"title": "Coffee",
"type": "nested",
"menu": [
{
"title": "Cold",
"type": "nested",
"menu": [
{
"title": "Chocolate Mocha",
"type": "text"
},{
"title": "Java Chip",
"type": "text"
}
]
},
{
"title": "Hot",
"type": "nested",
"menu": [
{
"title": "Cappuccino",
"type": "text"
},
{
"title": "Caffe Latte",
"type": "text"
}
]
},
{
"title": "Expresso",
"type": "text",
}
]
},
{
"title": "View website",
"type": "url",
"url": "https://www.gupshup.io/developer/home",
"webview_height_ratio": "full"
}
]
}
Things to remember:
1. You can have a maximum of 3 hierarchical levels of menus.
2. A Persistent Menu is limited to 3 items for the top level, and 5 items for any submenus.
3. To create a multi level menu change the type to "nested" for the desired menu item and add a new parameter "menu" which will be an array of items.
4. Title of a menu item is limited to 30 characters.
5. disableinput has to be set as "true" in the above JSON to disable the text input in the messenger.
6. You can have web_url buttons in the menu as well. Ex: The "View website" item in the above example.
7. Bot menus are cached locally, but updates are fetched periodically by Facebook. If you update the menu while testing, you can force this fetch to happen by deleting the bot's thread and then beginning a new one.
Handling user response:
When someone clicks on one of the items on the menu which is of type text then the title of that item is sent back as the message.
In the above JSON sample if a user clicks on Expresso then here is what the messageobj will contain -
messageobj={"referralParam":"","refmsgid":"persistent_menu","text":"Expresso","type":"msg"}
The refmsgid will always be returned as “persistent_menu” if a user selects an option from the Persistent Menu.
In the IDE Bot builder this is how you can handle the response from the user:
if(event.messageobj.refmsgid=='persistent_menu'&& event.message.toLowerCase()=='expresso'){
context.sendResponse("Sure, I will add Expresso to your order");
return;
}