How it works for you Pushwoosh Docs Blog Support

Integrate the SDK

Integrate the Pushwoosh SDK to complete the configuration process‌

Once you authorized and gave all the necessary permissions to Pushwoosh, implement the Abandoned Cart Recovery into your site:

Integrate Pushwoosh SDK

  1. Include the Pushwoosh SDK from our CDN:

Make sure to locate the following code to the <head> element of your HTML. 

<script type="text/javascript" src="https://cdn.pushwoosh.com/facebooksdk/pw-PWSDK.js"></script>

2. Initialize the SDK by integrating the code snippet from the setup wizard into your site.

Locate the PWSDK variable to the <head> element of your HTML.

<script type="text/javascript">
var PWSDK = PWSDK || [];
PWSDK.push({
  cmd: 'init', // required
  applicationCode: 'XXXXX-XXXXX', // required (string), your app code
  ASCPageId: 'XXXXXXXXXXXXXXX', //required (string | number)

  // customization params
  userId: null, // optional (string | number)
  language: 'es_US', // optional (string) - https://developers.facebook.com/docs/internationalization/
  ASCSize: 'large', // optional ('small' | 'medium' | 'large' | 'standard' | 'xlarge')
  ASCSkin: 'light', // optional ('light' | 'dark')
  ASCAlignCenter: false, // optional (boolean)
  ASCAllowLogin: true, // optional (boolean)
  ASCContainerClass: 'pwasc-container' // optional (string)
});
</script>

The code snippet initializes the Pushwoosh Facebook SDK for your website. Pushwoosh SDK is enabled to register users, trigger events, and send automated messages on behalf of the Facebook page you give access to.

Add Facebook Checkbox plugin

To let Pushwoosh know about users who agreed to receive updates via Facebook Messenger, use the Facebook Checkbox plugin. To render the Facebook Checkbox, add an empty div with class 'pwasc-container' to your site:

Example
<div class='pwasc-container'></div>

When a user checks the Facebook Checkbox, the Opt-in event is triggered (provided that the cartUpdated or purchaseCompleted follows the checkbox checking).

Best practice

Place the Facebook Checkbox above the Add to Cart button to provide a clear understanding of the checkbox purpose. This best practice is recommended by Facebook.

Customize the checkbox appearance using the following parameters:

  • ASCSize: large (default), small, medium, standard, xlarge.

  • ASCSkin: light (default), dark. Dark skin is preferable for dark-backgrounded sites.

  • ASCAlignCenter: false (default), true. By default, the components of the checkbox are left-aligned.

  • ASCAllowLogin: false (default), true. By default, the checkbox is visible only for users who have logged into Facebook already. When set to ’true', the checkbox is rendered for all users including those not logged in. Logged in users will also see a "Not you?" option.

Customizing checkbox is available via init params.

Trigger Events

To track user actions and send messages based on users' behavior, trigger the following events:

Opt-in

Opt-in event is triggered when a user agrees to receive messages on Messenger. Facebook requires clear affirmative action to be performed by a user to allow receiving messages. For that reason, users are considered opted-in when they check the Facebook Checkbox and confirm their consent by adding products to their cart or making a purchase. The Opt-in event is triggered when cartUpdated or purchaseCompleted event takes place after a user checks the Facebook Checkbox.

cartUpdated

Trigger this event whenever a customer updates their cart (either by adding or removing products). The cartUpdated event contains the following data: a) the total cost of all products in the cart, b) details of each product in the cart:

Example
PWSDK.push({
    cmd: 'cartUpdated',
    totalPrice: float, // Total cart cost (may include delivery or any other additional payments) 
    cartUrl: "string", // link to the checkout page 
    products: [
        {
            title: "Textured Coat", // Product name
            price: 24.99, // Product price
            image: "https://pushon.pushwoosh.com/images/img_outwear_01.jpg", // Product image URL
            desc: "Coat in a textured weave with front pockets, 3/4-length sleeves with sewn-in turn-ups, a vent at the back and no buttons. Unlined",  // optional. Product description
            count: 1, // Products count 
            url: "https://pushon.pushwoosh.com/products/outwear/textured_coat" // optional. URL of the product’s page in your store
        },
        {
            title: "Skinny Low Ankle Jeans", // Product name
            price: 39.99, // Product price
            image: "https://pushon.pushwoosh.com/images/img_jeans_01.jpg", // Product image URL
            desc: "5-pocket, low-rise ankle-length jeans in washed superstretch denim with skinny legs with a zip at the hems.",  // optional. Product description
            count: 1, // Products count 
            url: "https://pushon.pushwoosh.com/products/jeans/skinny_low_ankle_jeans" // optional. URL of the product’s page in your store
        }
    ]
});

Pushwoosh starts the Abandoned Cart Recovery messages flow on the cartUpdated event (after the specified delay time expires).

cartCleared

Trigger this event whenever a customer removes all products from their cart. Once a cartCleared event is received by Pushwoosh SDK, Pushwoosh stops sending Abandoned Cart reminders to the user. 

PWSDK.push({
    cmd: 'cartCleared'
});

purchaseCompleted

Trigger this event whenever a customer successfully completes their purchase. The purchaseCompleted event contains the number of purchased products as well as the total cost of a purchase. Pushwoosh stops sending Abandoned Cart Recovery messages to users who complete their purchases.

Example
PWSDK.push({
    cmd: 'purchaseCompleted',
    totalPrice: float, // Total cart cost (may include delivery or any other additional payments)
    products: [
        {
            title: "string", // Product name 
            price: float, // Product price
            image: "string", // Product image URL
            desc: "string",  // optional. Product description
            count: integer, // Products count 
            url: "string" // optional. URL of the product’s page in your store
        },
        ...
    ]
});

Pushwoosh tracks and stores all the events data. The corresponding metrics are presented in the Reports section of your Abandoned Cart Recovery service.

Once everything's set up, go back to Abandoned Cart Recovery dashboard to create your reminders flow.

PreviousConfigure Abandoned Cart RecoveryNextFacebook Policies

Last updated