Personalize the Content of Your Popup on the Fly

Lisa Fockens Updated by Lisa Fockens

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. The dynamic variables work everywhere except in the "Display" sections. 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

Let's see a few use cases.

Inside your design

In this popup, 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 the previous 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.

As a hidden field value

You may want to associate the leads you collect with some custom data. Let say the user ID in your database. No problem! Simply create a hidden field in your form. And set its value to the relevant variable, like this: {{ userId }}

You can read our article about how to use dynamic variables in hidden fields.

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', {
  userId: '<?php echo $user->id; ?>',
  firstname: '<?php echo $user->firstname; ?>',
  product: {
    id: <?php echo $product->id; ?>,
    name: '<?php echo $product->name; ?>',
  },
}, {temporary: true});

Display a Popup Only After Another One Has Been Seen (or Clicked)

Apply filters to your dynamic variables

Contact