With the WisePops' JS Callbacks feature and a bit of technical skill, it is possible to make parts of your popups dynamic. Let's see how you can place dynamic variables into your popup, and replace them during the popup rendering.

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 and underscore.
  • It must not contain any white space. For example, {{ myVariable }}  is invalid.

Here is an example:

Here we are using the {{productName}}  variable 3 times:

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

There is also a second variable inside the text block: {{firstName}} 

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: {{productName}} 

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 a third variable: {{productId}} :

We can use a custom property to condition the popup display to the availability of a product from the visitor wish-list. But for this article, we will focus on the content only.

Replace the Dynamic Variables before the Popup Display

We are going to listen for the Before popup display event to replace these 3 variables with their actual values. To be able to inject back-end values from the server, let's write our callback on our e-commerce website.

Let's consider the following snippet:

wisepops('listen', 'before-popup-display', 4242, function (event) {
  event.detail.popup.replaceString('{{firstName}}',   'FIRST_NAME_GOES_HERE');
  event.detail.popup.replaceString('{{productId}}',   'PRODUCT_ID_GOES_HERE');
  event.detail.popup.replaceString('{{productName}}', 'PRODUCT_NAME_GOES_HERE');
});

When the popup 4242  is about to be displayed, we will replace the 3 variables with their values. The {{productName}} , which was referenced in 3 distinct places, will be replaced in these 3 places.

A more realistic example with injection from PHP objects:

wisepops('listen', 'before-popup-display', 4242, function (event) {
  event.detail.popup.replaceString('{{firstName}}',   '<?php echo $user->firstName; ?>');
  event.detail.popup.replaceString('{{productId}}',   '<?php echo $product->id; ?>');
  event.detail.popup.replaceString('{{productName}}', '<?php echo $product->name; ?>');
});

Remember to replace 4242  with your popup ID.

Injection from GTM variables

It is possible to replace the WisePops variable with GTM variables, by setting the previous snippet as a GTM tag. Since WisePops variables use the same delimiters as the GTM variable, we must indicate to GTM that it should not try to parse the first argument. Notice the \  between the delimiter of the wisepopsVariable :

<script>
  wisepops('listen', 'before-popup-display', 4242, function (event) {
    event.detail.popup.replaceString('{\{wisepopsVariable}}', '{{gtmVariable}}');
  });
</script>

You can use the same technique within Shopify liquid files.

Did this answer your question?