Wisepops' custom properties allow you to create highly personalized and dynamic campaigns. By using dynamic variables, you can tailor the content of your popups and notifications to each individual visitor, enhancing engagement and conversion rates.
Understanding Custom Properties
Custom properties are variables that can be personalized for each visitor. They serve two main purposes:
1. Refining campaign targeting to specific visitor segments
2. Customizing campaign content dynamically
To set up custom properties, refer to our Custom Properties Setup Guide.
⚠️ When are variables evaluated?
Dynamic variables are evaluated at the moment the popup renders. This has an important implication: if you set a custom property via JavaScript after the popup is already visible, the variable in the popup content will not update — it's already been rendered with whatever value existed at that point.
This means:
Set the property before the popup displays. Use
wisepops("properties", { myVar: value })early in your page load, before any display trigger fires.For multi-step forms, you cannot dynamically inject a Step 1 answer into Step 2 content using
##{{ variable }}alone — you need a JavaScript workaround. See Dynamically Add a Custom Parameter to a Redirect URL for a complete example.
Implementing Dynamic Variables
Syntax
To insert a custom property as a dynamic variable in your campaign, use the following format:
##{{ myVariable }}
- The variable must be enclosed in double curly braces ##{{ }}
- myVariable is the name of your custom property
- Use only alphanumeric characters, dash, underscore, and dot in property names
Example
If you have a custom property product.name, you can insert it like this:
Check out our latest product: ##{{ product.name }}
Use Cases for Dynamic Variables
1. Personalizing Popup Content
Dynamic variables can be used in various elements of your popup, including:
Tabs
Text blocks
CTA buttons
2. Customizing Notification Content
Similarly, use dynamic variables in your notifications:
Notification title
Message body
CTA text
3. Creating Dynamic CTA Links
Use dynamic variables in CTA links to direct visitors to personalized pages:
https://example.com/products/##{{ product.id | url_encode }}
In a feed notification:
4. Populating Hidden Form Fields
Associate leads with custom data by using dynamic variables in hidden form fields:
Best Practices
Test your dynamic variables thoroughly to ensure they display correctly for all scenarios.
Use the
defaultfilter to provide fallback values for optional properties.Always use
url_encodewhen including dynamic variables in URLs.Set custom properties before your popup trigger fires — not after the popup is already visible.
Combine filters to achieve more complex transformations.
Applying Filters to Dynamic Variables
Filters allow you to transform the output of your dynamic variables.
Syntax
##{{ variable | filter }}
##{{ variable | filter: parameter }}
##{{ variable | filter1 | filter2 }}
Common Filters
1. default: Provides a fallback value
##{{ customer.first_name | default: "there" }}
2. capitalize: Capitalizes the first character
##{{ "welcome" | capitalize }}
3. upcase/downcase: Changes string case
##{{ "Hello World" | upcase }}
##{{ "Hello World" | downcase }}
4. plus/minus: Performs basic arithmetic
##{{ 40 | plus: 2 }}
##{{ 40 | minus: 2 }}
5. round: Rounds numbers
##{{ 40.155 | round: 2 }}
6. escape: Escapes HTML characters
##{{ "<b>bold text</b>" | escape }}
7. url_encode: Encodes URL-unsafe characters
##{{ "product name" | url_encode }}