You can install the Facebook Messenger App on your store to enable automatic sending of messages to your clients via Facebook Messenger. When this feature is active and configured, the App will automatically send your clients messages in the case of the following events:

  • When a customer opts-in to the feature, by pressing the Send to Messenger button on the order success page.
  • When an order's status changes to Paid, Canceled or Abandoned.
  • When an order is Shipped.

During the setup process, the App will need to get the permission to access your store's Facebook Page, and use it to send the automated messages.

Contents

  1. Requirements
  2. Setup
  3. Adding the Send to Messenger button to your page
  4. Opting-In
  5. Replying to Messages
  6. Sample Messages
  7. Code placement for each theme

Requirements

In order to activate the Facebook Messenger App and its full functionality on your store, you will need to fulfill the following requirements.

  • A public Facebook Page, which will be used to send the messages to your customers. This should be your store's Facebook page.
  • A Facebook account with admin or editor role on the Facebook Page mentioned above.

This way, the App can gather the necessary permissions to send messages through your page.


Setup

The first step is to install the app itself on the Applications section of your store's admin panel.

  1. Go the the Apps section of the admin panel.

  2. Under the Gallery tab, search for the Facebook Messenger App.

    app

  3. Move your mouse over it and click the I Want to Install button.

After installing the app, you need to perform the following 3 steps.

Step 1 - Log in to Facebook

Press the Log In to Facebook button. This will open up a dialogue section where Facebook will ask you to grant the App the permissions needed to continue after you log in.

Step 2 - Select Facebook Page and Opt-In Message

After successfully logging in, a new section will appear, with two fields.

  1. Select Facebook Page : The app will automatically retrieve the pages associated to the Facebook account you just logged in with. In this step, you should select the page you want to use with the App. This should be your store's Facebook Page.

  2. Opt-In Message : You can customize the message your customer will receive as soon as they opt-in to the feature. This message will be sent along with a receipt for their purchase.

Step 3 - Save

After completing the two steps above, you can click the Save button to confirm your selections. This will generate a code snippet that needs to be part of your online store. See the next section for details.


Adding the Send to Messenger button to your page

After completing the setup and saving your settings, the App generates some code that needs to be included in your store.

If you have recently changed the theme of your store (November 15th 2017 or later), this code is already included and this step is not necessary.

However, you will need to manually include it in your store if you have a customised theme or haven't changed your theme in a while.

This step is necessary so that customers see the Send to Messenger button after completing their purchase and are able to opt-in to the features.

The code should look something like this.

<div id="send-to-messenger" class="fb-send-to-messenger" data-ref=></div>
  1. To find where to place this code, start by going to the Code Editor on your store's admin panel.

    code-editor

  2. Once in the code editor, navigate to Payments -> Success

    payments-success

  3. The section you just navigated to contains the code for the Success page, which customers see after they finish a purchase. Pasting the generated code on this file will enable the Send to Messenger button to appear on the success page.

The code can be pasted anywhere on the page. Depending on where it's pasted, it will show up on different sections of the success page.

order-success

View the suggested code placement for each theme


Opting-In

After everything is setup, customers can opt-in to this feature by clicking the Send to Messenger button on the checkout success page.

send-to-messenger

This will trigger the App to send the customer the custom message that was set along with a receipt for their purchase. The customers will also be signed up for further updates on their order.


Replying to Messages

While the Facebook Messenger App does not create automated replies to customer messages, it does open a communication channel between the customer and the store's Facebook Page. The customers are able to ask questions while the merchants are able to respond via their store's Page.


Sample Messages

Order Shipped Message

order-shipped

Mobile view

sample1


sample2

messenger


Suggested code placement for each theme

When copying the code into your theme, to make it fit correctly and look good with each of the themes, put it in the following areas of your code. Note that if you have made changes to your theme in the past, the outcome of this code placement may vary. Also, it is important to keep in mind that this is the default placement of the Send-to-Messenger button on new themes.

  • Astrid: Just above {% if order.payment_information != blank %} , after {% endif %}. This is line 24 if you haven't made any changes to the theme.
  • Bootstrap: Just above {% if order.payment_information != empty %}, after {% endif %}. This is line 21 if you haven't made any changes to the theme.
  • Bundle: Just above {% if order.shipping_required %}, after {% t "An email with your order summary has been sent to" %}: {{order.email}}. This is line 30 if you haven't made any changes to the theme.
  • Collage: Just above {% if order.payment_information != blank %}, after {% endif %}. This is line 20 if you haven't made any changes to the theme.
  • Core: Just above the closing tag for the "successInfo" div, after {% endif %}. This is line 26 if you haven't made any changes to the theme.
  • Cupcakes: Just above the closing tag for the "small-12 large-8 columns successContentLeft", after the closing tag for the "successContent" div. This is line 39 if you haven't made any changes to the theme.
  • Influence: Just above {% if order.shipping_required %}, after the closing tag for h3. This is line 12 if you haven't made any changes to the theme.
  • Kickstart: Just above {% if order.shipping_required %}, after the "end .success-content__block" comment block. This is line 118 if you haven't made any changes to the theme.
  • Megami: Just above {% if order.payment_information != blank %} , after {% endif %}. This is line 27 if you haven't made any changes to the theme.
  • Modern: Just above 'hr' and {% endif %}, after the closing tag for the order shipping paragraph. This is line 44 if you haven't made any changes to the theme.
  • New Simple: Just above the closing tag for the "small-12 medium-12 large-12 columns text-center succes-intro" div, after the closing tag for the email summary paragraph. This is line 12 if you haven't made any changes to the theme.
  • Novus: Just above the closing tag for the "row success-order-shipping" div, after the closing tag for the "small-12 columns" div. This is line 33 if you haven't made any changes to the theme.
  • Premium: Just above the closing tag for the "success-page-title" div, before the closing tag for the "success-page" div. This is line 11 if you haven't made any changes to the theme.
  • Simple: Just above the opening tag for the "col-12 mb-3 mt-3" div, after the closing tag for the "col-12" div. This is line 52 if you haven't made any changes to the theme.
  • Vintage: Just above {% if order.payment_information != blank %} , after {% endif %}. This is line 15 if you haven't made any changes to the theme.

The following video shows an example of the Send-to-Messenger button: