Facebook Chatbot: Persistent Menu 101
Persistent menu is a very important element in your Facebook chatbot, but you will not find a lot of information on building a perfect one. Is persistent menu important for chatbot’s usability? Yes, it is. This is the only way for your visitors to navigate through your chatbot and see what else it can do. Think of it as a navigation menu of a website, there is no website without a navbar.
Did you know that Facebook allows you to add up to 3! hierarchical levels, with 5 calls to action each? Let’s do the math:
- 3 titles in the main menu
- 3 x 5 = 15 titles in the second level
- 5 x 5 x 3 = 75 titles in the last level
You’re allowed to add up to 93 titles/75 calls to actions into your persistent menu.
When I build chatbots, I usually don’t go deeper than the second level, maybe one item can be the third level, that’s it. A lot of companies don’t do either. After you publish your bot you should track what items get clicked on and make them more visible to your customers, maybe even change some of the bot’s scenarios if you need to. Also, don’t forget to remove the ones that are not used 🚮.
You are not allowed to publish your Facebook bot without a persistent menu.
Before you publish your bot you have to set persistent menu. Let’s see what options we have there.
“locale”:”default”
This locale will be default for all languages, in case you don’t set them separately. Here is the list of supported languages that you can define individually.
“composer_input_disabled”:false
“composer_input_disabled”:true
Composer input is a game changer for your chatbot. If you define it as true, your visitors won’t be able to send your bot any message via text input, they will only be able to click on buttons and quick replies. It depends on what interaction model you use for your chatbot. I’m a natural language freak, that’s why it’s always false in my bots.
“call_to_actions”
Call to actions is a list of objects. Each object has a title, which is limited to 30 characters, a typecan be set to nested if you what go one level deeper, apostback, if you want to send postback to your backend (payload is required in this case) or web_url if you want to open a link or webview. If you want to open a webview you may (but don’t have to) define webview_height_ratio. If you just open an external link it will always be full screen, no matter what webview_height_ratio you set.
Read Facebook docs here more information.
🙀 How to add emoji to persistent menu
At first, I though that I will have to encode or decode emoji’s code into ‘utf-8’ or something like that but everything was easier, you just copy paste emoji into your text editor and everything just works like magic. Just clickControl + Command + Space on Mac to choose an emoji.
You can use this site: GetEmoji.com to copy/paste emojis.
If this doesn’t work and you have to convert emojis, here is a handy list to unicode of every single emoji.
⛔️ What you can’t do with persistent menu (yet)
You can’t add dynamic content and change it depending on user’s profile. As soon as you post persistent menu it becomes the one and only for all users, static like a stone. I would really love it to become more customizable, however. Maybe in the future, it will.
How other companies use persistent menu
Let’s learn by example and see how other well-known bots use persistent menu.
The Guardian uses 3 calls to actions, without emojis. Very conservative but it looks that they get on with it.
So does CNN’s bot. Coincidence?
Swelly uses 2 levels and a lot of emojis.
Katy Perry’s bot is the absolute persistent menu winner, it uses all 3 levels and a lot of emojis. Bravo!
Let me know what your persistent menu looks like and why it looks that way. Do you use emojis? Follow me on Twitter and sign up to learn more about chatbot development 🤖
