Configuring Overlay Display Conditions

Display conditions allow you to display a box to users based on device, referral source, geolocation, login status, and more! This guide covers a few commonly-used conditions.

Adding a Condition

You can add conditions from the Dashboard or the Editor.

1. From the Dashboard, click on Add/Edit button in the conditions column for the box you want to edit.

2. From the Editor, select the Conditions section on the left, then click on Edit Conditions.

3. Select Add Conditions to start adding rules.

4. Click on Add New Rule.

5. Lastly, choose the desired rule from the drop-down.

Testing a Lightbox

First, let’s make a test box. Conditions make it easy to test a box by pushing it to a specific test URL, rather than your entire site.

Current Page URL Rule

The Current Page URL rule lets us show a lightbox on any URL. For testing purposes, let’s set it up like this:

Rule: Current Page URL Contains ?LightboxTestView Demo

If you add ‘?LightboxTest’ to the end of your URL, this box will appear:

Specific URLs:

Using the Current Page URL rule, we can control exactly which URLs to display a box.

URL encoding serves the purpose of ensuring that web browsers and servers correctly interpret image URLs. This encoding process transforms characters into a format suitable for transmission over the Internet. Since URLs frequently incorporate characters beyond the scope of the standard ASCII set, they must be transformed into a valid ASCII format. URLs rely on certain characters for specialized roles in defining their syntax. When these characters aren't fulfilling their designated functions within a URL, encoding becomes necessary. This practice is widely endorsed, and major platforms, including ZMP, adhere to this standard for URL encoding. You can go through the Help and Training Community to see the common characters which are encoded.

Current Page URL Equals

With the Equals modifier, we can display a box on an exact match URL, such as:
https://yoursite.com/product/denim-jacket/?utm_campaign=featured

Rule: Current Page URL Equals {your URL}

Without the UTM code at the end, the box won’t display, giving you precise control over which visitors see this box.

Current Page URL Contains Any of These

We can also show boxes on multiple URLs using the Contains any of these modifier.

Rule: Current Page URL Contains any of theseproductcategory

Now, this box will appear on any page with product or category in the URL.

Device Type Rule

Device type lets you display boxes depending on whether your visitor is using a desktop, phone, or tablet.

Rule: Device Type Equals Phone

Time on Site Rule

Sometimes it’s a good idea to let your users browse your site for a bit before hitting them with a lightbox. Control exactly when you want the user to see a box with the Total Seconds on Page, Active Seconds on Page, and Idle Seconds on Page rules.

Total Seconds on Page Rule:

To show a box after a user has been on the site for 3 seconds, create a condition that looks like this:

Rule: Total Seconds on Page Greater Than 3

Targeting New Users

Let’s make sure we don’t ask users who are already on your list to sign up.

Pages Navigated Rule

With the Pages Navigated Rule, we can see which visitors have previously clicked through from one of your emails. If your newsletters use the UTM code utm_medium=email, then this is a breeze.

Rule: Pages Navigated URL Does NOT contain utm_medium=email

Login Status

Another great use for boxes is to ask users to log in or sign up. We can create a condition to detect if a user is logged out to show them this box:

Cookies Rule

To set up a Cookie rule, you need to know how your cookies are set up. In this example, we’ll assume the Cookie Name is loggedin and the Cookie Value is true or false. To target users who are not currently logged in, choose false as the value.

Rule: Cookie Contains loggedin false

User Behavior

With conditions, you can display content based on a user’s behavior. The most popular example is Exit-Intent. Using Exit-Intent, you can offer visitors a deal before they exit your site.

Exit-Intent Rule:

The Exit-Intent rule detects when a user moves their mouse away from your site, allowing you to trigger a box.

Rule: Exit Intent event occurs Mouse exists window top

Display Based on Tags

Displaying boxes on pages that contain the same tags is a great way to display content on related pages.

For our example, we’ll create a rule that shows a specific box across multiple products from the same brand. The brand name isn’t in the URL, but each page does contain a brand tag.

HTML Exists jQuery Rule

With the HTML exists jQuery rule, we can choose a tag and display content on any page that contains the same tag.

1. Copy the selector of the tag you want to reference. To do that, right-click on the tag on the page, and click on Inspect to open your dev tools.

2. Right-click on the tag in the HTML code, go to Copy, and choose copy selector.

3. Paste that into the conditions field and test it out.

Rule: HTML Exists jQuery equals {selector}

This rule is more advanced so if you need help, don’t hesitate to contact your account team for assistance.

In fact, for our example, we had to adjust the selector a tiny bit to get it to work.

The selector we copied was: body > div.section.cc-product-detail > div.product-details-wrap > div.w-dyn-list > div > div > a

However, to get it to work, we had to be a bit more specific:
body > div.section.cc-product-detail > div.product-details-wrap > div.w-dyn-list > div > div a:contains(‘Camici’)

You can do many other things using conditions, but this is a brief overview of some of the most common uses.