# How can we help?

## Overview

With an abandoned cart message, you can incentivize customers with a discount, free shipping, or a call-to-action that rekindles their interest. The abandoned cart email, although a lower volume campaign, can yield high engagement and a great conversion rate.

The abandoned cart message can be delivered automatically—and in a truly personalized fashion—to promote each of the unique items left in the cart. This can include images of products, links back to the cart or product pages, and descriptions of the products.

### How it works

A cart event trigger initiates an automated message that targets a customer who shopped on your website, added items to their cart, and then abandoned the shopping experience.

## Implement the trigger

In order for the abandoned cart message to send, there needs to be data sent to the system that will trigger the automation. For an abandoned cart message, we'll use the trigger of when a contact adds an item to their cart. If the item is ordered, we'll cancel the message based on an order event.

This strategy utilizes three primary pieces of data:

### Cart attribute

- **Purpose:** Used to personalize the body of the message with the actual items left in the cart.
- **Data type:** An object stored as contact attribute data. The object contains an array of objects, each describing the items in the cart.

### Cart event

- **Purpose:** This named event is used to trigger the actual message sending process. It's not necessary to pass any properties along with this event because the details of the cart will be written to the cart attribute above.
- **Data type:** Event data stored in the contact activities collection.

The actual name of the event is up to you, but we typically recommend `cart`.

### Order event

- **Purpose:** This event will be used to cancel the message sending process if a purchase occurs during the time between the cart event and the message send (per the custom delay).
- **Data type:** Event data stored in the contact activities collection.

The actual name of the event is up to you, but we typically recommend `order`.

## Sending methods

There are two ways to send this data to Cordial:

1. **[JavaScript Listener](https://support.cordial.com/hc/en-us/articles/228021788-Abandoned-cart-message#h_01H3YX3E0QSC03Y28A8J257EP6):** JavaScript code placed on your website that sends data to Cordial from the client-side browser.

- [Learn more about setting up the JavaScript Listener v2 code.](https://support.cordial.com/hc/en-us/articles/360016285852)

2. **[Rest API](https://support.cordial.com/hc/en-us/articles/228021788-Abandoned-cart-message#h_01H3YX3S0G4NXDV315VY4KKYW2):** A server-side alternative to JavaScript that sends data to Cordial via API.

- [Learn about updating contact records via API.](https://support.cordial.com/hc/en-us/articles/203885958-Contacts)

### JavaScript Listener method

This method assumes the user's browser has a cookie that holds the necessary contact identification data. There are two ways this cookie can be set.

This article assumes you have implemented the [JavaScript Listener v2](https://support.cordial.com/hc/en-us/articles/360016285852). We have also included examples applicable to [JavaScript Listener v1](https://support.cordial.com/hc/en-us/articles/212527987) in case you're not yet using v2.

1. A cookie will be set when a contact arrives on the site via a tracked link clicked from an email. In this case, a first-party cookie is automatically written with the necessary information to identify the contact.

2. The second way a cookie can be set is by calling a basic identification function in JavaScript. When a customer logs in to a site/store or provides their email address via form submission (e.g., newsletter sign-up form), a function can be called to pass the email address to Cordial. The `crdl(contact)` method can set the cookie and add or update a contact record.

- [JS listener v2](https://support.cordial.com/hc/en-us/articles/360016285852)
- [JS listener v1](https://support.cordial.com/hc/en-us/articles/228021788-Abandoned-cart-message#zp-1-1)

```
    crdl('contact', auth_data, contact_data);
    ```

In JS listener v1, the `cordial.identify` sets the cookie and the `cordial.contact` adds or updates the contact record.

```
    cordial.identify(emailaddress);
    cordial.contact();
    ```

- [Learn more about the crdl(contact) method here.](https://support.cordial.com/hc/en-us/articles/360016285852--Embedded-JavaScript-Listener-v2#contact)

#### When a cart is updated, run the following functions:

- [JS listener v2](https://support.cordial.com/hc/en-us/articles/228021788-Abandoned-cart-message#zp-2-0)
- [JS listener v1](https://support.cordial.com/hc/en-us/articles/228021788-Abandoned-cart-message#zp-2-1)

```
    crdl([\
    ['cart', 'clear'],\
    ['cartitem', 'action' , cart_data],\
    ['event', 'cart']\
    ]);
    ```

```
    cordial.event('cart');
    cordial.clearcart();
    cordial.cartitem('action',[array of cartitemObjects]);
    ```

There are two possible actions for the `crdl(cartitem)` method:

- **Add:** add a new cart item record or increment the quantity of an existing record.
- **Remove:** remove an existing cart item (supports a single object of cart items).

You can find [full details on working with a single or array of cart items here.](https://support.cordial.com/hc/en-us/articles/360016285852--Embedded-JavaScript-Listener-v2#cartitem)

Best practice for managing the cart state: Although we do support the ability to add or remove individual items to the cart object, most implementations simplify management of the cart state by calling `['cart', 'clear']` and then `['cartitem', 'add' , cart_data]` on each cart event, effectively clearing and repopulating the entire cart object. This assumes the front end has access to all the items in a given cart.

#### When an order is placed (checkout), run the following functions:

- [JS listener v2](https://support.cordial.com/hc/en-us/articles/228021788-Abandoned-cart-message#zp-3-0)
- [JS listener v1](https://support.cordial.com/hc/en-us/articles/228021788-Abandoned-cart-message#zp-3-1)

```
    crdl([\
    ['cart', 'clear'],\
    ['order', 'action' , order_data],\
    ['event', 'order']\
    ]);
    ```

```
    cordial.clearcart();
    cordial.order('action',orderObject);
    cordial.event('order');
    ```

- You can find [full details on the order object here.](https://support.cordial.com/hc/en-us/articles/360016285852--Embedded-JavaScript-Listener-v2#order)

The `['event', 'order']` call is optional and not required for cart abandonment. However, we highly recommend that order data is passed using either this method or the REST API to take advantage of segmentation by purchase behavior.

### REST API implementation (server-side alternative to JavaScript)

This method assumes the contact has been identified as part of the session.

The REST API implementation is an alternative method to the embedded JavaScript Listener. This is a server-side approach to sending the same data.

#### Methods to call when a cart is updated:

- [POST/v2/contacts/{primary_key}/cart](https://support.cordial.com/hc/en-us/articles/203885958#postContactsKeyCart): writes the cart items to the cart attribute.
- [POST/v2/contactactivities](https://support.cordial.com/hc/en-us/articles/203885968#postContactActivities): writes a named event "cart" to the contact activities collection.

#### Methods to call when a purchase occurs:

- [POST/v2/contactactivities](https://support.cordial.com/hc/en-us/articles/203885968#postContactActivities): writes a named event "order" to the contact activities collection.
- [POST/v2/orders](https://support.cordial.com/hc/en-us/articles/204570677#postOrders): writes the data for the order to the orders collection.

## Create message content

You can create a Sculpt Template and Blocks with dynamic content that will populate based on the abandoned item.

- [Learn more about the Sculpt Editor](https://support.cordial.com/hc/en-us/articles/360002634012)

## Create the automation

Once you have the appropriate data points (passed by either the JavaScript Listener or REST API) and the content of your message, you can set up the event-triggered automation.

1. Log in to Cordial and navigate to **Automations > Create New Automation**.

2. Provide the necessary information and click **Continue**.

3. If using Sculpt, select the desired Template under **Message Content**.

4. Under the **Sending Methods** panel on the left, click **Event Triggered**.

5. For **Trigger event**, choose **A contact's real-time behavior** and select **cart**.

The cart option will appear in this menu as soon as the first event has been passed to the account.

6. For delivery time, set the **Delay** to an interval that makes sense for your shopping experience.

7. For **Handling events triggered during delay**, there are a series of conditions you can set.

- First condition: **If** cart **Then** select **Restart delay time**. This ensures the full delay is respected if other cart events occur after the initial event.
- Add a second condition: **If** order **Then** select **Cancel sending**. This ensures that the cart abandonment email is not sent if the customer completes the order before the delay time ends.

8. For **How often can this message be sent to an individual** select **Custom interval** and set the frequency limit to an interval that makes sense for the shopping experience.

We recommend limiting these triggers to a once a week.

9. Click to **Save** the trigger setting.

10. Once you've saved the trigger and published the message content, you can click the **Enable** button. As soon as the message is enabled, the triggers are active and will send the message according to the rules applied.

## Code the message content

The following is a very simple example of the Smarty script for printing the cart items in the body of the message. Apply markup and styling according to your brand or style guide.

```
    You left the following items in your cart:<br>

{foreach $contact.cart.cartitems as $item}
    <b><a href="{$item.url}">{$item.name}</a></b><br>
    SKU: {$item.sku}<br/> Description: {$item.description}<br>
    Qty: {$item.qty}<br/> Price: {$item.amount}<br><br>
    <a href="{$item.url}"><img src="{$item.images.0}" /></a><br>
    {/foreach}
    ```

Once your draft is tested and ready to be published, publish the content, set the headers, and enable the trigger sending method. Your abandoned cart email will be enabled and active.

In the next article, you can [learn how to set up an order confirmation message](https://support.cordial.com/hc/en-us/articles/115005532688).