Abandoned Cart Notifications

• Documentation
• /
• Abandoned Cart Recovery Setup Guide

Shopping cart abandonment is quite common - a potential customer adds products to their virtual cart and goes away from the store without making a purchase. According to global statistics, more than 69% of online shopping carts are abandoned before a sale. If someone has left a filled cart behind, it doesn't necessarily mean that they have lost interest in the product or have purchased it elsewhere. Instead, they may just be looking for that little nudge in your direction and this is where PushAlert can help.

Earlier this year, we had introduced personalized automated Abandoned Cart recovery notifications for Shopify, Magento, WooCommerce and Prestashop. We are extending it to any custom store back-end or platform. With our new REST and JS API endpoints, any store will be able to send automated notifications when a cart is abandoned. Moreover, you will be able to personalize the notifications with the names of your customers and the items they have in their carts.

Based on input from our eCommerce partners, they have seen their store orders increase by at least 2% with automated abandoned cart notifications to as much as 10% within a month. One of our newest partners were able to recover more than $1300 in sales in just 7 days of using our marketing automation. Here's how you can boost your sales with personalized abandoned cart push notifications:

Setting up automated Abandoned Cart Recovery Notifications

This guide is for custom eCommerce platforms that want to setup abandoned cart notifications. For Shopify, Magento, WooCommerce and Prestashop, please use our dedicated plugin.

There are three steps to setting up abandoned cart notifications:

1. Enabling Abandoned Cart push notification automation on your account by reaching out to support@pushalert.co or starting a chat from your dashboard. It is available for all paid plans.
2. Configuring the automated notification from the PushAlert Dashboard.
3. Adding the necessary code in your store front or back-end using our REST or JS APIs. You need to implement only one these APIs. We recommend using the JS API in most cases.

Step 1: Enabling Automated Abandoned Cart Notifications On Your Account

You can send a mail to support@pushalert.co with the subject line stating that you want to enable abandoned cart notifications on your account or talk to one of our support representatives on chat to enable it on your account. Chat will be the fastest way to activate abandoned cart push notifications on your account.

Step 2: Configuring automated Abandoned Cart Notifications

Abandoned cart notifications can be personalized with the first name of the customer and total items in their cart. Try not to sound too robotic or generic with the notification. You can check out the 5 top abandoned cart notification templates here. Now, let us start with the configuration:

• Add the Title and Message that you want to send to the customer who abandoned their cart. You can see the preview of the notification on the right.
• Use {{first_name}} parameter in your message or title text where you want it to be substituted with the first name of the customer. Similarly, use {{total_items}} where you want the total number of items to be displayed in the final notification, you can also add the product name with {{product_name}}, and product image with {{image}}. You can also send your custom cart {{cart_url}} and checkout URLs {{checkout_url}} as well customized based on where the customer left the checkout process. You can use all, one or none of them, these parameters are optional.
• You also have to set the delay after which the notification is supposed to go out.
• Next, add the cart URL where you want the customer to land once they click on the notification.
• You can add another CTA with the Checkout Now button, using the same URL as above or a different URL if you have a faster checkout option.
• The icon sent with the notification is your store icon/logo which you can also see in the Preview. It can be changed from Settings > Website.
• Once done, click on Save.

Step 3: Setting up the Store front-end or back-end to enable automated Abandoned Cart Push Notifications

There are three cart events we need to consider when a customer comes to your eCommerce store. Each one of them needs to be handled, you can use either our JS API in the front-end of the store or the REST API in the back-end of the store. Implementation of both will be discussed in detail here.

Three Cart events that need to be handled for automated abandoned cart recovery:

1. Add to Cart - When the cart is created for the first time.
2. Update Cart - Whenever a new product is added to a cart, a product is removed or the number of units of a product is changed.
3. Clear Cart or Order Completion - Whenever the cart is cleared or the order is completed, we need to delete the scheduled abandoned cart notification.

If you want to send a custom notification on order completion or any other event, have a look at Custom Events based Triggered Notifications.

Add to Cart and Update Cart Events

Both the events are handled by the same code. Whenever a new cart is created or an existing cart is updated you will be calling our API endpoints to update the Abandoned Cart Notification for the subscriber. There are two ways to handle this event, the JS API on the front-end which would be executed on your Add to Cart button or through the REST API at the back-end.

You don't need to implement both the JS and REST API. You can use either one of them based on whether you are implementing it on the front-end of your store or on the back-end.

■ Using JS API (JavaScript)

<script>
    (pushalertbyiw = window.pushalertbyiw || []).push(['abandonedCart', 'add-to-cart',{'product_name':'Green T-Shirt','image':'https://mywebsite.com/green-shirt.jpg','first_name':'Alex','total_items':1,'cart_url':'https://mywebsite.com/cart/','checkout_url':'https://mywebsite.com/checkout/'}]);
</script>

<script>
    (pushalertbyiw = window.pushalertbyiw || []).push(['abandonedCart', 'add-to-cart']);
</script>

■ Using REST API

curl -H "Authorization: api_key=<insert api key here>" --data "subscriber=SUBSCRIBER_ID&extra_info={'product_name':'Green T-Shirt','image':'https://mywebsite.com/green-shirt.jpg','first_name':'Jonathan','total_items':3}" https://api.pushalert.co/rest/v1/abandonedCart

<?php
	
        $subscriber = "SUBSCRIBER_ID";
        $extra_info = array(
                            'product_name'=>'Green T-Shirt',
                            'image':'https://mywebsite.com/green-shirt.jpg',
                            'first_name':'Alex',
                            'total_items':1,
                            'cart_url':'https://mywebsite.com/cart/',
                            'checkout_url':'https://mywebsite.com/checkout/'
                      );

        $apiKey = "YOUR_API_KEY";

        $curlUrl = "https://api.pushalert.co/rest/v1/abandonedCart";

        //POST variables
        $post_vars = array(
            "subscriber" => $subscriber,
            "extra_info" => json_encode($extra_info),
        );

        $headers = Array();
        $headers[] = "Authorization: api_key=".$apiKey;

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $curlUrl);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post_vars));
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

        $result = curl_exec($ch);

        $output = json_decode($result, true);
        if($output["success"]) {
                echo "success";
        }
        else {
                //Others like bad request
        }
?>

{
	"result": "success"
}

Clear Cart or Order Completion Events

In both cases we need to clear the previously set abandoned cart notification. Therefore, this code needs to go on the order completion page or when the customer clears the cart.

■ Using JS API (JavaScript)

<script>
    (pushalertbyiw = window.pushalertbyiw || []).push(['abandonedCart', 'completed']);
</script>

Just to re-iterate, either the JS API or the REST API should be used, both are NOT REQUIRED.

■ Using REST API

curl -H "Authorization: api_key=<insert api key here>" --data "subscriber=SUBSCRIBER_ID" https://api.pushalert.co/rest/v1/abandonedCart/delete

<?php
	
        $subscriber = "SUBSCRIBER_ID";

        $apiKey = "YOUR_API_KEY";

        $curlUrl = "https://api.pushalert.co/rest/v1/abandonedCart/delete";

        //POST variables
        $post_vars = array(
            "subscriber" => $subscriber
        );

        $headers = Array();
        $headers[] = "Authorization: api_key=".$apiKey;

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $curlUrl);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post_vars));
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

        $result = curl_exec($ch);

        $output = json_decode($result, true);
        if($output["success"]) {
                echo "success";
        }
        else {
                //Others like bad request
        }
?>

{
	"result": "success"
}