# HTML Targeting

Do you want to display your popup based on a targeted post's or content's specific element? With Popupsmart, you can specify and set up an HTML condition for a popup in 2 minutes.

# Setting Up HTML Condition in a Specific Page

For example, you can target the HTML of a text on a specific webpage. Let's say that you want a popup to show on the page where the text “Double Your Conversions with Exit-Intent Popup" appears.

  • First, you need to open the webpage you want to display the popup. Then, select the text you want to target and right-click the mouse and select "Inspect."

Inspect window on browser

  • You will see the HTML of the selected text highlighted. Next, right-click your mouse, move your cursor over Copy, and choose Copy Selector. You’ll use this copied element for the CSS Selector on HTML Targeting, as you’ll see in the following of this guide.

Now, head onto the Popupsmart popup builder. Follow the steps below to set HTML targeting for your popup campaign.

# 1. Go to "Visitor Behavior" on the 3rd step of your popup builder

Visitor Behavior on popup builder screen

# 2. Select "HTML Targeting" and click the Add button

HTML Targeting selection

# 3. Make the status "Show" and paste the copied HTML into CSS Selector

CSS selector on targeting settings

Once you click on the "Add" button on the opening modal, you can start setting up your HTML targeting. There are two conditions under "status;" show or hide. You choose to show your popup based on specific HTML content or hide it. This way, you can decide which pages you want to display your popup or not.

# How to copy an HTML element

  • Go to the page where the element exists.

  • Highlight it with your cursor and then right-click your mouse to choose Inspect from the opening menu.

  • This will open a window that displays the CSS elements on the page. The element you selected will be highlighted.

  • Right-click your mouse on the selected element, move your mouse on Copy and select Copy Selector.

# 4. Paste the HTML you copied to "CSS Selector."

HTML Targeting configuration

# 5. Determine the "Query type."

adding query type

If you target a text, it is best to select "contains" from the dropdown "Query" menu.

If you are targeting shopping carts, then you can select other options as well, such as "less than" or "greater than."

# 6. Lastly, Enter the Element Value.

element value

The Element Value is the value of the element you copied. For example, our copied element is the H1 on a page “Double Your Conversions with Exit-Intent Popup,” and it’s also the element value, meaning the value inside the CSS code.

# What can you do with HTML targeting?

  • Present customized messages with popups at the checkout,

  • Create and display different and multiple popups on pages with the same URL: Some pages may have the same URL. In such a case, URL targeting may not provide the desired results. You can set up HTML targeting not to annoy visitors with irrelevant messages.

  • Show or hide popups based on HTML content.