Claspo’s JavaScript API allows you to target and trigger a widget based on JavaScript variables and create more personalized communication with your visitors. It allows you to dynamically pass data from your website directly into Claspo and use this information to display your widgets. In practice, this means you can feed your widget information like the visitor’s cart value, subscription status, loyalty tier, and more and use that data to personalize when and how the widget appears.
Unlike cookies or local storage, JavaScript variables exist only during the current page session. The data is cleared when the page is reloaded or when a user navigates to another page. This makes it perfect for targeting based on real-time conditions or user actions happening right now on the page.
This approach is powerful for personalization: widgets can respond to user behavior and attributes in real time, creating a more relevant experience for each visitor. For instance, you might show a special offer only to users with high cart values or display a custom message that includes the visitor’s loyalty tier.
How to set JavaScript variables on your website
To use JavaScript variables in Claspo, you first need to send the data from your website to Claspo using our JavaScript API. This requires adding a small script to your website or tag manager.
The general format is:
<script>
claspo('addVariables', { variableName: value });
</script>
For example:
<script>
claspo('addVariables', { subscribed: false });
</script>
You can add multiple variables at once, like:
<script>
claspo('addVariables', {
user_age: 25,
user_status: 'vip'
});
</script>
Where to place the script:
Directly into your website's code (after the Claspo base script is loaded).
Or via Google Tag Manager using a Custom HTML Tag. Read more
Where to set it up in Claspo
In the display conditions under On pages, you’ll find the option called JavaScript variable.
You can use it to check:
If a variable exists — is set.
If a variable has a specific value — equals.
If a variable matches part of a value — starts with, contains one of, ends with.
If a variable’s value is numerical — greater than, less than.
If a value matches a regular expression — regex.
Common use case examples
Here are a few ways you can use JavaScript Variables to target users based on real-time data from your website.
Target non-subscribed users for email signup
You want to show a subscription widget only to users who are not yet subscribed:
Variable: subscribed
Condition: equals → false
Show a widget to beta testers
You want to show a special informing message or promo only to users who belong to your beta testing group:
Variable: user_status
Condition: equals → beta
Combine multiple variables for advanced segmentation
You want to promote early access to a new exclusive product line, but only to female loyalty members who are already logged in. For example, you’re launching a limited-edition collection specifically designed for women, and want to give your most engaged female customers a chance to shop before anyone else. Variables:
logged_in → equals → true
loyalty_level → equals → vip
user_gender → equals → female
JavaScript variables give you real-time control over widget targeting and triggering based on dynamic data directly from your website. This approach works perfectly when you want to reflect your visitor’s behavior, preferences, or actions immediately.