How to connect a Microsoft Framework Bot to a third party channel (i.e. Facebook Messenger)

In Bot Framework Portal left menu  (How-To guides -> Connect to channels), there is a specific section related to the connection of a bot to a channel and, after Microsoft ones (e.g. Bing, Cortana, Skype for Business, Direct Line, Microsoft Teams, Skype, We Chat, Email, GroupMe) there are even third party channels (e.g. Facebook, Kik, Slack, Telegram, Twilio).

In the following I will give some details on the my experience in connecting an example bot of mine (i.e. testEnzoA) to the Facebook Messenger channel. The Connect a bot to Facebook Messenger page, available in the Bot Framework portal, explains the main steps how to do most of the work but in the following I’ll add some screenshots and personal considerations that could be useful when following those instructions!

In particular, the example bot that I will connect to Facebook Messenger, is called testEnzoA and simply reply to any message with “Hai detto: the same phrase”:

Testing the example testEnzoA bot from the Bot Framework Portal: it simply replies “Hai detto: the same phrase”:

In the following there are the main steps to make the things work … 😉

Create a new Page in your Facebook and get that Page ID from its About section. Possibly it is the first time (as it was for me) that you create a new Page attached to your Facebook account, so in the following you can find some screenshots I took for your convenience 😉

New Facebook Page creation (1)

New Facebook Page creation (2) - Community one

New Facebook Page creation (2) – e.g. Cause or Community one

New Facebook Page creation (3)

New Facebook Page creation (3)

Copy  the Page ID of the new created Facebook Page, available in the About section of that Page

After you create your new Facebook Page, you can always easily navigate to it from the left menu that have a specific Pages section (e.g. where the new just created Test1 page can be found).

Pages section of your Facebook account

All the Pages created in your Facebook account

Create a new Facebook App on that Page and generate an App ID and App Secret for it. To create a Facebook App you must navigate into the Facebook developer site: you can click on the Skip and Create App ID button (in the upper right of that page) and set the proper Display Name and Contact Email.

New App ID creation

Snippet code provided with the appId: however this code is not relevant for us.

Snippet code provided with the appId: however this code is not relevant for us.

Also in the See your app page, it is shown the App ID, but only clicking on the proper app icon you can access the Dashboard, related to that app, where you can manage it and set further options.

See your app page

See your app page

Clicking on the newly created Facebook app (i.e. Test1App), you can get not only its App ID but also its App Secret (visible only clicking on the Show button and providing your Facebook password).

Copy the App ID and App Secret

Going into the Settings -> Advanced section, set the “Allow API Access to App Settings” to Yes.

set the "Allow API Access to App Settings" to Yes.

Set the “Allow API Access to App Settings” to Yes

Then enable Facebook Messenger in the new Facebook App going into the Products section and then clicking the Set Up button related to the Messenger product.

Enable Facebook Messenger in the new Facebook App going into the Products section and then clicking the Set Up button related to the Messenger product

Generate a Page Access Token for the Facebook Page previously generated (i.e. Test1 Page)

Page Access Token generation (1)

Page Access Token generation (1)

Page Access Token generation (2)

Page Access Token generation (3)

Page Access Token generation (3)

Copy the generated Page Access Token

Copy the generated Page Access Token

Note that, as written in the Token Generation box:”Page token is required to start using the APIs. This page token will have all messenger permissions even if your app is not approved to use them yet, though in this case you will be able to message only app admins. You can also generate page tokens for the pages you don’t own using Facebook Login“.

I found quite strange that after the token generation you have to suddenly copy it to paste in the bot framework page related to the bot you want to connect with Facebook Messenger, because this token value will then not be available any more once you exit that Facebook page … and if you select again the same page, a new token is generated with a different value (???) …

Click on the Setup Webhooks button to forward messaging events from Facebook Messenger to the bot. Note that after that setup , that  Setup Webhooks button (available in the Webhooks section) will change to Edit Event and it will allow you only to change the Page Subscription Fields.

Setup Webhooks button to forward messaging events from Facebook Messenger to the bot

Setup Webhooks to forward messaging events from Facebook Messenger to the bot

Going to the Bot Framework Portal, in the section related to the bot you want to connect (e.g. testEnzoA), click on the CHANNELS section (top right menu) to connect that bot  to the Facebook Messenger channel.

Connect the selected bot (e.g. testEnzoA) to the Facebook Messenger channel

Connect the selected bot (e.g. testEnzoA) to the Facebook Messenger channel

Copy the Callback URL and Verify Token values from the Bot Framework portal to set them in the Facebook Messenger

Copy the Callback URL and Verify Token values from the Bot Framework portal to set them into the Facebook Messenger

Now, going to the Facebook developer site, set those Callback URL and Verify Token values from the Bot Framework portal (always available in the CHANNELS section of that bot): note that after clicking the Verify and Save button you will be allowed only to change the Subscription Fields and it are not available anymore the Callback URL and Verify Token sections (???).

