Claspo’s JavaScript API allows you to personalize widgets using JavaScript variables. You can dynamically pass data from your website directly into Claspo and leverage this information in your widgets. Practically, this enables you to personalize widgets using data such as the visitor’s cart value, subscription status, loyalty tier, and more.
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
How to personalize widget content with JavaScript variables
With merge tags and JavaScript variables, you can tailor your messaging based on live, session-based data.
Important
JavaScript variables only exist during the user’s current page session. Once the page is reloaded or changed, this data is lost — so it’s perfect for real-time personalization. |
For example, a visitor from Miami browsing the ‘natural hair care’ category might see a message ‘Spend $100 on Natural Hair Care and get FREE delivery to Miami!’.
Let’s walk through how to insert location and product category (or any other variables) into your widget content using the JavaScript API.
Open the widget you want to personalize in the editor and do this:
Click on the text field where you'd like to add a dynamic value (‘your city’ in our example).
In the right-hand panel, click the Merge tag button.
Choose JavaScript variable from the dropdown.
4. Enter the variable name (visitorLocation.city in our example). Use the same variable name here as in your code, so Claspo can match them. You can also add an example value like ‘city’ to see it in the preview.
5. Repeat the process to insert additional values like product category.
Here’s what a final personalized widget might look like when using both visitorLocation.city and Category:
To take your personalization further, explore how to target visitors using JavaScript variables.
Need help setting it up? Contact our support team — we’re happy to assist!