Trigger a Lightbox Action for Out-of-Stock Items

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. This use case employs a lightbox action triggered when a site visitor lands on a product detail page for a product that's currently out of stock.

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.

Callout of the 'Out of Stock' heading and the 'oos_product' ID in the HTML code view in Developer tools

Building the Custom 'Out of Stock' Target

After you find the site element that you can target, you can build a target in Target Builder to locate this site element and then target an experience whenever it finds the element on a page.

Launch Target Builder. Click COMPONENTS in the top navigation bar of the Kibo Personalization platform, and then select Targets.

Callout of the Targets option in the COMPONENTS menu

Click CREATE TARGET.

Callout of the CREATE TARGET button

Navigate to a page on your site that contains an out-of-stock product. 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)' button

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

View of the Element Selector panel of Target Builder

On the Details tab, input Out of Stock into Element Content and leave the selector set to EQUALS so that the target only triggers when that exact text is present on the page.

View of the Details tab with '#oos_product' selector in the Element field and 'Out of Stock' in the Element Content field

Because this target should work on any page on your site, no conditions are necessary. Click the forward arrow.

Give the target a title, a description, and a subcategory, and then click CREATE & EXIT.

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

Building the Experience

After you build the target, you can build an experience that uses it.

Create a new experience, click WHO, and then click ADD TARGET. Next, click Custom Targets, click the target that you created, and then click SAVE to add it to the WHO settings of the experience.

Was this page helpful?

YesNo