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 customer sees the lightbox more than once. For this use case, Display frequency should be set to Once per session.

   If you want to restrict or limit when the lightbox fires, you can configure Ignore mouse exiting on left and Ignore mouse exiting on right on the Details tab 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, select Click zone, and then position and resize the click zone as necessary.

   

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. Click the Conditions tab in Action Builder to create the action condition. Click ADD CONDITION, expand Page type, and then select Page type=. For the value of the condition, input cart or whatever is the page type value for your site's cart page.

    

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

    

13. Click the Inputs tab to define which of the action's fields and settings can be configured at the experience level. See Action Inputs for more information.
14. Give the action a title, description, and subcategory. Click CREATE & EXIT.

    

Refer to the Exit Intent Image Lightbox Action section of Lightbox Actions for more information about building this type of action in Action Builder.

Creating the Experience

Follow these steps to create 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. If you want the lighbox to appear only to certain customers, then click WHO and configure the target audience as necessary. See Types of WHO Targets for more information.
9. Add the Exit Intent Image Lightbox action built for this experience.
   1. Click A of the WHAT settings and then click ADD ACTION.

      

   2. Click Lightboxes.

      

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

      

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

      

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 and then click ADD TARGET.

   

2. Click Location.

   

3. Click IP address.

   

4. Input your IP address into the IP Address field, leave visitors matching this target set to INCLUDE, and then click SAVE.

   The IP address must be in the IPv4 format (x.x.x.x) and cannot include wildcards. To verify your IP address, you can input What is my IP address? into Google search to obtain it.

   

5. Click ACTIVATE.

   

6. Open a private browser window, navigate to your site, add one or more products to the cart, 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.

Building an Advanced Exit Intent HTML Lightbox Action

The Exit Intent Image Lightbox action built for this use case doesn't take the customer directly to your site's checkout flow when they click the lightbox's click zone. To accomplish this type of interactivity, you can build an Exit Intent HTML Lightbox action that includes 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. 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.

   

5. To restrict or limit when the lightbox fires, optionally 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 customer 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.

   

6. Click the HTML tab, and then click Source in the code editor.

   

7. Copy and paste the HTML code for the lightbox into the editor. This sample code adds text content, a Complete My Order checkout button, a Continue Shopping button that you can link to any relevant page on your site, 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.

   <section class="mt_lightbox">
   
   <button class="monetate_lightbox_close" type="button">&times;</button>
   
   <div class="mt_lightbox__copy">
   <h3>You're leaving so soon?</h3>
   
   <p>Don't leave just yet because great things could be headed your way! Enjoy free  shipping when you use the promo code <span class="promoCode">HOTDOG</span> in the next 24 hours when you check out.</p>
   
   <a class="btn btn--secondary" href="https://monetate.mybigcommerce.com/">Continue Shopping</a>
   
   <button class="btn" id="lightboxCheckout" onclick="clickCheckout()">Complete My Order</button>
   
   </div>
   </section>

8. Click the Styles tab and input the CSS required so that the elements of the lightbox match the theme of your site for a seamless customer experience.

   

9. Optionally, you can set a background image for the lightbox using CSS. Upload an image to or select an existing one in Content Manager, and then add the path to the image. This sample CSS code specifies the location of the background image and configures its dimensions and other styles on the parent container.

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

10. Add as needed 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 your site. This sample code styles control the layout of the buttons, links, and text content added by the HTML.

    #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;
    }

11. If you included the onclick attribute in the action's HTML code, then you must write the JavaScript function activated by it. Click the Details tab, and then scroll down to the JavaScript editor.

    

12. Input the JavaScript code into the code editor. This sample code includes a function that uses JavaScript to find an element selector, which in this example is the form submit button. After it locates the selector, it triggers a click event on that selector that submits the cart page form.

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

13. Click the Conditions tab and configure the action conditions as described in steps 11 and 12 of Building the Exit Intent Lightbox Action.
14. Click the Inputs tab to define which of the action's fields and settings can be configured at the experience level. See Action Inputs for more information.
15. Give the action a title, description, and subcategory. Click CREATE & EXIT.