If you have a development team and prefer to the integration yourself, you can follow the directions below. This generally takes a developer 2-4 hours end to end.

Account Setup

Start: Get a ShopMessage Account

Contact our team to get an account created for your site. Your account will let you:

  • Connect your Facebook page
  • Customize your sequences using our editor
  • View your site's specific loader script

Integration Setup

Debugging Tips and Tricks

To make the development and debugging process easier, ShopMessage provides a Live View of all events and a Chrome Extension helper. You can lean more here: http://help.shopmessage.me/integrate-with-your-site/how-to-verify-your-shopmessage-integration-is-complete

Step 1: Add the ShopMessage Loader Script To Your Pages:

Like other similar services, this code snippet will ensure that the ShopMessage functionality is available on your site through a global client object called _shopmsg. This object will be used to trigger events through the ShopMessage SDK, detailed in the next steps. NOTE: Please make sure this code snippet gets placed BEFORE any calls to the _shopmsg  client object.

Step 2: Load the Checkbox Widget On Your Product Pages:

You will need to tell ShopMessage where to put the checkbox plugin so that it can collect Facebook optin events from your customers. This is as simple as including the following HTML on your page where you want the checkbox plugin to load:

<div class="shopmessage-checkbox" id="addToCartCheckbox"></div> 

Note: The id  "addToCartCheckbox" can be anything you like. If you add multiple checkbox to your page, say on an opt-in modal, then be sure to apply a different id for each one. 

Once this markup is added, ShopMessage will place the Facebook checkbox widget into this element. As per Facebook TOS, the checkbox needs to appear in a "clear and conspicuous" location such that your customers are aware they are opting in to messaging. We recommend placing this directly underneath your "Add to Cart" button as shown below:

You can customize the checkbox with the following variables:

  • skin: light (default), darkUse dark  to give white text so that the checkbox is visible on a dark background.eg. <div id="shopmessage-checkbox" skin="light"> 
  • center_align: false (default), trueHave the components within the checkbox be center aligned, versus the default left align.eg. <div id="shopmessage-checkbox" center_align="true">  
  • allow_login: false (default), trueWhen set to false , users will only see the checkbox if they are already logged into Facebook in the browser session. The checkbox will not render at all if the user is not logged into Facebook.If set to true , users will see the checkbox always, regardless of login status. Also, for logged in users, they will also see a "Not you?" link to change the Facebook login account.eg. <div class="shopmessage-checkbox" allow_login="true"> 

Trigger Various ShopMessage Events

As a marketing automation platform, ShopMessage allows merchants to trigger various customer events which are associated with the current visitor. These events can be used to trigger flows or in audience segmentation.

Step 3: Trigger Facebook "Opt-in" Events:

You will need to tell ShopMessage the location of your "Add To Cart" button so that a Facebook "optin" event can be triggered when a customer adds something to their cart. You should call _shopmsg("confirmOptin") when a customer does an action that would warrant an "optin" event (e.g. clicking on your "Add To Cart" button).

An example of this implementation is included below, showing how to trigger an "optin" event when a customer clicks on your "Add To Cart" button. Notice that the second variable is the id  of the checkbox added in the previous step.

$(document).ready(function() {
  $('.add-to-cart').click(function() {
    _shopmsg("confirmOptin", "addToCartCheckbox");
  });
})

Step 4: Trigger "ViewProduct" Events

Track your customer browse behavior by triggering the "ViewProduct" event when they land on one of your product page. Firing this event will enable other messaging features such as recommendations or retargeting based on their previous activity on your site. Include as much information on the product the customer is currently viewing in the payload of this event, and make sure to fire this event as soon as the customer lands on one of your product pages.

And here is the example JS code to trigger the "ViewProduct" Event.

Note: The fields colorand style are not required. You can pass in any variables you want for the product. This is useful so that you can filter on these variables when sending messages later.

<script>
_shopmsg('trigger', 'ViewProduct', {
  "title" : "Blue T-shirt" ,
  "price" : 19.99,
  "product_id" : "product1234",
  "product_type" : "Tshirt",
  "color" : "blue",
  "style" : "T-shirt",
  "image" : "https://cdn.mystore.com.com/bluetshirt-15.png" ,
  "product_url" : "https://mystore.com.com/products/blue-tshirt",
  "tags" : ["blue", "tshirt", "summer"],
  "vendor" : "MyStore"
});
</script>

Step 5: Trigger "UpdateCart" Events

After the user is successfully opted-in to messages from your Facebook page via Step 3, ShopMessage can now send them Abandon Cart messages through Messenger. To queue up these messages, whenever a customer's updates their cart (either by adding or removing an item) send the "UpdateCart" event to the _shopmsg client object, making sure to pass in the appropriate information about the customer's current cart contents. Here is an example Facebook message we will construct and send to your customers:

And here is the example JS code to trigger "UpdateCart":

<script>
_shopmsg('trigger', 'UpdateCart', {
  "total_price" : 39.98,
  "cta_url" : "https://mystore.com/cart/link-with-preloaded-items",
  "items" : [
    {
      "title" : "Blue T-shirt" ,
      "price" : 19.99,
      "currency" : "USD",
      "product_id" : "product1234",
      "variant_id" : "variant5678",
      "sku" : "sku-id-123",
      "size" : "large",
      "color" : "blue",
      "style" : "T-shirt",
      "image" : "https://cdn.mystore.com.com/bluetshirt-15.png" ,
      "product_url" : "https://mystore.com.com/products/blue-tshirt",
      "quantity" : 2,
      "tags" : ["blue", "tshirt", "summer"]
    }, .../* Add all of the items purchased */
  ]
});
</script>

