Blueprint: Transferring Customer Support Requests Between Facebook Pages
Maintaining conversations between multiple channels is a difficult challenge for customer support departments. Often companies launch different Facebook pages to enable their audience(s) to find the right type of engagement at the right time. However, this poses a problem when your audience starts to ask questions on a Facebook page not related to the purpose of that page.
A customer looking for support might visit your Facebook marketing page, comment on an existing post, create a new post or start a conversation in Messenger with your marketing bot. In these cases, you need a way to redirect the customer to your support page bot with little to no friction for the user experience. In this blueprint, we explain how to accomplish this goal of transferring customer support requests between Facebook pages.
What you need
Messenger Features
- Webhook: The Messenger Platform sends events to your webhook to notify your bot when interactions or events happen.
- m.me links: m.me is a shortened URL service operated by Facebook that redirects users to a person, page, or bot within Messenger.
- Welcome Screen: The first page people see when they encounter your Messenger bot, and m.me links require you to create one.
- Graph API: The primary way for apps to read and write to the Facebook social graph.
Prerequisites
Complete these steps first:
- Facebook for Developers account: This step is required to create new apps, which are the core of any Facebook integration.
- Facebook Pages created: This is used as the identity of your bot. For this blueprint, you need two pages, one for your marketing department, and one for the customer support department.
- An understanding of the Webhook setup: The Messenger Platform sends events to your webhook to notify your bot when a variety of interactions or events happen, including when a person sends a message.
- A second test account: You can’t message yourself, so you need a second test account.
- Facebook app setup: This guide shows you how to configure the settings for your Messenger bot, including access tokens. You need to do this for both pages. We go into further detail on some of these settings in later steps.
- Make both users an admin of both apps and both pages. This is necessary for sending messages between accounts during testing. Once you publish your apps and pages, you can message any user that grants you permissions.
- Build a basic bot for Messenger. You can do this with the Quick Start guide.
- Have a server with Node.js installed.
Repository with working code
You can find the final code for this tutorial in this repository that contains what’s need for this tutorial. You need to update your access credentials, and you can find details on how in the Readme.md file.
Step-by-step
Now we’re ready to start building our bot outlined in the next 12 steps below. We recommend you complete each step before moving to the next phase.
STEP 1: Download the starter project
We’ve created a starter project that has the structure set up for you. If you want to skip ahead, you can find the completed project here. The project contains two bots:
- The marketing Page bot in /marketing-bot
- The support Page bot in /support-bot.
STEP 2: Install dependencies for the Marketing Page Bot
To begin, we need to install some Node module dependencies defined in the package.json files for the marketing page bot. This bot uses:
- Express to set up a web server for the webhook.
- body-parser to parse the JSON body of the incoming POST requests.
- request to send HTTP requests to the Messenger Platform.
To install these commands, run this command in your terminal inside the marketing-bot folder:
STEP 3: Subscribe to Webhook events for Marketing Page Bot
The app needs to subscribe to the following webhook events.
Subscribe to messages
webhook events under Messenger → Settings of the app.
For the page webhook events we need to know when there is a new post or comment on a page, subscribe to feed
and conversations
under Webhooks → Settings. We cover handling these events in the next step.
STEP 4: Handle user posts to the Marketing Page
When someone posts on the marketing page they trigger the feed
event, and when they comment on a previous post they trigger the conversations
event. Your bot needs to listen and react to these events.
The app.post('/webhook', (req, res)
route in app.js currently handles messaging
events, but user posts are change
events, so add an else if
statement to the existing if
statement to handle this new event type:
This code passes the changes to the processComments
function which we create next.
STEP 5: Reply to people who commented
In a production bot, we could use natural language processing to analyze comments and react to those containing potential support requests. For this blueprint, we assume that all comments require support and send the poster a private message redirecting them to our support bot.
Get the post_id for the post or comment
We are listening to two types of events on our marketing page: a new post and a comment on an existing post. To send a private reply, we need the post_id
of the post that the user wrote, and that post_id
is in different places in the response.
Add the following to the stub processComments
method:
This code sets the post_id
we need to the appropriate value depending on the event type.
Set the body of the private reply
Private replies to a user only accept text for the message body, and we want to pass the poster’s original message to the support page bot so that it can react to the original question. To do this, we use the m.me link for the support page bot (the page and bot username) and pass the original message to it as the ref
parameter. After the else if
statement you created above, add the following code:
Send private reply
Now we send a request to the private_replies
endpoint of the Graph API, which requires two parameters:
- To reply to the poster of the comment or post, we need the
comment_id
of the post or comment. - The
message
to send.
Now add the following code beneath the code we created above:
STEP 6: Create the Support Page Bot
With step 5 complete, we now need to create the support page bot to handle the incoming message and respond to the user.
STEP 7: Install dependencies for the Support Page Bot
To begin, you need to install some Node module dependencies defined in the package.json files for the support page bot. This bot uses:
- Express to set up a web server for the webhook.
- body-parser to parse the JSON body of the incoming POST requests.
- request to send HTTP requests to the Messenger Platform.
Run this command in your terminal inside the support-bot folder:
STEP 8: Webhook events and subscriptions for the Support Page Bot
Subscribe to the messages
, messaging_postbacks
and messaging_referrals
events from Messenger.
We cover what these events are and what triggers them in step 11.
STEP 9: Set a username for the Support Page
Giving your Facebook page a username is a good practice, and for the m.me links to work, the support page needs a username set. You can do this from the Edit Page Info > Create Page username dialogue.
STEP 10: Set the Support Bot Welcome Screen
To accept incoming messaging_referrals
events, the support bot needs a welcome screen set with a 'Getting Started' button defined. You set this by issuing a POST
request with the text for the screen, and the payload sent to your bot when a user clicks that button:
STEP 11: Respond to the user
Clicking the m.me link takes the user to the bot welcome screen if this is their first conversation with the bot and into an active conversation if they have used it before. In each case the payload sent to the support bot is different, and so is getting the value of the original message.
At the bottom of the app.post('/webhook', (req, res)
route in the /support-bot/app.js file, add the following if else if
statements to handle the different types of events the bot receives:
This code handles message
, postback
and referral
events a user sends to the bot. postback
and referral
events are the two event types that contain the original message somewhere in their payload. In both cases, we pass the relevant value from webhook_event
to the handleIncoming
method. This is webhook_event.postback
for a new user and webhook_event.referral
for returning users.
In the stub handleIncoming
function, add the following code that handles getting the original message from the referral parameter for users who have used the bot before:
For new users add the following else
statement to the if
statement for when the event instead has a payload that contains get_started
:
In a production application, the support bot can now parse the incoming message for the intent of the message to see how it can help, or present interaction options with the bot.
STEP 12: Testing the blueprint
Each bot has a different node port defined (5000
for the marketing page bot and 5001
for the support page bot). Issue the following command inside the folder for each bot to start them:
To test this blueprint, you need to log in to two different browsers with each of your Facebook accounts. When you post or comment on the marketing page, make sure you do so from your test account, and not as the page.
Conclusion
In this blueprint, we looked at how to pass messages and users between bots attached to different business pages for different purposes — ideally helping your customer support team with all inbound communications. We covered the settings needed for pages and applications for this bot to work, the APIs you need to build the workflow, and how to pass information between bots.
The technique we covered is useful for directing visitors to the correct department within your company, or for creating viral marketing campaigns by spreading messages between pages — conveniently for you and your users. Join the Dev group to let us know about your ideas and experiences implementing this blueprint in your apps.