Wa-chat-server-facebook NPM

wa-chat-server-facebook

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

Create Facebook Messenger App

Go to https://developers.facebook.com/ and log in using your credentials
Create new Messenger app and open it
From the left panel go to Messenger / Settings
In Access Tokens section add your Facebook page and generate token (1)
In Webhooks section add your callback URL <APP_URL>/adapters/facebook and add a Verify token (2) which can be random value (ideally UUID)
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

text - Text reply (interpreted as Text message)
suggestion - Disambiguation (interpreted as Postback buttons)
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.