This is especially useful when you want a widget to appear only in certain layouts or situations — for example, when a banner, button, or dynamic section is visible.
Why use it
Not all content is tied to a static URL or clear UTM tag. Sometimes the best way to target a visitor is by identifying what’s visually or structurally on the page. This method is especially useful for ecommerce or dynamic CMS platforms where layouts change, but key elements (like CSS classes or containers) stay consistent. For example, you can show a widget only when a dynamic banner is visible on the page.
In our example, the promotional banner about slippers sale is loaded directly into the page layout:
You can use CSS element targeting to trigger a widget only when this specific banner is shown. This lets you:
Show a discount popup that complements the offer in the banner.
Promote related items or bundles tied to the product being spotlighted.
Avoid showing the widget when the banner isn’t active.
How to set it up
Go to the Triggers, On pages → Add condition.
Select CSS-selector → equals.
Paste in the selector you want to target.
Not sure how to find the needed CSS selector?
Open your website in Chrome, Opera, Edge, or Firefox.
Right-click anywhere on the page and select Inspect.
Click the Select element icon in the top-left of the console.
Click the element you want to target. For example, we clicked the banner with slippers, and its code was highlighted in the console.
Right-click the highlighted code and choose Copy → Copy selector.
Paste that value into Claspo’s targeting input.
Claspo will check whether this element exists on the page — and trigger the widget only if it does.
Note: make sure your selector is unique Many elements share common utility classes such as margin, padding, or color helpers (‘size-full, inset-0, position-relative’, etc.).
To avoid triggering the widget on the wrong element:
|