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 Monetate Technical Support portal (support.monetate.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 on the Actions list page

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

    View of the Details tab in Action Builder, with the 'Lightbox ID' field, the 'Display frequency' selector, and the 'Open lightbox on mouseout' and 'Click overlay to close' toggles

  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, select Click zone, and then position and resize the click zone as necessary.

    Callout of the 'Click zone' 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.

    Callout of the URL field the Link section of the properties panel of Content Builder. A click zone has been placed over 'Return to cart' 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. 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.

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

  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.

    The Conditions tab of 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

  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.

    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 for more information about creating this type of 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 on the Web Experiences list page

  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.

    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.

    Animated demonstration of a user selecting 'Conversion rate' for the goal metric and then clicking 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 for the WHY settings of a Standard Test experience

  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.

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

    2. Click Lightboxes.

      Callout of the Lightboxes option on the Action Type panel

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

      Example of the Lightboxes action templates

    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.

      Callout of the CREATE button for an Exit Intent Image Lightbox action template

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.

    Callout of the WHO settings and the delete icon

  2. Click Location.

    Callout of the Location option on the Target Type panel

  3. Click IP address.

    Callout of the IP address target option

  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.

    Callout of the IP Address field and the SAVE button

  5. Click ACTIVATE.

    Callout of the ACTIVATE button

  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.

    A image-based 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.

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.

    Callout of the Actions option in the COMPONENTS menu

  2. Click CREATE ACTION.

    Callout of the CREATE ACTION button on the Actions list page

  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.

    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 of an Exit Intent HTML Lightbox action, with the Lightbox width, Lightbox height, Lightbox ID fields, the Display Frequency selector, and the 'Open lightbox on mouseout' toggle

  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.

    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'

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

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

  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.

    The Styles tab of an Exit Intent HTML Lightbox action

  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.

    The JavaScript editor on the Details tab

  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.