You can start building your Messenger list and sending welcome messages in less than 10 minutes by inserting the appropriate Javascript onto your site (see Step 1).
To get the most value out of ShopMessage, we recommend fully integrating ShopMessage (Step 2-5). This involves firing various user events and data, like ViewProduct, UpdateCart, and PurchaseComplete. ShopMessage uses these events to send automated, personalized messages to your shoppers at the right time.
Account Setup
Start: Get a ShopMessage Account
Set up an account for your store. Your account will let you:
Connect your Facebook page so you can send messages via Messenger
Start building your Messenger list using ShopMessage Growth Tools
Customize your flows 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 learn more here: http://help.shopmessage.me/integrate-with-your-site/how-to-verify-your-shopmessage-integration-is-complete
Step 1: Add the ShopMessage Library to your Site:
Copy your code and insert it just before the closing </head> tag of your page. Ensure this snippet is included on every page of your site.
You can find your code snippet under the “settings” section of your ShopMessage account (you can also find it in the setup wizard when you first install ShopMessage).
Once the code snippet is live on your site you can set up ShopMessage Growth Tools to start building your Messenger List and sending Welcome messages.
Complete the following steps 2-5 to track specific events so you can send more relevant messages at the right times (such as browse abandon, cart abandon, and purchase complete messages). 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 build audience segments.
Step 2: Trigger "ViewProduct" Events
Track your customer browse behavior by triggering the "ViewProduct" event when they land on one of your product pages. 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 color and 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", // required
"price" : 19.99, // required
"product_id" : "product1234", // required
"product_type" : "Tshirt",
"color" : "blue",
"style" : "T-shirt",
"image" : "https://cdn.mystore.com.com/bluetshirt-15.png" , // required
"product_url" : "https://mystore.com.com/products/blue-tshirt", // required
"tags" : ["blue", "tshirt", "summer"],
"vendor" : "MyStore"
});
</script>
Step 3: 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" , // required
"price" : 19.99, // required
"currency" : "USD", // required
"product_id" : "product1234", // required
"variant_id" : "variant5678",
"sku" : "sku-id-123",
"size" : "large",
"color" : "blue",
"style" : "T-shirt",
"image" : "https://cdn.mystore.com.com/bluetshirt-15.png" , // required
"product_url" : "https://mystore.com.com/products/blue-tshirt", // required
"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).
If your platform does not support a permanent link to your checkout, you can simply include the homepage URL here.
Step 4: 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:
ShopMessage can track revenue recovered
Abandoned cart messages queued will not be sent to customers who completed a purchase.
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, // required
"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>
Step 5: 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!