Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Date picker card for Facebook Messenger bot

Tags:

facebook

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?

like image 353
David Pilkington Avatar asked May 31 '16 06:05

David Pilkington


1 Answers

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>
like image 188
kartikag01 Avatar answered Oct 06 '22 02:10

kartikag01