FbMessengerGmailIntegration

This project aims to demo integration of Facebook Messenger with Gmail. Several businesses cannot have customer support resources respond to the messages sent to their Facebook Page causing a not-so-great customer service. Also, most businesses in today's world have some sort of customer support which runs over email. This project aims to bridge this gap where a business can smoothly let their customer support teams (or on-call teams) respond in realtime to the messages dropped on their Facebook Page from existing email channel like Gmail.

Demo Video

https://youtu.be/gktg9gnl6EM

Preview

Tools

We use Glitch which is a platform which provides free hosting of NodeJS server over an https URL.
Alternatively, one can use ngrok which provides a tunnel from a public URL to local development PC for easier testing and debugging.
Nodemon helps live reload applications when the source is changed and loaded locally.

Configs

Following configurations are required for boot starting:

gmail_username and gmail_password which would be used for forwarding emails.
forward_alias where emails can be forwarded.
Enable Less Secure Apps so that Google does not block sign-in attempt by checking the toggle here.
Enable IMAP in your Gmail account settings as described here

Testing

Edit the configs/defaults.json with your configurations.
Host your bot on a publicly accessible URL, follow either of the below-mentioned sub-points:

a. Use a glitch bot, which gives a URL like this: https://glitch.com/~anand-messenger-bot

b. If you use ngrok, buy a certificate and host your server on https by ./tools/dev-ngrok.sh. Can use a custom domain also to avoid making frequent changes in webhook URL.
Setup Facebook Messenger bot and provide the messenger bot URL for verification. The token is TRAINING_BOT.
Once hosted, if anyone sends a message to your page an email is received and vice versa if that email is replied, a message is popped in the Facebook Messenger of the user.

Flow

When any user sends a message from messenger UI to page, we get a webhook ping like below:

{
    sender: { id: '2872396396200934' },
    recipient: { id: '308443763363318' },
    timestamp: 1586360660992,
    message: {
        mid: 'm_M2-JIMCQwQp0cFQ5zJPG8eY7lzkyVX8zM1Mq-eplFTg0bmgLsd0YfdFFkGPu-oNyoJAJk2511AZzX2p5QZS8UQ',
        text: 'Where are you located?'
    }
}

Details of params: psid or sender is EntMessengerPageScopedID and does not represent a FB User but just an entity for user to page conversation. recipient is the page id. mid represents a unique id of every message. timestamp is the unix timestamp in millis with GMT timezone. text is the unicode encoded text
We can get the details of who the user is by making the following call: https://graph.facebook.com/${psid}?fields=first_name,last_name,profile_pic&access_token=${page_access_token}
We can send a message back by a POST call to the message sender like below:

https://graph.facebook.com/v6.0/me/messages
{
    recipient: {
            id: ${psid},
        },
        message: {
            text: ${message}
        }
}

We use an email sender plugin to send mails using SMTP protocol and receive them using IMAP protocol.
Email replies can be tapped in the messenger bot server, message reply contents can be seperated from the mail thread and replies can be sent to the user using step #4.

Common issues

FB Page only replies to me, but not someone else?

The Facebook app is likely still in Development Mode. You can add someone as a tester of the app, if they accept, the app will be able to message them. Once ready, you may request the pages_messaging permission to be able to reply to anyone.

Nowhere to host the FB Messenger bot

Use glitch (free) or ngrok (paid to use https) or any other tunnelling software to get a public URL for your deployment. ngrok http 5000

Cannot connect to the server

Check whether require('dotenv').config(); is enabled or not. If not enabled and not running in glitch (where .env files are autoloaded), the server may not run on port 5000.

Other Sources

The system is made up in two parts (both are my previous repos):

To send a message from FB Messenger, detailed explanation here.
To send and reply to emails, detailed explanation here.

vishwarajanand / FbMessengerGmailIntegration