wa-chat-server-facebook

wa-chat-server-facebook is a wa-chat-server adapter for the Facebook messenger.

Create Facebook Messenger App

1. Go to https://developers.facebook.com/ and log in using your credentials
2. Create new Messenger app and open it
3. From the left panel go to Messenger / Settings
4. In Access Tokens section add your Facebook page and generate token (1)
5. In Webhooks section add your callback URL <APP_URL>/adapters/facebook and add a Verify token (2) which can be random value (ideally UUID)
6. Add your Facebook page to this Webhook and add select messages and messaging_postbacks in the Edit page subscriptions dialog

Adapter Usage

Register The Adapter

An initialization of the wa-chat-server (in a chat application using wa-chat-server to communicate with Watson Assistant) with a wa-chat-server-facebook adapter looks like this:

require('dotenv').config();
import { WAChatServer, Types } from 'wa-chat-server';
import { WAChatServerFacebookAdapter } from 'wa-chat-server-facebook';
const server: WAChatServer = new WAChatServer((process.env as any) as Types.IWAChatServerConfig);
server.addAdapter('facebook', WAChatServerFacebookAdapter);
server.serve();

Configure The Adapter

We must set the following environment variables (e. g. in .env):

| Variable | Obligatory | Meaning | | ------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | adapter__facebook__facebookApiUrl | Y | https://graph.facebook.com/v13.0/me/messages | | adapter__facebook__facebookToken | Y | Token (1) | | adapter__facebook__chatServerVerifyToken | Y | Verify token (2) | | adapter__facebook__integrationSource | N | Sets value of context variable integration-source. Default value is facebook | | adapter__facebook__replaceHtmlAnchor | N | If set to true the adapter will replace html tags to plain text value | | adapter__facebook__useSenderActions | N | If set to true the adapter will use mark_seen and typing_on sender actions when message is received (might generate additional API calls); If set to any other string (including false), it will be used as a context variable name and checked in incoming requests (refer to table below for examples); |

Use Sender Actions Example Table

| Configuration | Context | Will use sender actions? | | ---------------------- | -------------------------------------- | ------------------------ | | undefined \| null | any | N | | true | any | Y | | disableSenderActions | { } | Y | | disableSenderActions | { disableSenderActions: null } | Y | | disableSenderActions | { disableSenderActions: false } | Y | | disableSenderActions | { disableSenderActions: true } | N | | disableSenderActions | { disableSenderActions: 'disabled' } | N |

Watson Assistant Response Support

1. text - Text reply (interpreted as Text message)
2. suggestion - Disambiguation (interpreted as Postback buttons)
3. option - Options (interpreted as Postback buttons)

Local Development

HTTP Tunnel Setup

For local development we need to set up a secure tunnel localhost and Facebook. We can use ngrok for this purpose:

ngrok http 3023

opens a tunel and gives us a public HTTPS URL to be used by Facebook (without an ngrok account the lifetime of the tunnel will be 2 hours). We must then use the Meta for Developers to set the Callback URL:

We may inspect the communication tunneled by ngrok to localhost on http://localhost:4040.

Transpilation

Run

npm run dev

Linking The Library to The Chat Project

Run

npm link

from the wa-chat-server-facebook root folder.

and then

npm link wa-chat-server-facebook

from the root of your chat application.