Share via


Azure Bot Service: Building Facebook Messenger Bot

Introduction 

Azure Bot Service is an intelligent, serverless bot development service introduced by Microsoft Azure on Azure Portal. This service is used to develop conversational bots with the help of various templates, cognitive services by Microsoft.

The Bot Application runs inside an application, like Skype, web chat, Facebook, Message, etc. Users can interact with bots by sending them messages, commands, and inline requests. You control your bots using HTTPS requests to the bot API.

https://3.bp.blogspot.com/-fzkAhdY6edc/XDANE7z9leI/AAAAAAAAUTE/qbXKR_p9ks0BiLXtvzVsFwXPdfrRtxrJwCLcBGAs/s400/FacebookBot.gif

The better the visibility, the higher will be the chance of customers making a purchase. Unlike other bots which are available on business web pages which provide visibility only to the customers visiting their site, a Facebook bot is very easy to find. It is visible to around 1.3 billion users of Facebook. A Facebook bot interacts very well with customers. It can receive and send messages, images and provide clickable buttons like Buy Now. In this article, I am going to show how we can connect Facebook Messenger's channel and integrate Bot Application to the Messenger app.

https://lh3.googleusercontent.com/zE_GSfkuKe9vYx7q2Vkge71AsPLULCiDn_8wQwmGx35XxNOdrQyQbV8nOM4-XElaIF7nWeb57Tcj9r7eg1Hk4YUIw3o3Ab2cs2x1_xw7SZLDhJaSURSX0LPjmCvsCl4oF3hk6Sg8i-nuZ4REyg

Create FAQ Bot

We are not going to write any coding to implement Xamarin FAQ Bot but be ready with what are the question and answer to train the Bot. I have already created 7000+ more Xamarin Q A as a word document, we will use the same document for upload and train knowledge base you can refer to my previews article to create and build a Xamarin FAQ Bot using Azure Bot Service and deploy it into Azure. I am not using any coding for developing the Bot Application, you can follow the provided steps in the article to create and deploy FAQ Bot.

https://lh3.googleusercontent.com/ZSR5jwLd1CG1DSLYBP1wGSS6uE2WXaziemkDyC3z3xLeEmHKSaDLRhQDrVcWdv-WJmqbBgn2CN8idIBx9gOEILAGICecVJDsFih-nxLZvXvbHycn7rXgji82z9QDSE1vRCqg_T5cAipJpT3Fhw

Setup Facebook Page

We can implement a Bot Application to the Facebook page. You can create a Facebook page or select an existing page and navigate to “About page”  to find and copy the Page ID.

https://lh4.googleusercontent.com/BYntvuTjuM6KMW2LEY9_bKz1wQTSGCfC_-l9Zybw_a_ZPmY0-E1jjFtyf_XRI-9skDPSpjBe8n1U8hNPM3QLUW3lGPrbr7ry_Rofo0nNvh2tjWjOjZO_kr5XknU_LVCNzAlY_jURCwkzSfnZ3A

Log in to Facebook App

Create a new Facebook App on the Page and generate an App ID, App Secret, and Page Access Token for integrating the Bot to the page messenger. You can click on “Skip and Create APP Id” from the following screen.

https://lh3.googleusercontent.com/tJuQowtL-QLMD5OEfkmIf70J-5tUDVuyjSEMP10upUJBx4h118HyBgi1Ok-x0UXU3SdJ1rdvzEkPRHtXlR5LYQiw0mK9tyQlfJUwX-oRsiYsN8PS30PSgUJTfMNt0aM26EtZ7jLxuOgoakln7w

Create New App ID

Provide display Name and Contact Email to integrate Bot application and click on Create.

https://lh6.googleusercontent.com/SLzEi_F0hsATqv-B7Cnd9tMTokETYgwJvdikAI95GYEF5gRuqlzVkJ3CwL5dULIfV5Zx7k3fUZvatTVcGHqub2Iu7HbZ7fCr49S2NWgEEYTP7bhUBWw8CeCFwWQ9b3lf4dCgfiOSxdil3XWg4Q

After clicking on the Create button, it will navigate to App dashboard screen. The side navigation menu having Settings > Basic and copy the APPID and APP Secret. Provide the Privacy URL, Terms of Service URL, App icon and Select Category.

 

https://lh5.googleusercontent.com/7kcdrVWDbrHtmjwvIFNlPOV5abAOsg4yC4mQaY8h6DJbraK8nkXZEY3zfZmDMR8DTQj0xOLMTOBSbKiFLBVQI8XxEGAN7KgIX6PSFk4zgEnNRT2krxt3t4oT-4ucKLotcZqh_IxcXBZlWWuNhQ

Setup Message

Select the Dashboard and click on the Setup button from the messenger group.

https://lh4.googleusercontent.com/lbx_68GV9mlW7DMl4zw2swr6tuLACL5CIBofHGzTZtGIsGZP8RpSsPkbm_epah9zzyEG1CHeI10wnGIhAAIBGxJqM_1-2R7Q3d5cJvVvx1S8L6QMtXOqEG88dm9Jgwhz_TSENZFFZ3MIAvW2jA

Create Page Access Token

Select Settings from the Messenger side navigation menu. To generate token, you can select the Page and generate the access token and copy the page access token.

https://lh3.googleusercontent.com/soWkdKkq5o9dZPciZcCDpiUZjq6hHNv2ieIw1FHElKf4dZlJu54Dju_kw_3YB8Q2_k1qGx-Q_Wuh3_m8ZwkfZ5nlfGFixw_jOgScOtd8Q9QAn4_vV_AR01abVA_waY69gPsvusQs_qqFSy2R0g

