Widget Calling Using JavaScript Variables

You can control widget display based on JavaScript variables that your site passes to Yespo in real time. This allows you to account for the current state of the page and visitor actions — such as cart value, loyalty tier, or subscription status — and show or hide a popup exactly when it's relevant.

Unlike Cookie and 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 them ideal for targeting based on what is happening right now.

📘

Note

JavaScript variables can also be used as Merge Tags — to substitute values directly into the widget text. Read more.

Setting Up Variables on Your Site

To send variable values to Yespo, add the script

• directly to your site code (after the main Yespo script is loaded)
• or to the Custom HTML tag in Google Tag Manager (more).

Script format:

<script>
  yespo('addVariables', { variableName: value });
</script>

For example, to pass the subscription status:

<script>
  yespo('addVariables', { subscribed: false });
</script>

You can also specify multiple variables at once:

<script>
  yespo('addVariables', {
    user_age: 25,
    user_status: 'vip'
  });
</script>

Setting Up the Condition in Calling Rules

1. In the On pages section of the widget calling rules, click Add condition.

2. Select the JavaScript variable condition, enter the variable name, operator, and value:

Use Cases

Showing an Exclusive Offer to VIP Customers

After login, pass the loyalty tier via a JS variable:

<script>
  yespo('addVariables', { loyalty_tier: 'vip' });
</script>

In the calling rules, add the condition: JavaScript variable loyalty_tier equals vip.

Result: Only VIP customers will see the popup with the exclusive offer.

Hiding a Popup from Mobile App Users

If your app sets a JS variable on every page load, you can hide the popup prompting users to download the app from those who already have it.

<script>
  yespo('addVariables', { has_app: true });
</script>

In the calling rules, exclude pages where JavaScript variable has_app equals true.

Result: The popup will only be shown to visitors without the app.

📘

Note

If your app writes to Local storage instead of setting a JS variable on every page load, use the Local storage key condition instead — it is more reliable as values persist across page reloads.

Showing a Popup to Visitors with a High Cart Value

Pass the current cart value via a JS variable:

<script>
  yespo('addVariables', { cart_value: 1500 });
</script>

In the calling rules, add the condition: JavaScript variable cart_value greater than 1000.

Result: Only visitors with a cart value exceeding 1000 will see the popup with the special offer.