It’s perfect for scenarios where the user explicitly shows interest — and you want to respond instantly.
Why use this trigger
This method gives your visitors full control. Instead of showing a widget based on timing or behavior, it appears only when someone clicks a specific element — like a ‘Subscribe’ button in your header, or a ‘Book a demo’ link in your pricing table. It’s a smart way to connect intent with action, without interrupting the flow.
It works beautifully for newsletter subscriptions, demo requests, callbacks, and lead forms — especially when you want the widget to act as a seamless extension of your site’s UI.
For best results, place the click-triggered widget across high-visibility spots:
In the top menu (‘Subscribe’ or ‘Try it now).
Inside product or pricing cards (‘Book a call’).
In the footer (‘Contact us’ or ‘Sign up’).
This way, the visitor can trigger the widget at their own pace — and on their terms.
How to set it up
In the widget editor, go to Triggering → HTML element click-based.
Switch on the toggle to activate the trigger.
A field will appear labeled CSS selector of the element. This is where you’ll enter the path to the clickable element on your site.
To target multiple elements (like buttons in different sections), click + Add placement and paste a new CSS selector into each additional field.
How to find the correct CSS selector
Not sure how to get the selector for the element you want to target? Here's how:
1. Open your website in Chrome, Opera, Edge, or Firefox.
2. Right-click on the page and choose Inspect.
3. In the developer console that opens, click the cursor icon (usually in the top-left corner) to enable element selection.
4. Click the button or link on your webpage that should open the widget.
5. The corresponding HTML will be highlighted in the console.
6. Right-click the highlighted code, select Copy → Copy selector.
7. Paste the copied value into Claspo’s CSS selector field.
Done! Now your widget will only appear when someone clicks that exact element.
Make sure your selector is unique
Many elements share common utility classes such as margin, padding, or color helpers (‘w-100, w-md-auto, mt-30, position-relative’ in our example).
To avoid triggering the widget on the wrong element:
Prefer meaningful class names (such as, .signup-btn, .main-cta).
Consider combining 2-3 classes to make the selector unique. For example, a.button-primary.white-color. This targets an <a> tag that has both classes.
If the highlighted element contains an ID, such as id="main-cta", you can target it directly: #main-cta. IDs must be unique, which makes this approach the most reliable.
Combine triggers for better coverage
Click triggers are precise — but they only work if the visitor actually clicks. For broader visibility, combine this with other widgets with triggers like:
Time on website — show the widget if someone has been on your site for a while.
Page scroll — great for catching engaged readers.
Exit-intent — a last-chance option if they’re about to bounce.
This layered approach keeps your offers timely, visible, and user-friendly.