Note that the SDK requires what is called a "cta_url", which is the link that your customer will be directed to when they click on "Checkout Now" from the Facebook message. For "Abandon Cart" sequences, this is simply a link to your checkout page with the customer's contents pre-populated. When a customer clicks on "Checkout Now" from the Facebook message, ShopMessage will send them back to your checkout page with their cart items already added in order to reduce the friction required for them to convert.

Shopify, as an example, achieves this by including the cart items and quantities as query parameters (e.g. https://mystore.myshopify.com/cart?2152352:2,3326233:3). WooCommerce and Magento also have documented means to create these cart permalinks. We can discuss options during the onboarding call.

Triggering the "UpdateCart" event can be achieved in many different ways. In most cases, you can retrieve the customer's cart contents using an AJAX call to a server-side endpoint. These contents can then be parsed and passed into the _shopmsg("trigger", "UpdateCart", {...}) function shown above to queue up the Abandon Cart messages. Every time this function is triggered, the current messages queued up are updated with the customer's current cart contents, ensuring your customer's will only get subscribed to ONE sequence of messages in a given session (30min, 24hr, and 48hr messages).

Step 6: Trigger "PurchaseComplete" Events:

Similar to the "UpdateCart" events in Step 5, you will also need to trigger a "PurchaseComplete" event via the ShopMessage client SDK.

The PurchaseComplete event can be used in various ways:

  1. ShopMessage can track revenue recovered
  2. Abandoned cart messages queued  will not be sent to customers who completed a purchase.
  3. Send the customer an order confirmation message (receipt) and post-purchase flow. 

Make sure to trigger the code below immediately after a customer completes their order. In many cases, this is as simple as triggering the following javascript code on your "Order Confirmation" page:

<script>
_shopmsg('trigger', 'PurchaseComplete', {
  "order_id": 606698172598,
  "checkout_token": "5f30ff93ae9bcf6216f01bec40966e60",
  "created_at": "2017-08-06 08:49:03.593662+00",
  "order_status_url": "https://bklyn-demo.myshopify.com/690933842/orders/b1946ac92492d2347c6235b4d2611184/authenticate?key=c3c5a100d11ad66e72e5d1a88cef4ba2",
  "currency": "USD",
  "shipping_address": {
    "address1": "315 West 33rd Street",
    "address2": "Unit 9A",
    "first_name": "Jane",
    "last_name": "Doe",
    "full_name": "Jane Doe",
    "city": "New York",
    "state": "NY",
    "zip": "10001",
    "phone": "212-555-1234"
  },
  "items": [
    {
      "variant_id": 32659788101,
      "product_id": 8257347973,
      "title": "Red Boots",
      "image": "https://cdn.shopify.com/s/files/1/2123/3399/products/[email protected]?v=1498247953",
      "price": 20000,
      "quantity": 1,
      "product_url": "https://bklyn-demo.myshopify.com/products/redwing-iron-ranger"
    },
    {
      "variant_id": 13327944646707,
      "product_id": 1479629733939,
      "title": "Olive Green Jacket",
      "image": "https://cdn.shopify.com/s/files/1/2123/3399/products/urban-fashion_925x_1cb49b3f-4556-4991-9858-6e6bfa302516_720x.jpg?v=1539918590",
      "price": 6500,
      "quantity": 1,
      "product_url": "https://bklyn-demo.myshopify.com/products/olive-green-jacket"
    },
    {
      "variant_id": 32659609797,
      "product_id": 8257325317,
      "title": "Blue Shirt",
      "image": "https://cdn.shopify.com/s/files/1/2123/3399/products/chambray_5f232530-4331-492a-872c-81c225d6bafd_720x.jpg?v=1498247863",
      "price": 9800,
      "quantity": 1,
      "product_url": "https://bklyn-demo.myshopify.com/products/ayers-chambray"
    }
  ],
  "total_price": 399.57,
  "subtotal_price": 363,
  "total_tax": 32.57,
  "shipping_price": 4,
  "customer_properties": {
    "email": "[email protected]",
    "customer_id": 713831874946,
    "first_name": "Jane",
    "last_name": "Doe"
  },
  "platform": "shopify"
}
});
</script>

Set User Properties

In addition to triggering user Events, you can also set user Properties, which can be used to segment your audience later. Here is an example:

<script>
_shopmsg('visitor.set', {
  email: '[email protected]',
  first_name: 'Jane',
  last_name: 'Doe',
  gender: 'female',
  language: 'en',
  address1: '315 West 33rd Street',
  address2: 'Unit 9A',
  city: 'New York',
  state: 'NY',
  zip: 10001,
  country: 'USA',
  customer_id: '1234',
  locale: 'us',
  phone: '(212)-555-1234',
  profile_pic: 'https://i.imgur.com/s59tLMj.png'
});
</script>

Once you've completed these steps, let's verify your integration

Have Questions? Contact Us!

Shoot us a message at [email protected] if you have any questions on the above integration! We can give you your store's custom loader script and get you integrated immediately.

We are very excited to get ShopMessage recovering revenue for your site as soon as possible!

Did this answer your question?