While built-in triggers like time on page or scroll depth cover most cases, the JS API gives you full control when you need to show a widget at a very specific moment defined by your site’s logic.
Note
JS API calls work independently of the widget’s rule-based display settings.
The same widget can appear automatically when its configured rules are met and also be launched programmatically through the API. Calling the widget through the API does not disable or replace its display rules.
Why it matters
This approach is ideal when your trigger depends on live interactions not natively trackable by Claspo — such as when a user completes a form, switches a toggle, performs a custom action, or triggers any other logic you define. It lets you integrate widgets naturally into your flow, without overloading the UI, and only when it matters.
Use cases examples:
Show a ‘Thanks’ widget only after registration is confirmed.
Display a discount offer when a back-in-stock alert is triggered.
Trigger an upsell pop-up after a user adds an item to their cart.
Important
API-based triggering typically requires assistance from a developer, since it relies on your website’s custom logic. This approach allows you to connect existing events on your site (such as successful registration or purchase actions) with Claspo widgets.
However, marketers can also implement API triggers without writing code by using tools like Google Tag Manager. Simply create a new tag, add:
<script>
claspo('showWidget', {formVariantId: 'f123v123'})
</script>
And configure the trigger conditions directly in GTM based on your site’s behavior.
How to set it up
1. In Claspo, open the widget you want to launch. Go to Triggering.
2. Scroll down to the Call with JavaScript API section.
3. Click the copy icon to grab the JS snippet. It’ll look like:
claspo('showWidget', {formVariantId: 'f123v123'})
3. Paste that snippet into your site’s JS where you want the widget to fire — like after a user registers.
You can also configure rule-based display settings for this widget if you want it to appear automatically in other scenarios.
For additional options and examples, check the JS API section in our Help Center.