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.

...

Design a flow as shown below.

...

For Facebook to verify

...

Orbita’s callback URL

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

  2. Add a function node (named Verification) with the following code.

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

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

...

Connecting the chatbot with Facebook messenger

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

...

Place the below code in this function node.

Code Block
ifvar _ = global.get('lodash')
var text = _.get(msg.payload., "entry[0].messaging[0].message.text", "");
var senderId =  _.get(msg.payload.text, "entry[0].messaging[0].sender.id", "");
var recipientId = _.get(msg.payload., "entry[0].messaging[0].message.text 
else.recipient.id", "");

if(text){
    msg.payload.text = text
}
else{
    msg.payload.text="Launch"
    msg.payload.fbSenderId = msg.payload.entry[0].messaging[0].sender.id;
sid;
}
if(!msg.data){
    msg.data = {};
}

// while repling back to the messenger the senderId and the recipientId should be swapped.
msg.data.senderId = recipientId;
msg.data.recipientId = senderId;

return msg;

Process FB output

...

Code Block
var stripTags = msg.payload.orbitaPayload.payload.multiagent.chat.chatText.replace(/<[^>]+>/g, '')

msg.payload=
{
  "messaging_type": "RESPONSE",
  "sender": {
     "id": msg.data.senderId
  },
  "recipient": {
     "id": msg.orginalPayloaddata.fbSenderIdrecipientId
  },
  "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 the HTTP request node as shown in the below screenshot before connecting it to the “http out” node.

...

Sample flow

Import this flow

...

to your Experience Designer to avoid the above steps.

Attachments
previewfalse
oldfalse
patterns.*json

Setting up Facebook

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

...

  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.

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

...

Creating an App for the integration

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

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

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

Ensure you have the following are populated and valid for the chatbot to work.

  1. App icon

  2. Valid privacy policy url

  3. App purpose / Business use

  4. App category

Adding messenger to your App

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

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

...

  1. Select the pages you wanted to add the chatbot to and click on Next.

    Image Added

  2. Toggle the Manage and access the Page conversations on Messenger option to ON and click Done.

    Image Added

Access Token

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

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

...

  1. Go to Experience Designer > FB Chatbot flow > Process FB output function node.
    Replace the XXXXXX with the copied token in the msg.url property.

    Image Added

  2. Click Done and Deploy the flow.

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.

    Image Added

  4. The Facebook will post a request to the callback URL and the Verify Token will be auto-populated and saved in the Facebook app.

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

Ensure you have the following are populated and valid from the Settings > Basic page.

  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.

...

You have now successfully connected your Facebook page messenger with Orbita’s chatbot.

Related articles

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