sojharo
commented
4 years ago I have looked into Web view and how we can build html pages which load in webview and provide additional functionality to our bot.
Ways to launch WebView from Messenger:
- Click on card or button on card
- Persistent menu
Integrate data flow between Messenger and Web view app
Messenger provides Messenger Extensions SDK that can act as bridge between Messenger and our HTML app loaded inside Web View. With help of this SDK, we can send information from HTML app on web view to our server directly.
We can receive subscriber sender id and page id from context in our HTML app in web view. Based on this information, we can call our server using http requests and send user actions on our app to our server such as which date user picked (in case our HTML app is date picker).
Our Usage
Up till now, we have only used Web View for displaying simple HTML pages (and not interactive apps). We had done it in Social Security chatbot that we had built. Web view has power to build interactive applications in it which can get information based on user interactions. Messenger Extensions SDK will then send information back to Messenger and our server.
Actions on Web View using Messenger Extensions SDK
We can perform following actions, in our HTML app on Web view using Messenger Extensions SDK:
- Get Context: Get information on subscriber such as sender id and page id in our HTML app.
- Begine Share Flow: Define what should be sent in subscriber tries to share our web view page with friend on messenger.
- Ask Permissions: If subscriber has not given our bot any permission such as messaging or profile info, we can ask for using this method.
- Get Granted Permissions: With this, we know in our app, what permissions subscriber has given to our bot. There are just two permissions that subscriber gives to bot: user_messaging and user_profile.
- Get Supported Features: Web view may have different features available depending on Messenger version installed and platform i.e. android or iOS. This method let's us check which of the Web view extensions sdk features are available on a certain subscriber's messenger.
- Request Close Browser: Once, subscriber has completed the work on our HTML app in web view, we can call this function to automatically close the web view and take user back to Messenger.
KiboPush Approach towards this feature
The purpose of Web view is to give rich user experience to subscriber which may not be possible in normal chat messages such as letting them pick date or manage todo list.
These web views can be considered mini html applications which load inside Messenger Web View. These can get information of subscriber and page from Messenger Extensions SDK and then depending on this can provide experience to subscriber.
There are two approaches we can take to add this feature into KiboPush.
- We think of and create couple of these mini applications that may be useful for most customers such as Date Picker if admin wants subscribers to pick a date that should be saved in custom field. As there would be limited number of such web view apps, we will provide these in KiboPush as paid features.
- Other option is more generic i.e. we ask the admins to create their HTML mini applications themselves using Facebook documentation. However, in order to send captured information to KiboPush, they can use our provided API specification created specifically by us for Messenger web view applications. In this, we will not have overhead of creating these mini applications ourselves. We will think of what type of data and in what format our server will accept from these admin-created mini applications.
References
https://developers.facebook.com/docs/messenger-platform/webview
https://developers.facebook.com/docs/messenger-platform/webview/extensions
jekram
This was discussed with Hamza in a call today. He wants to have a calendar appear on Messenger so that subscriber can pick up the date. Calendar is not native functionality of Messenger. However, the link that he provided as an example shows that we can do it with help of web view.
https://www.chatbot.com/help/moments/how-to-start-with-moments/
In this task, I will investigate the webview (specially from calendar use-case point of view) and understand the possibilities and way of implementation.
On high level, my understanding is as follows:
This can be done with help of webview where we can show a calendar application which will interface with Messenger and send the data (date picked in this case) to Messenger. We will get that data using webhooks on our servers.