Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This document briefs you on how to connect Orbita to the Facebook messenger bot.

Table of Contents
excludeRelated articles

Setting up Facebook

In order to set up the Facebook integration for your agent, you'll need the following:

When a user visits your page and sends a message, they'll be talking to your chatbot.

Create a Facebook App

  1. Log in to the Facebook Developer Console.

  2. Click on My Apps in the upper right-hand corner.

  3. Click on Create App

  4. Select Manage Business Integrations and click Continue.

    Image Removed
  5. Add a display name and click on Create App.

    Image Removed

Making the App Public

  1. Go to the App page and click on Settings > Basics.

  2. Fill in the necessary details and click on Save Changes.

    Image Removed
  3. Toggle the status to ON. Click on Confirm in the pop-up dialog box.

Adding messenger to your App

  1. Click on Products from the side menu, select Messenger, and click on the Set Up button.

    Image Removed
  2. In the Products > Messenger > Settings page, click on “Add or Remove Pages” to add your Facebook page to the App.

    Image Removed

Access Tokens

...

In the Access tokens section of the settings page, click on the Generate token against the page you added.

...

The access token should be kept safe for later use.

Webhooks

...

In the Webhooks section, click on Add Callback URL.

...

Click on the “Add Subscriptions” button and check the messages and messaging_postbacks options. Click on Save.

...

The Webhooks should have a "Complete" status with a green tick (tick) as shown in the screenshot below.

...

  1. App icon

  2. Valid privacy policy url

  3. Business use

  4. App category

Make the app public

Please ensure to toggle on the Live status to make the app public.

...

For Business users, you need to do Business Verification to make the app public.
Click on the Get started and submit the verification to Facebook.

...

Setting up the Experience Designer

Connect two function nodes before and after Bot provider V2 node. One for getting the input from Facebook and the other to Process the output sent to Facebook.

Design a flow as shown below.

...

For Facebook to verify our callback URL

  1. Add “http in” node with URL as bot/messenger dockflow and the Method: GET

    Image Added
  2. Add a function node (named Verification node in the sample flow screenshot) with the following code.

    Code Block
    msg.payload = msg.payload['hub.challenge'];

    
    return msg;

    Image Added

  3. Add the http out” node to the flow.

For connecting the chatbot

Add “http in” node with URL as bot/dockflow and the Method: POST

...

FB input

Place the below code in this function node.

...

Place the below code in this function node. Replace the in the code with Facebook’s Place the Facebook page Access token you copied generated when the page is connected to the Facebook App., in the code (denoted by XXXXXX)

Code Block
var stripTags = msg.payload.orbitaPayload.payload.multiagent.chat.chatText.replace(/<[^>]+>/g, '')
msg.payload=
{
  "messaging_type": "RESPONSE",
  "recipient": {
    "id": msg.orginalPayload.fbSenderId
  },
  "message": {
    "text":stripTags    
  }
}


msg.url = "https://graph.facebook.com/v4.0/me/messages?access_token=XXXXXX"
msg.method = 'POST';
msg.headers = {};
msg.headers['Content-Type'] = 'application/json';
return msg;

http request

Configure this the HTTP request node as shown in the below screenshot before connecting it to “http out” node.

...

Sample flow

...

View file
nameSample_flow_facebook_integration.json

Setting up Facebook

In order to set up the Facebook integration for your agent, you'll need the following:

When a user visits your page and sends a message, they'll be talking to your chatbot.

Create a Facebook App

  1. Log in to the Facebook Developer Console.

  2. Click on My Apps in the upper right-hand corner.

  3. Click on Create App

  4. Select Manage Business Integrations and click Continue.

    Image Added
  5. Add a display name and click on Create App.

    Image Added

Making the App Public

  1. Go to the App page and click on Settings > Basics.

  2. Fill in the necessary details and click on Save Changes.

    Image Added
  3. Toggle the status to ON. Click on Confirm in the pop-up dialog box.

Adding messenger to your App

  1. Click on Products from the side menu, select Messenger, and click on the Set Up button.

    Image Added
  2. In the Products > Messenger > Settings page, click on “Add or Remove Pages” to add your Facebook page to the App.

    Image Added

Access Tokens

  1. In the Access tokens section of the settings page, click on the Generate token against the page you added.

    Image Added
  2. Check the I Understand checkbox, click on Copy,and select Done.

    Image Added

The access token should be kept safe for later use.

Webhooks

  1. In the Webhooks section, click on Add Callback URL.

  2. Copy your web chatbot URL and paste it here.
    For example,https://<yourdomain>.orbita.cloud:8443/oeapi/bot/dockflow

  3. Click on Verify and save.
    The Facebook will post a request to the callback URL and the Verify Token will be auto populated and saved in the Facebook app.

    Image Added
  4. Click on the “Add Subscriptions” button and check the messages and messaging_postbacks options. Click on Save.

    Image Added
  5. The Webhooks should have a "Complete" status with a green tick (tick) as shown in the screenshot below.

    Image Added

Ensure you have the following checked.

  1. App icon

  2. Valid privacy policy url

  3. App purpose / Business use

  4. App category

Make the app public

Please ensure to toggle on the Live status to make the app public.

...

For Business users, you need to do Business Verification to make the app public.
Click on the Get started and submit the verification to Facebook.

...

Related articles

Filter by label (Content by label)
showLabelsfalse
max5
showSpacefalse
cqllabel in ( "chatbot" , "web-sdk" )