Build an Exit Intent Lightbox on the Cart Page

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.

   

2. Click CREATE ACTION.

   

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.

   

4. Click UPLOAD.

   

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.

   

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.

   

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.

   

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

   

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.

   

10. Click SAVE and then click CLOSE AND RETURN.

    

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.

    

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.

    

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.

    

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.

    

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.

   

2. Click CREATE EXPERIENCE.

   

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

   

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.

   

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

   

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.

   

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

   

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

   

9. Click Landing.

   

10. Click New visitors.

    

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

    

12. Click Lightboxes.

    

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

    

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.

    

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

    

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.

   

2. Click ADD TARGET and then click Location.

   

3. Click IP address.

   

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.

   

6. Click ACTIVATE.

   

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

   

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.

   

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.

   

2. Click CREATE ACTION.

   

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.

   

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.

   

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.

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.

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.

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.

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();
}