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)

You need to attach the following code to your 'Add to Cart' button or background script which handles adding or updating products in the cart. This code must be executed each time a new product is added to a cart, something is removed from the cart or the quantity of products is changed.

As mentioned earlier, you can personalize notifications with four parameters - product_name, image, first_name and total_items. Where 'product_name' is the name of the product, 'image' is the product image served over HTTPS with a recommended size of 720x480 pixels (download the template here for reference), 'first_name' is the first or full name of the customer, while 'total_number' is the number of items in cart.

For e.g. {'product_name':'Green T-Shirt','image':'https://mywebsite.com/green-shirt.jpg','first_name':'Jonathan','total_items':3}

Schedule an abandoned cart notification or update an existing notification when the cart is changed.

Examples

With attributes:

<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>

Without attributes:

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

Using this endpoint you can schedule a notification when a cart is abandoned on your eCommerce store. This needs to be added to the background script which handles cart creation and order updates.

Resource Information

   
Method POST
URL https://api.pushalert.co/rest/v1/abandonedCart
Requires authentication? Yes
Parameter Type Description

Request Parameters

subscriber (string) Required The subscriber ID for the subscriber that triggered the event.
extra_info (JSON Encoded Key-value Pair) Optional There can be six parameters sent in extra_info - product_name, image, first_name, total_items, cart_url and checkout_url. You can choose to include some, all or none of them. These are optional.

Where 'product_name' is the name of the product, 'image' is the large image with recommended size of 720x480 pixels served over HTTPS, 'first_name' is the first or full name of the customer, 'total_number' is the number of items in cart, 'cart_url' is the URL where the customer would be directed on clicking the main notification body and 'checkout_url' is the URL associated with the Checkout Button (if added). Both the cart_url and checkout_url parameters will override the URLs added on the PushAlert Abandoned Cart automation settings.

For e.g. {'product_name':'Green T-Shirt','image':'https://mywebsite.com/green-shirt.jpg','first_name':'Jonathan','total_items':3}
This will be used to personalize the notification for your customer.

Example

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
        }
?>

Output

{
	"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)

Delete an abandoned cart notification on order completion or when all products are removed from cart.

Example

<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

Using this endpoint you can delete a previously scheduled abandoned cart notification when the order is completed or all products are removed from cart.

Resource Information

   
Method POST
URL https://api.pushalert.co/rest/v1/abandonedCart/delete
Requires authentication? Yes
Parameter Type Description

Request Parameters

subscriber (string) Required The subscriber ID for the subscriber that triggered the order completed event.

Example

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
        }
?>

Output

{
	"result": "success"
}