It is possible to make parts of your popups dynamic by replacing variables with the WisePops' custom properties. Let's see how this works.

Place the Dynamic Variables

You can place dynamic variables into your popup, literally anywhere into the popup design. A variable must have the following format: {{ myVariable }} 

  • It must start with {{  and end with }} 
  • It must contain only alphanumeric characters, plus dash, underscore and dot
  • Filters can be applied after the variable name

Here is an example:

Here we are using the dynamic variable {{ product.name }} 3 times:

  • In the tab
  • Inside a text block
  • Inside a CTA

Note that we have applied some styling on the variables of the text block. This works nicely as long as the style is applied to the entire variable. For example, this would not work properly: {{ product.name }}

In this example, we also need to associate the CTA with a dynamic URL to make sure we’re sending your visitors to the right product page. Fortunately, we can reuse the same method with the CTA link. Let's use another variable {{ product.id | url_encode }} :

You may have noticed that we used a special syntax in this latter variable, to ensure that the product ID is encoded before being injected in the URL. There is also the first name variable in the text block that have a default filter: {{ firstname | default: "there" }} . Filters allow us to apply transformations on the variable. You can learn more about it in this article.

Replace the Dynamic Variables with Real Values

You need to send the values for the current visitor to WisePops in order to replace the dynamic variables. WisePops will look for the defined custom properties to inject the values. To learn everything about the custom properties, you can read this article.

Note: if you're using Shopify and have installed the latest version of our app, you have access to a few different properties out-of-the-box.

Let's consider that we are running a PHP website, and that we have access to PHP objects containing all the info we need. We would add the following snippet just after the WisePops setup code, before the closing </script> tag:

wisepops('properties', {
firstname: '<?php echo $user->firstname; ?>',
product: {
id: <?php echo $product->id; ?>,
name: '<?php echo $product->name; ?>',
}
});

Did this answer your question?