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.
On your website, there likely is a unique HTML element that indicates the number of items the customer added to the cart.
Let’s assume the element’s HTML code looks like this.
When the cart is empty:
When there’s one item in the cart:
When there are two items in the cart, etc:
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.
Here's how to set it up.
When setting up targeting for your widget, find the ‘Display widget if’ section. Switch to the ‘Developer’ tab and click
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.
It should look like this:
Feel free to use any of the other CSS selectors for different scenarios.
Next, proceed to choose an option from the dropdown list:
These are the options available:
Is Is not Less than Greater than Starts with Ends with Contains Does not contain Matches Does not match Has any value Is unknown
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.