Date picker card for Facebook Messenger bot - facebook

Question

I know that there are various CTA cards that Facebook bot can use as seen here.
What I really need is a datepicker card that can be sent to the user where they can choose a date and send it back. Is this possible using Facebook bots?

Answer 1

Facebook messenger has not launched date and time picker in its templates.
But you can make you own with webview and Extensions help.
Follow these steps.
Create Button or Generic Template and put a button with
"buttons":[
{
"type":"web_url",
"url":"http://my_url_which_open_date_picker",
"title":"Select date",
"messenger_extensions": true,
"webview_height_ratio": "compact"
}
]
replace a url with your url.
NOTE: url should be in whitelist Your Domain
Now in that web page you can get userId of that particular user and couls easily map his actions for date picking.
On your page
<script>
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));
</script>
When the Messenger Extensions JS SDK is done loading, it will call window.extAsyncInit and you will get userId in that function.
<script>
window.extAsyncInit = function() {
// the Messenger Extensions JS SDK is done loading
MessengerExtensions.getUserID(function success(uids) {
var psid = uids.psid;
}, function error(err) {
});
};
</script>
uids is Object containing user ids
psid Page-scoped user ID
You may also want to close your calander page when user picks date.
This can be done via:
<script>
MessengerExtensions.requestCloseBrowser(function success() {
}, function error(err) {
});
</script>