Facebook Messenger and hybris integration

Introduction

This spring Facebook launched the Messenger platform making it possible for developers to connect their systems with the more than 900 million people around the world who use Messenger.

By default, hybris uses e-mail communication as an only channel to communicate with the customers. However, such channels as Messenger or SMS, are very reasonable for e-commerce, because they make the customer experience nicer and more convenient.

Messenger allows customers to communicate with e-shop in a quick and effective manner, without the delays associated with email.

In my PoC, when a customer makes a purchase, the conversation begins via Messenger. The customer receives a notification, that is delivered instantly. I demonstrate that the automated updates are sent directly to the customers through Messenger, allowing them to track order status and ask questions all in one place. Messenger makes it easy to answer questions about orders and invite your customers to check out related products.

Basically, Messenger can be easily replaced with any other IM software that has appropriate API:

  • Google Hangouts,
  • Slack,
  • Telegram,
  • and so on.

Solution

In the video, I demonstrate the following:

  • One-click facebook authentication in hybris:2016-09-06_19h19_20
  • At the final step of the checkout flow there is a button “Send to messenger” that enables the notifications via Facebook Messenger:
    2016-09-06_19h22_36
  • Once you click this button, you will receive the message:Screenshot_2016-09-06-19-25-51_1.png
  • I demonstrate two-way communication. For example, the customer may ask something just by replying to the message. In my demo, that is a message “some question”. The system replies immediately with the message “we received your request, we’re processing it”. Actually the message is delivered to hybris, as a ticket linked to the order and the customer.2016-09-06_19h31_15.png
  • I demonstrate that the ticket is created and this ticket is linked to the order and customer:2016-09-06_19h33_542016-09-06_19h36_24

    Actually using tickets for the messages is just an example. For the real system, any other channel/functionality might be leveraged.

     

  • I demonstrate that once the customer agent adds a note to the ticket, the note is delivered back to the customer. Actually, it is just an example. You can use any other events like updating the order status or customer data (or something else that relevant to the order and the customer). 2016-09-06_19h41_02
    chat window:
    2016-09-06_19h40_09

Video

Limitations

We get a page-scoped user ids from Messenger, so we can’t match existing users with their app-scoped user ids, even though we are using the same FB App for Facebook Login and Messenger Bot Integration. There are some ways to match the messenger users and facebook users, but it is outside the scope of this topic.

Facebook Documentation: The id must be an ID that was retrieved through the Messenger entry points or through theMessenger webhooks (e.g., a person may discover your business in Messenger and start a conversation from there. These IDs are page-scoped IDs (PSID). This means that the IDs are unique for a given page. If you have an existing Facebook Login integration, user IDs are app-scoped and will not work with the Messenger platform. 

There are rate limits in Facebook messenger to prevent malicious behavior and poor user experiences. The direct advertising is not welcome. If you send upsale/crosssale offers, you may expect some consequences if the customers make a complaint.

There is a length limit for text messages. The messages must be UTF-8 and have a 320 character limit.

Technical details

facebook Webhook is a module that serves as a listener for facebook requests. Once the customer sends a message, facebook makes a request to Webhook module. This module sends responses as well.

When customer enables the order updates (by clicking the blue button at the final step of the checkout), the Webhook receives an authorization message from Facebook. Webhook makes a request to hybris for the information about the order and send it back to the user (see the example above, with the thank you message in the chat). In my PoC the order number is injected into the code, but for the real system, this value should be encrypted to avoid receiving information about someone else’s orders.

<div class="fb-send-to-messenger"
  messenger_app_id="855289644608024"
  page_id="1262635023749717"
  data-ref="${orderNo}"
  color="blue"
  size="xlarge"></div>

(this code displays the blue button)

Webhook knows about the recipientID, the unique ID of the user for this particular page. I link this ID with the userID when the customer enables the messaging, so for next messages, this ID will be used to specify the recipient of the message.

5 comments

  1. Swapnil · · Reply

    Very good article! I am trying to send the long text messages more than 320 characters using facebook messenger. I am dividing the long messages into the chunks of 32o characters. But when I send these chunks, they are getting shuffled. To solve this I introduced delay function but still unable to solve this issue. Please help me. Thank you.

    Like

    1. Unfortunately, I have no solution. It seems that it is a Facebook’s issue.
      http://stackoverflow.com/questions/37152355/facebook-messenger-bot-not-sending-messages-in-order

      Like

  2. This is great Article Rauf.

    Like

    1. Thank you!

      Like

  3. pareshv · · Reply

    This is great POC Rauf.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: