Build an Exit Intent Lightbox on the Cart Page

Recent updates to Safari Intelligent Tracking Prevention (ITP) block third-party cookies on your site. This update means that Preview Mode and the Monetate Inspector browser plug-in may not work in Safari. Monetate has developed an alternative approach to delivering preview mode to the site. To have this option enabled for your account, submit a request using the Kibo Technical Support portal at kibotechsupport.zendesk.com.

There is no workaround at this time for Monetate Inspector, and Monetate recommends using a different browser such as Chrome if you need to use the browser plug-in.

Using either the Exit Intent Image Lightbox action or the Exit Intent HTML Lightbox action on your site's cart page can help you increase overall conversion rate. Ultimately, if you minimize the number of people who leave your site on the cart page, then you're more likely to get them to convert (or complete their purchase) of the items already in the cart.

For the purpose of this example, the experience targets new visitors with a promotional code, but your target may change based on what message you present in the lightbox you build.

Building the Exit Intent Lightbox Action

Follow these steps to build the action.

  1. Click COMPONENTS and then select Actions.

    Callout of the Actions option in the COMPONENTS menu

  2. Click CREATE ACTION.

    Callout of the CREATE ACTION button

  3. After Action Builder loads on your site, navigate to its cart page. In Action Builder click the Lightboxes tab and then click Exit Intent Image Lightbox.

    View of the Lightboxes tab of Action Builder

  4. Click UPLOAD.

    Callout of the UPLOAD button

  5. Drag and drop an image file, or click CLICK HERE to navigate to a location on your computer or connected storage device and then select an image file that you want to use.

    View of the panel in Action Builder with the drag-and-drop field and the CLICK HERE button to upload an image file

  6. On the Details tab, input into Lightbox ID a unique ID to differentiate the lightbox you're creating from other lightboxes. Select an option from Display Frequency to determine if a site visitor sees the lightbox more than once. For this use case, Display Frequency is set to Once per session.

    If you want to restrict or limit when the lightbox fires, you can configure the Ignore mouse exiting on left and Ignore mouse exiting on right settings to disregard specific parts of the viewport. Doing so is useful if you want the lightbox to fire only if a site visitor moves out of the viewport at a specific place, such as near a close or exit button, instead of when they navigate to another window that may be adjacent to it. These settings are optional.

    View of the Details tab in Action Builder, with a Lightbox ID set, the Display Frequency set to 'Once per session,' and both the 'Open lightbox on mouseout' and 'Click Overlay to Close?' set to 'Yes'

  7. Add the click zone for the button on the lightbox that returns customers to the cart page when they click it. Click the Creatives tab, and then click EDIT to launch Content Builder.

    Callout of the EDIT button on the Creatives tab of Action Builder

  8. Click Add Layer and then click Clickzone. For this use case, position and resize the click zone over the "Complete My Order" text.

    Callout of the Clickzone option in the Add Layer menu of Content Builder

  9. In the Link section of the properties panel, input #close into URL so that the lightbox closes and returns the visitor to the cart page when they click the image's click zone.

    View of Content Builder showing the Link section of the properties panel and a click zone placed over 'Complete My Order' text on the image

  10. Click SAVE and then click CLOSE AND RETURN.

    Callout of the SAVE button and the CLOSE AND RETURN button in Content Builder

  11. Define where on your site you want this action to fire. Because this action is for the cart page, use the Monetate Inspector browser plugin to verify that cart is the page type for the site's cart page.

    Callout of the cart type in the Page Type row of Monetate Inspector

  12. Click the Conditions tab in Action Builder to create the action condition. Click ADD CONDITION, expand Page type, and then select Page type=. Type cart as the value.

    View of the Conditions tab in Action Builder, with the 'Page type' category expanded and the 'Page type equals' option highlighted

  13. The action shouldn't fire when the cart is empty, so you must create a second action condition. Click ADD CONDITION, expand Page value, and then select Cart Value ≥. Type 0.01 as the value.

    View of the Conditions tab in Action Builder, with the 'Page type equals cart' condition and the 'Cart value greater than or equal to one cent' condition joined with AND logic

  14. Click the Inputs tab to define which action fields and settings can be configured at the experience level. If you create an action that has a very specific use case that you don't want someone on your team to alter, then click to deselect those fields and settings that you want locked. Click the forward arrow.
  15. Give the action a title, description, and subcategory. Click CREATE & EXIT.

    View of the final panel of Action Builder, with the Action Title, Description, and Subcategory fields empty and 'LIGHTBOXES' selected for the Category setting

Refer to Exit Intent Image Lightbox Action or to Exit Intent HTML Lightbox Action for more information about creating an exit intent action in Action Builder.

Building the Experience

Follow these steps to configure the experience that uses the action that you built.

  1. Click EXPERIENCES in the top navigation bar, and then select Web.

    Callout of the Web option in the EXPERIENCES menu of the top navigation bar

  2. Click CREATE EXPERIENCE.

    Callout of the CREATE EXPERIENCE button

  3. Give the experience a descriptive title. Click the pencil icon, enter the title, and then click the green checkmark.

    Example of the experience title field and the green checkmark icon

  4. For this use case, the experience should test if the lightbox has a positive impact on the lift for the conversion rate. Click WHY, select To test multiple metrics with random traffic allocation, and then click NEXT.

    Callout of the WHY settings, the STANDARD TEST option and the NEXT button

  5. Select Conversion Rate for the goal metric and then click NEXT.

    Callout of the Conversion rate option and the NEXT button

  6. Adjust the secondary metrics as needed. As a best practice, collecting more data is better than collecting less data. Avoid removing secondary metrics unless there's a specific reason you don't need them. Add any custom metrics that are important to your business as well. Click NEXT.

    Callout of the NEXT button for the secondary metrics section

  7. Confirm that you have configured the WHY settings as you need, and then click SAVE.

    Callout of the SAVE button

  8. For this use case, the experience targets new site visitors. Click WHO and then click ADD TARGET.

    Callout of the WHO settings and the ADD TARGET button

  9. Click Landing.

    Callout of the Landing option on the Target Type panel

  10. Click New visitors.

    Callout of the New visitors option

  11. To add the Exit Intent Image Lightbox action built for this experience, click A for the WHAT settings and then click ADD ACTION.

    Callout of Variant A of the WHAT settings and the ADD ACTION button

  12. Click Lightboxes.

    Callout of the Lightboxes option on the Action Type panel

  13. Click the Exit Intent Image Lightbox action that you created.

    View of the Lightboxes action templates

  14. If you configured all the action settings in Action Builder specifically for the experience, then you don't need to make any experience-level changes or add any additional action conditions. Scroll to the bottom and then click CREATE.

    Callout of the CREATE button

  15. For this use case, the experience should have an even traffic allocation, so you don't need to adjust the traffic allocation. However, consider shifting additional traffic to the experiment variant (variant A) if it begins to perform significantly better than the control variant (no change on site).

    Callout of the Traffic Allocation selector

Testing the Experience

Before scheduling when the experience runs by configuring the WHEN settings, you should perform a quality assurance check to ensure the action works as expected. Certain action conditions don't work as expected in Preview Mode, including the Cart value options. Therefore, you can't use the experience preview and instead must use the IP address target option and then temporarily activate the experience to test it.

  1. Click WHO, place your mouse pointer on the New visitors target entry, and then click the delete icon that appears for the existing target.

    Callout of the WHO settings and the delete icon

  2. Click ADD TARGET and then click Location.

    Callout of the Location option on the Target Type panel

  3. Click IP address.

    Callout of the IP address option

  4. Input your IP address into the IP Address field. To verify your IP address, you can input What is my IP address? into Google search to obtain it.

    The IP address must be in the IPv4 format (x.x.x.x) and cannot include wildcards.

  5. Leave visitors matching this target set to INCLUDE. Finally, click SAVE.

    Callout of the IP Address field and the SAVE button

  6. Click ACTIVATE.

    Callout of the ACTIVATE button

  7. Open a private browser window and then navigate to your site. Add one or more products to your cart.

    Callout of the Add to Cart button

  8. Navigate to the cart page and then navigate out of the viewport. If you configured the lightbox action and the experience correctly, then the lightbox should appear on the screen.

    A lightbox with a discount offer code appears atop the cart page of an online retail site

After you confirm that the action and experience fired as expected, return to the Experience Editor page in the Monetate platform, and then click PAUSE for the experience. Remove from the WHO settings the IP address target and restore the New visitors target. Configure the WHEN settings and then activate the experience.

Exit Intent Lightbox Action Advanced Features

With a bit more planning and understanding of your site's code, you can refine the customer experience and iterate on your original action to test additional customer experience features.

The Exit Intent Image Lightbox action built for this use case doesn't allow the visitor to click the click zone and go directly to your site's checkout flow. To accomplish this type of interactivity, you must add some basic JavaScript to the action.

