State
With State you'll be able to pass params to the user. State looks like this:
<div class="fb-messengeraccountconfirmation" messenger_app_id="123" state="{'key': '11', 'data': {'order': '315', 'email': '[email protected]'}}"></div>
state contains 'data'. With data you'll be able to pass any params that will be created as a property on a new customer. If you use params 'email' it will set actual email of the user to that email address.
Setup
All web plugins require our Javascript SDK. The SDK will dynamically render our plugins in your HTML.
Load the SDK in your page accordingly:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<your_app_id>',
xfbml : true,
version : 'v2.1'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Upsell Plugin
<div class="fb-messengerpreconfirmation" messenger_app_id="<your_app_id>"></div>
The upsell plugin should be in a location that allows the buyer to choose whether they would like to receive Messages for their order receipt and shipping notifications -- typically this is your checkout page.
If the buyer has an active token, the Upsell Plugin will NOT be rendered.
Confirmation Plugin
The confirmation plugin should be displayed on your 'Thank You' page, the page the you display after the buyer has successfully completed their transaction. If the buyer has a commerce token (fb_id), the Confirmation Plugin will NOT be rendered, however, the POST to your callback will always be triggered.
You MUST also pass a state parameter when calling this plugin. This state should be unique and will get saved on your Sonar customer as properties. We will pass back the Customer with their state information as params in a webhook.
If we don't have the Customer already in Sonar, we will create it and use the state information as properties.
<div class="fb-messengeraccountconfirmation" messenger_app_id="<your_app_id>" state="<state_value>"></div>
If the buyer has an active token, the Confirmation Plugin will NOT be rendered.
Settings Plugin
The settings plugin should be displayed in the "My Account" or "Settings" page for a logged in user of your site. You MUST pass the commerce token (fb_id) for that logged in user in order to render this plugin.
<div class="fb-messengertoggle" messenger_app_id="<your_app_id>" token="<commerce_user_token>"></div>
A user wishing to cancel the service changes their preferences by clicking "Turn Off". When this is clicked, the plugin re-renders to a confirmation that the user has opted out, and Sonar will send you an unlink (type) retail webhook callback.
Note that when a user opts out of the service, their commerce token (fb_id) becomes obsolete. Should they opt back into the service in the future, they will be assigned a new commerce token (fb_id).
Standalone Auth Plugin
Use the Standalone Auth Plugin to give people another way to opt into Messenger communication. When a customer clicks on this plugin, a commerce token (fb_id) is sent to token callback. A few examples of where you might place this would be:
- In the account creation flow
- On the order status page
- On a landing page from a promotional email
- On the account settings page (i.e., opposite the Settings Plugin that opts a customer out; note that only one of these will render based on opt-in status)
<div class="fb-messengerbusinesslink" messenger_app_id="<your_app_id>" state="<state_value>"></div>
If the buyer has an active commerce token (fb_id), the Standalone Auth Plugin will NOT be rendered.
After a customer clicks on this plugin to opt into the Messenger experience, the plugin re-renders into a confirmation message. Note that the plugin has a smaller height when it is re-rendered.
