Email and Facebook Messenger Integration for Free

With my role change from Solutions Engineer India to Solutions Engineer South East Asia within Facebook Singapore, I am entrusted together with a set of folks to open newer avenues of Facebook messenger. I would acknowledge that I am still learning about Facebook Messenger and it’s capaibilties yet I wanted to post about this idea of mine because this is an idea built upon already accessible public APIs and can be hosted for free in an office PC sitting somewhere in the office corner.

Facebook messenger is a popular tool for many small businesses to interact with their customers and a lot of users try to reach out to business for asking/expecting support as well. In my experience, I have seen that in the set of tools that small businesses typically use, email is used by a huge majority of them for support or communication reasons. Also, maintaining a support person or adding a new support UI like Facebook’s unified inbox for replying to customer’s messages adds unnecessary complexity to their daily tasks. It struck to me that just by using infrastructure abailable today, we can integrate Facebook Messenger and Email together to address this problem.

Few goals I set for this task:

• Facebook messenger pings go to a configurable email as new emails
• Consecutive messages should link back to the same email
• Reply from email should reach the user on Facebook Messenger or a website’s messenger plugin

Demo Video

Before I jump over to implementation details, enjoy my test setup’s recording:

Previews

1. Messenger bot sends a message

2. Email is forwarded via GMail

3. Email can be replied from any email client like Outlook

Sources

I have made the source openly available and sharable on Fb Messenger Gmail Integration GitHub repo.

The system is made up in two parts (both are my previous repos) and both are individually testable/maintainable:

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

Tools Used

I used the following tools which are either free or very less priced. I had a ngrok subscription which costs 140 SGD for one year and all Facebook APIs involved in this integration are free. In case Gmail limit are reached, you may need to shelve out some dollars to satisfy Google but it’s not super costly and for most deployments a free Nodemon would do very well.

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

Configs

Following configurations are required for boot starting the server:

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

Testing

In order to test the deployment, one may follow following steps:

1. Edit the configs/defaults.json with your configurations

2. 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.

3. Setup Facebook Messenger bot and provide the messenger bot URL for verification. The token is TRAINING_BOT

4. 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

A user would expect the reply in a short time. Although this integration is a nice to have, it does not in any way motivate the customer support team to reply with a cadence as instantly as expected with Messenger. I assumed that the team woudl have some sort of measurement on how well they are performing for example average time in seconds to reply could be one such metric. Messages flow in the following format from Messenger to an Email:

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

   
    {
        sender: { id: '287XXX0934' },
        recipient: { id: '3084XXX3318' },
        timestamp: 1586360660992,
        message: {
            mid: 'm_M2-JIXXXXXXXQZS8UQ',
            text: 'Where are you located?'
        }
    }
    

2. 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

3. 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}
    

4. We can send a message back by a POST call to the message sender like below:

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

5. We use an email sender plugin to send mails using SMTP protocol and receive them using IMAP protocol.

6. 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

1. 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.
2. 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
3. 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