wa-chat-server-facebook

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.