Setup Webhooks

Click Set up Webhooks to forward messaging events from Facebook Messenger to the bot.

https://lh4.googleusercontent.com/L4Tb0N-SGyCUFqBxRueroGvaipAsFhHKaX96EqNBE5g8LHHDPQizkR_G1IrtR1xzhMvf8ZtOfbqd9VTbKKHwQbqMwuV6xFee03XTQliiQf1KYMlNVTcrxgQek2z96TNLRQUoTi-BuqTZJWwN6w

Provide the following callback URL and Verify token to the webhooks setup page and select the message, message_postbacks, messaging_optins, and message_deliveries subscription fields. The following two steps will show how to generate Callback URL and verify token from Azure portal.

https://lh6.googleusercontent.com/xLfN04FPeaSWmxjyIww7HGUkwcB1lmpZlhaaEZpH9uBbe56Akz8U2Rx3W0RXoxBWuP9bNlGMrtB-QP1NngyW0J-fma3nTdeJXx1bqab-Ab65t0prLcHqU2UcRtlgGCEEvnhWDhpohqi0AN95WQ

You can click on “Verify and Save “and select the Facebook page to Subscribe the webhook to the Facebook page.

https://lh5.googleusercontent.com/eIBhhJuF80fIiREqFGB6xjRVjzKHqw93CTmc-IsDywRb_ZoilDJ0KlOCIIzri3zxlIGGAWLwt22WEsaU9G3rr7J_hB1TUMCSKjO3aJT1gQRdnf4OajfzTYkqWNF1UAh_0WckyanCOFMRDP-ElQ

Connect Facebook Channel

Step 1 -  Login To Azure Portal

Login to Azure portal > Select the “All Resources” > Select Channels > Select Facebook Messengers. Let us start to configure the “Facebook Messengers“ Channel and follow the below steps, at the end of this article you will be able to deploy the Bot into the Facebook messenger.

https://lh6.googleusercontent.com/aa4qMcNJ245cAHtb9VS3zN6--tQY57uZgqHbhT9Uj2goPsjMB1Kw6y9oqHCfciAMEk6r-ey3R9Yoh1XAlToxEK_9tNL0yQRQHEsF6r_nMVgdFfOZATHcVZklOmqb2YVEFKnei4zolq1R0QayDA

Step 2 - Generate Callback URL & Verify Token

The Azure Facebook configuration channel will generate the following Callback URL and verify token. You can copy that information and paste to the Facebook webhook setup screen. (Return to the Facebook messenger setup screen).

https://lh4.googleusercontent.com/-DTMr0ERTREoA6EkJz1M2UTJ4wamqZNqBCqHTL0eRp7BHG6dhuY2BW8MPhE9W7PC9dznMTgF9ZfVf1I2XvL-itG0Mm6cC34jcmAPfq4q7Ocg-c3xFbMwg3buY1718M5gffQrMp_Z6GkY5ahTqA

Step 3 - Enter Facebook Messenger Credentials

You can paste the Facebook App ID, Facebook App Secret, Page ID, and Page Access Token values copied from Facebook Messenger previously. You can use the same bot on multiple Facebook pages by adding additional page ids and access tokens.

https://lh6.googleusercontent.com/GGs4hNDU_1h1hchyXQbcJVU-9oO6INzNpdXWlCxVinbh9RUvJlO0Tm_difhjC0ar9zNmwhbfSu6n6m2kK6OAVMj98qd16FOqAVG3lTQuqCwueGEvVFkUEmKHkzqAE30IzrTRlVqzv-TgOa8W4w

Submit for Facebook Review

Select App preview and Click and Submit for review. After submitting it will take some time for the Facebook team to test the messenger bot and you can mark your app live available to the public, then you can test a messenger from the Facebook page.

https://lh6.googleusercontent.com/8aEI09-6KgNrZ7DX40ca7xD-hQpfPZpzB-Ds0MdII0A_ZYNyc5-2we6KBZrOt0wZXB6kZnSUn28CDo5LOszyAsq68AAl-lNkht8gxzQKI-0h3FIa1oj900zwFEzbGsgcRP-eFSrXFmSPupCaSg

Facebook Team review and Testing

You can verify Facebook team testing progress, navigate to your Facebook page and Click on Inbox and verify, if there is any problem to the messenger bot, the Team will update the bug list from App review screen.

 

https://lh5.googleusercontent.com/kLWth1gyPPrRbNvsLHeAzzrxHERcvi3ZRpTj5AMo3seQQIUcs99bmpknJMN2tYZ7h5ixPq_4nqIhZRZQsJbzLohhcIf0Ub0QzZakqGCvnA_nMjiILhWvFDAatO3c-moFlC7RWBK342mnH808aw

Xamarin FAQ Messengers testing

You can select your Facebook page and test your bot application. I have trained 7000+ more questions to the Facebook messenger bot from Xamarin Q&A Page if you want to look at the Xamarin FAQ demo. Navigate to Xamarin Q & A Facebook page and ask your Xamarin related questions.

https://lh6.googleusercontent.com/xEU9JcVRq9HTAGWbvNXLVB8ejtMa3eJX-bl7meTbSTIaSsZl0ckMnSMKl3yqd80tcILD06XQpVGi1jGbIMJjv3mL7TkgJlIgfwHQ0loNHPAlrmT_3pdV8wT8XDXXEltNxc_zmgM4Nn7UVJIflQ

Summary

In this wiki, you have learned how to integrate bot application into your Facebook Page via Azure Microsoft AI. If you have any questions/feedback/issues, please write in the comment box.