Start by creating the lightbox using the Exit Intent HTML Lightbox option in Action Builder so that you can add buttons, interactive components, and the JavaScript required to control those components.

  1. Click COMPONENTS and then select Actions.

    Callout of the Actions option in the COMPONENTS menu

  2. Click CREATE ACTION.

    Callout of the CREATE ACTION button

  3. After Action Builder loads on your site, navigate to its cart page on your site. In Action Builder click the Lightboxes tab and then click Exit Intent HTML Lightbox.

    View of the Lightboxes tab of Action Builder

  4. Configure the height and width of the lightbox container, and then input into Lightbox ID a unique ID to differentiate the lightbox you're creating from other lightboxes. For this use case, Display Frequency should be Once per session. Finally, toggle Open lightbox on mouseout to YES.

    View of the Details tab in Action Builder, with the Lightbox Width, Lightbox Height, Lightbox ID fields, the Display Frequency selector set to 'Once per session,' and the 'Open lightbox on mouseout' toggle set to 'YES'

Ignore Mouse Exiting Settings

If you want to restrict or limit when the lightbox fires, you can configure the Ignore mouse exiting... settings to disregard specific parts of the viewport. Doing so is useful if you want the lightbox to fire only if a site visitor moves out of the viewport at a specific place, such as near a close or exit button, instead of when they navigate to another window that may be adjacent to it. These settings are optional.

View of the Details tab in Action Builder, with the 'Ignore mouse exiting on left' toggle, 'Ignore mouse exiting on right' toggle, 'Ignore mouse exiting on top' toggle, and 'Ignore mouse exiting on bottom' toggle all set to 'NO'

HTML Tab

On the HTML tab of Action Builder, you can add to the action some HTML content to replace the single image creative used in the Exit Intent Image Lightbox action. You can add the text callout and some button elements.

Click Source in the HTML editor to view the HTML source code.

Callout of the 'Source' option in the HTML editor on the HTML tab of Action Builder

Copy and paste this sample code into the HTML editor.

<section class="mt_lightbox">

<button class="monetate_lightbox_close" type="button">&times;</button>

<div class="mt_lightbox__copy">
<h3>You&#39;ve got great taste.</h3>

<p>Use promo code <span class="promoCode">FRESHAIR</span> in the next 24 hours for 20% off your order.</p>

<a class="btn btn--secondary" href="https://monetate-training.myshopify.com/">Continue Shopping</a>

<button class="btn" id="lightboxCheckout" onclick="clickCheckout()">Complete My Order</button>

</div>
</section>

This code adds text content, two options the site visitor to interact with, and a generic close button. The checkout button uses an onclick attribute that triggers a function when this element detects a click event, which you configure in the JavaScript editor. The other buttons close the lightbox, or redirect the visitor to your site's main page to continue shopping. All these elements need some styling on the Styles tab of Action Builder to ensure they match the theme of your site for a seamless customer experience.

There's no option to upload an image file, so you must use CSS to set a background image for the lightbox. You can upload an image under to Content Manager in the Monetate platform and then copy the path to the image.

Some of the HTML elements are interactive, so you must configure them. The close button uses a default class that's supported by all Monetate lightboxes: monetate_lightbox_close.

Styles Tab

Add CSS to the action on the Styles tab of Action Builder.

View of the Styles tab in Action Builder, with CSS placed in the code editor

Background Image Sample CSS

#monetate_lightbox_content_container {
  max-width: 100%;
  background-image: url('//sb.monetate.net/img/1/1051/1924903.jpg');
  background-repeat: no-repeat;
  background-size: contain;
    position: relative;
    text-align: center;
}

This code specifies the location of the background image and configures its dimensions and other styles on the parent container.

Next, add CSS code to adjust the layout of individual components in the lightbox HTML content, such as the text and buttons, to match the overall theme of the site.

Components Sample CSS

#mt-ltbx-content {
  width: 100% !important;
  height: 100% !important;
}

.mt_lightbox {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.mt_lightbox__copy {
  display: block;
  text-align: center;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
}

.mt_lightbox__copy h3,
.mt_lightbox__copy p {
  margin-bottom: 10px;
}

.mt_lightbox .promoCode {
  font-weight: 700;
}

.monetate_lightbox_close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  font-size: 32px;
  line-height: 28px;
  text-align: center;
  background: none;
  border: none;
  color: #000;
  transition: all 0.3s ease;
}
.monetate_lightbox_close:hover,
.monetate_lightbox_close:active,
.monetate_lightbox_close:focus {
  background: #c04f1d;
  color: #fff;
}

These styles control the layout of the buttons, links, and text content added by the HTML.

JavaScript

Finally, you must write the JavaScript function that's activated by the corresponding onclick attribute added by the HTML code.

Click the Details tab, and then scroll down to the JavaScript editor.

Callout of the JavaScript editor on the Details tab

The function uses JavaScript to find an element selector, which in this use case is the form submit button. After it locates the selector, it triggers a click event on that selector that submits the cart page form.

Sample JavaScript Code

function clickCheckout() {
  document.querySelector('form.cart button.btn[name=checkout]').click();
}