Personalize the Content of Your Popup or Notification on the Fly

Lisa Fockens Updated by Lisa Fockens

Wisepops' custom properties can be used not only to refine the targeting of your campaigns but also to customize the content of your popups and notifications with dynamic variables. This requires two steps:

  1. Defining custom properties
  2. Inserting them inside your campaign

Step 1 - Defining custom properties

Custom properties are variables that are dynamic and can be personalized to each visitor. They can be used to restrict the targeting of your campaigns to specific segments of visitors (for example based on their shopping behavior, their interests or demographics) but in this article we will show you how they can also be used to personalize the content of the campaign. To learn how to set up custom properties, please refer to this section of the custom properties article.

Step 2 - Inserting Custom Properties inside your campaigns

Now that you have defined the custom properties you need, you can place them as variables into your campaign, literally anywhere into the campaign design. A variable must have the following format: {{ myVariable }} 

  • It must start with {{  and end with }} 
  • myVariableis the name of the custom property whose value will be displayed as a variable
  • The custom property name 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.

Dynamic Variables inside your design

In Popups:

In this popup, we are using the custom property {{ product.name }} 3 times:

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

In Notifications:

In this notification, we are using the custom property {{ product.name }} 2 times:

  • In the title
  • 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 custom property {{ product.id | url_encode }} :

In Popups:

In Notifications:

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 has 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 in popups

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 custom property, like this: {{ userId }}

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

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

Apply filters to your dynamic variables

Contact