Trigger a Lightbox Action for Out-of-Stock Items

You can create a target in Target Builder to locate this site element and then deploy that custom target in a Web experience to trigger a variety of actions whenever the targeted site element is on a page of your site.

For example, lightboxes are useful for conveying important information to a customer in a way that forces them to interact with and pay attention to your content. The lightbox action in this example is paired with a custom WHO target so that the a customer only sees the lightbox when they land on a product detail page for an out-of-stock product.

Building the Custom 'Out of Stock' Target

Follow these steps to create the custom target in Target Builder.

Out-of-stock items are noted on the use case site by the oos_product ID, which can be viewed using Google Chrome's Developer tools. Right-click the "Out of Stock" heading element, and then click Inspect.

  1. Navigate to a product detail page on your site for an out-of-stock product.
  2. Right-click the element on the page that contains the "Out of stock" message, and then select the option from the contextual menu to open your browser's Web developer tools. View the page's code to determine the site element that contains that message.

    Callout of the 'Out of Stock' heading and the 'oos_product' ID in the HTML code view in Chrome DevTools

  3. In a new browser tab, launch the Monetate platform. Click COMPONENTS in the top navigation bar, and then select Targets.

    Callout of the Targets option in the COMPONENTS menu

  4. Click CREATE TARGET.

    Callout of the CREATE TARGET button on the Targets list page

  5. Navigate to the page on your site that you viewed in step 1. In Target Builder, click the HTML Element tab and then click Element Content (text).

    Callout of the HTML Element tab and the 'Element Content (text)' option on that tab of Target Builder

  6. Use the element selector to find the "Out of Stock" selector, and then click the forward arrow.

    The Element Selector panel of Target Builder

  7. On the Details tab, input as the Element Content value the text that must appear in the targeted element. Leave the Element Content operator set to EQUALS so that only pages on which the exact text is present are targeted.

    The Details tab for an HTML Element of Target Builder, with '#oos_product' selector in the Element field and a callout of the Element Content operator selector set to EQUALS and the empty value text field

  8. Because this target should work on any page on your site, no conditions are necessary. Click the forward arrow.
  9. Give the target a title, a description, and a subcategory, and then click CREATE & EXIT.

    The final panel of Target Builder, with the Target Title, Description, Subcategory fields and the CREATE & EXIT button

The custom target is now ready to be used in a Web experience.

Building the Experience

Follow these steps to add a custom target to a Web experience.

This task presumes that you either have created in Action Builder a lightbox action specifically for this experience or have a lightbox action template suitable for reuse in this Web experience.

  1. Create a new Web experience.
  2. Configure the WHY settings.
  3. Click WHO and then click ADD TARGET.

    Callout of the WHO settings and of the ADD TARGET button on the Experience Editor page

  4. Click Custom Targets.

    Callout of the Custom Targets option on the Target Type panel

  5. Click the custom target that you created in the previous section.

    The Custom Targets panel of the WHO settings, with a callout of an 'Out-of-Stock Banner' custom target that's configured to look for the 'oos_product' HTML element ID.

  6. Leave the toggle set to INCLUDE. Click SAVE.

    Callout of the SAVE button on the 'Out-of-Stock Banner' custom target panel

  7. Configure the WHAT settings.
    1. Click WHAT and then click ADD ACTION.

      Callout of the WHAT settings and of the ADD ACTION button on the Experience Editor page

    2. Click Lightboxes.

      Callout of the Lightboxes option on the Action Type panel of the WHAT settings

    3. Click the action template that you want to use.

      The Lightboxes panel of the WHAT settings, with a variety of lightbox action templates available

    4. Configure the lightbox template as necessary. See the documentation in the Lightboxes category for guidance on the required and optional settings for different types of lightbox actions.
  8. As necessary, configure the WHEN settings.
  9. Preview the experience. See Activate an Experience for Preview and Testing and Preview Mode Limitations to determine if the custom target you selected in step X limits your ability to use the PREVIEW button.

Related Articles