How to set up a custom HTML targeting condition
Please note that this is an advanced feature that requires some programming knowledge. Therefore, we are unable to provide support for creating or troubleshooting custom code.
You can use a custom HTML condition to show (or hide) widgets based on the presence of a given HTML element on a specific page of the website.
For example, you can use this feature to display (or not display) a widget when there is at least one item in the cart.
Identify the HTML element
On your website, there likely is a unique HTML element that indicates the number of items the customer added to the cart.
The examples below show how the same element changes as items are added to the cart.
Empty cart
<div class="cart-item-count">0</div>One item in the cart
<div class="cart-item-count">1</div>Two items in the cart
<div class="cart-item-count">2</div>With an HTML condition, you can identify the element using the CSS selector, and show the widget if this element’s value (innerText) is higher than 0.
Add the CSS selector
When setting up targeting for your widget, find the ‘Display widget if’ section. Switch to the ‘Developer’ tab and click HTML condition.
Then, add the HTML element’s CSS selector to the corresponding field.
For our example, we’ll use a class selector. Make sure to add a dot (.) before the class name.
CSS selector for the cart count
.cart-item-count
Feel free to use any of the other CSS selectors for different scenarios.
Choose a condition
Next, choose an option from the dropdown list:
Choose the condition that fits the text or number returned by your CSS selector:
| Condition | What it checks |
|---|---|
| Is | The value equals the value you enter. For example, a cart count of 0. |
| Is not | The value differs from the value you enter. |
| Less than | The number is below your threshold. For example, a cart count below 3. |
| Greater than | The number is above your threshold. A cart count greater than 0 means there is at least one item. |
| Starts with | The text begins with the text you enter. For example, “Order” matches “Order confirmed”. |
| Ends with | The text ends with the text you enter. For example, “remaining” matches “2 remaining”. |
| Contains | The text includes the text you enter anywhere within it. For example, “stock” matches “Back in stock”. |
| Does not contain | The text does not include the text you enter. |
| Matches | The text fits a pattern. Use * for any sequence of characters: “Order * confirmed” matches “Order 123 confirmed”. |
| Does not match | The text does not fit the pattern you enter. |
| Has any value | The selector finds an element on the page. You do not need to enter a comparison value. |
| Is unknown | The selector does not return a value, for example because no matching element is found. |
Set the comparison value
Since we want to show a popup when there is at least one item in the cart, we’ll have to pick greater than and then add “0” to the second field:
And that’s it!
Getsitecontrol will look for the HTML element based on the CSS selector specified in the targeting rule. Then, if the value of that element matches the targeting settings, the popup will appear on the webpage.
The HTML condition allows you to set up a variety of scenarios. Feel free to experiment with different HTML conditions to create precise targeting settings for your purposes.