Site Overlay

Building a Bot for your Facebook Page

Building a Bot for your Facebook Page

In the last article, i wrote a piece on how to build a simple bot using API.AI. Today i am publishing an article to help business owners to have a bot for their facebook page.

Image Credit: Unsplash

This bot will give more information about your company and the products you deal in. So, Let’s get started:

Step 1: Create a new Agent and enter the sample content like shown in the image below. In my case, i have published the name as FacebookBot.

Image Credit: Unsplash

Step 2: Lets first change our Welcome Intent so that we have better customized reply as compared to that of Just Hi’s and Hello’s.

For this very fact, i will first delete all the responses available and add custom responses. My “Text Response” for all the people to welcome would be “Welcome to Androcid. We are a company based out of India and we work on Mobile Apps. How may i help you?”

So the welcome intent looks like this:

Image Credit: Unsplash
Image Credit: Unsplash

Save the Intent when done. I won’t change anything in Default Fallback Intent and leave it as is.

Step 3: Lets create a custom intent to help users to know more about the products you deal in.

Click on “CREATE INTENT” and add the inten name as “Services”. This Intent is to help user to understand more about the company services. After adding the data, the content looks like below:

Image Credit: Unsplash

Let’s now add a Text response that the User will receive when the above content is posted. Save the Intent.

Image Credit: Unsplash

Step 4: Lets create a custom intent to answer user request in case if he is interested in the services of the company.

Click on “CREATE INTENT” and add the Intent Name as “AvailService” aiming to reply to customers who are interested in the services. Currently, i have added just two reference inputs, but you can scale it as much as you need.

Image Credit: Unsplash

We write a simple text response to take his first name for the records. Save the Intent.

Image Credit: Unsplash

Step 5: Lets create a custom intent ask user the contact details.

First we create a custom Intent “ContactDetails” to ensure to capture user’s First name followed by other Intent “MobileDetails” to capture User’s Mobile number.

Image Credit: Unsplash

One thing that needs to be known here is, API.AI uses trained list of over 2500 names according to the SSA popular names list. Not all the names would have its defined state. If you are looking at custom names then you can have a dynamic database of names specific to a person or client. This link can help you with it.

Image Credit: Unsplash

When the User enters the Name, we custom the message prompting the user to enter the Mobile Number. For this, you can use an Option of “Add Follow Up Intent” in the Intents Screen as shown below.

Image Credit: Unsplash

When you click on Add Follow-Up Intent, it will have its own custom name auto generated. This can be changed when you open up the Follow Up Intent and custom the data as per your needs.

Image Credit: Unsplash

Step 6: To test what the Bot looks like so far, API.AI has a Integration option.

Image Credit: Unsplash

Just visit the Integrations tab in the sidebar and click on Web Demo. Enable the same and you will see a link. Clicking on the link you will able to test the bot.

Image Credit: Unsplash

Step 7: Let’s integrate the same with Facebook.

At this point i would like to make one note that, the bots can be published only after Facebook approves it. Until then, you have to work with developer console to build the bot followed by submitting it on facebook. This will only work when the user is YOUR ACCOUNT i.e the permission account.

Visit https://developers.facebook.com/ and click on Add a new App. When the window opens, put the Display Name as what you like it to be. In My case it’s “AndrocidChat”. The page will display captcha, fill it and proceed to next step.

Step 8: Click on the messenger option and make the settings.

Image Credit: Unsplash

Once the page loads, select the page you wish to have this bot running.

Image Credit: Unsplash

Once you have the page selected, it will authorize you. After successful authorization, it will generate a token. Copy the token and goto integration options in API.Ai website.

Step 9: Enable the Facebook Settings in Integrations

Image Credit: Unsplash

Insert the copied Verified Token onto this Step 2 area and click Start. In the place of Verify Token , enter a tag: “client” or any other.

Step 10: Enable the setting for Webhooks.

Visit the Facebook Dev console for this app and go to the section Webhooks. Click Set up Webhooks. When the window opens like this:

Image Credit: Unsplash

Please follow the steps below to set up this Webhook:

  • Go back to your API.AI agent settings, copy the Callback URL and insert it to the ‘Callback URL’ field.
  • Enter in the FB_VERIFY_TOKEN field with the token that you created in your API.AI agent settings.
  • Check the “messages” and “messaging postbacks” checkboxes.
  • Click the ‘Verify and Save’ button and wait until the “Complete” status appears like shown below
Image Credit: Unsplash

Make sure the page is subscribed to this webbook. If not, you can subscribe it manually.

Step 11: We’re done. The bot is ready.

Image Credit: Unsplash

Try sending your messages from messenger and the bot will auto reply to your questions. You can also submit the app to Facebook for approval. And if approved: It’s Time to announce that your Page is now BOT powered.

Image Credit: Unsplash

Looking for building your own apps, check Androcid at: http://androcid.co We are a premiere mobile application engineering company based out of the sunny state of India, Goa.

Image Credit: Unsplash

Click❤ to recommend this to other Medium readers interested in AI, chatbots and development.

Leave a Reply

Your email address will not be published.

Copyright © 2022 . All Rights Reserved. | Chique Photography by Catch Themes