Set into the Facebook Messenger the Callback URL and Verify Token values taken from the Bot Framework portal

Set into the Facebook Messenger the Callback URL and Verify Token values taken from the Bot Framework portal

After the Save and Verify, the green Complete is displayed if everything is set properly.

After the Save and Verify, the green Complete icon is displayed if everything is set properly.

Get the Page ID, App ID / App Secret and Page Access Token values copied from Facebook sites previously and past them in the Bot Framework Portal page for configuring Facebook Messenger.

Recover that Page ID in Facebook (1)

Recover the Page ID of that page in your Facebook (1)

Recover the Page ID of that page in your Facebook (2)

 

Recover the App ID and App Secret from the Facebook site for developers

The Configure Facebook Messenger page can be reached from the CHANNELS section of the bot, clicking on the Edit link in the line related to the Facebook Messenger channel.

Configure the Facebook Messenger channel for the bot (1)

Configure the Facebook Messenger channel for the bot (2)

Configure the Facebook Messenger channel for the bot (2)

In the Facebook App you can also set the more appropriate category (i.e. App for Messenger).

Set of the more appropriate category (i.e. App for Messenger) for the Facebook App

Set of the more appropriate category (i.e. App for Messenger) for the Facebook App

Note that Facebook requires a Privacy Policy URL and Terms of Service URL on its basic app settings page: the Code of Conduct page contains third party resource links to help create a privacy policy. The Terms of Use page contains sample terms to help create an appropriate Terms of Service document. After the bot is finished, Facebook has its own review process for apps that are published to Messenger. The bot will be tested to ensure it is compliant with Facebook’s Platform Policies.

App submission for approval from Facebook.

App submission for approval from Facebook.

After the review is successful, in the App Dashboard under App Review, set the app to Public.

After the review is successful, in the App Dashboard under App Review, set the app to Public.

After the review is successful, in the App Dashboard under App Review, set the app to Public.

It is written that, until an app is published, it is in Development Mode and Plugin and API functionality will only work for admins, developers, and testers.

I did not start the review process, also because Facebook requires a Privacy Policy URL and Terms of Service URL on its basic Facebook App settings page, … However I succeeded to do the test because, from the Dashboard of each App, it is possible to add Administrators and Testers of each Facebook App in order to test it even before it becomes public: in particular the owner of the Page is automatically inserted with Administrator rights!! 😉

The owner of a Facebook App is automatically set with the <em>Administrator</em> rights so I he can try the App even though it is not reviewed

The owner of a Facebook App is automatically set with the Administrator rights so I he can try the App even though it is not reviewed

As you can see in the following screenshot, writing to Test1 (that is the name of the Facebook Page I created for the test) from the Messenger site, the bot testEnzoA automatically answers “Hai detto: same string” as expected 😉

Writing to Test1 from the Messenger site: the bot testEnzoA automatically answers ""Hai detto: same string"

Writing to Test1 from the Messenger site: the bot testEnzoA automatically answers “Hai detto: same string”

Obviously the bot works even using the Messenger app, even from your smartphone:

Messenger app on Windows 10 Mobile

 

 

 

 

 

 

 

 

Messenger app on Windows 10

Messenger app on Windows 10

Before doing this review, I supposed that when I should write a post in my Test1 Facebook Page I should have had an automatic answer from the bot … but it is not what it happens … Only writing with the Messenger chat to a virtual user called as that Facebook Page (i.e. Test1) you have the bot give the proper answer following it proper logic.
Therefore, the bot is attached only to Messenger and it answers only when someone writes to a virtual contact, that has the same name of the Facebook Page, using the Messenger chat available from the Messenger web site or an app on PC/smartphone (Microsoft Store; Google Store; Apple Store).

No answer from the bot when I write something (e.g. ciao) as a post in my Facebook Page

_______________________________________________

More or less the procedure is the same for the other third party possible Channels (e.g. Slack) even though you have to register a “page” in a different environment and set the proper tokens and URL on the appropriate site (i.e. third party developer site and Bot Framework site configure the proper channel for that bot).

Bot connected to the Slack channel

The same Bot connected to the Slack channel

For connecting your Bot to Microsoft’s specific channels is even easier because you do not need to create/add specific tokens. For example, to add the Cortana Channel see this following post.

 

Informazioni su Enzo Contini

Electronic engineer
Questa voce è stata pubblicata in Review e test, Windows. Contrassegna il permalink.

Una risposta a How to connect a Microsoft Framework Bot to a third party channel (i.e. Facebook Messenger)

  1. Pingback: How to connect a Microsoft Framework Bot to a Microsoft channel (e.g. Cortana) | Enzo Contini Blog

Lascia un Commento/Leave a comment

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

w

Connessione a %s...