How to use dynamic text replacement
Dynamic Text Replacement (DTR) is a powerful feature to add personalization to your popups using a range of variables. It allows you to build a single popup and automatically change the text to show your visitors relevant messages.
Using Dynamic Text Replacement you can create situation-specific content and deliver messages that are suitable for a particular visitor. The new feature works for any piece of text on a popup including title, description, note, button text, action URL, and autoresponder message.
When working in the rich text editor click the {var} button to open the list of variables. If you need to edit other text fields (button URL, field label, etc.), add the necessary variable to the field manually.
Groups of variables
The custom variables you can use are grouped into the following categories.
Shopify
If you’re on Shopify, you’ll find the Shopify category with the variables that let you use the data collected by the platform. For example, you can display the name of the logged-in customer, offer a personal discount based on the number of products added to the cart or offer free shipping on the products the visitor is currently viewing. Find more use cases in our blog post.
Let’s say you’d like to offer free shipping to those customers who spend more than $100. To set that, choose Cart total price on the {var} tab.
Click the expression itself and add = 100 - before the $cartTotalPrice part. Now the expression should look like this:
{{= 100 - $cartTotalPrice}}
After this, the widget will show how much a user should spend to get free shipping.
Form
The Form variables allow you to use the information a visitor has submitted through the form. The list of variables includes the Field IDs added to your form. You can put the necessary Field ID into double curly braces and add it to a text field on the next pages of the same form.
For example, add the name variable to the success page to show the name the visitor submitted on the first page.
Geo
The Geo variables allow you to show suitable text based on the visitor's location. The available options are Country, Country code, Region, State code, City, and Postal code.
For example, if you want to show the visitor’s city on your popup, choose the City variable. Instead of {{$city}} the visitor will see the actual name of the city they’re from.
Device
The Device variables let you display personalized messages based on the visitor’s device properties and settings.
Languagedisplays the visitor’s language set in their browser.Browserdisplays the name of the browser the visitor is using.Devicedisplays the visitor’s device name, e.g. iPhone.OSdisplays the visitor’s operating system.Device typedisplays the visitor’s device type, e.g. Desktop, Mobile, or Tablet.
Let’s say you want your visitors to follow the link based on their operating system. Choose the OS variable.
Then you need to customize your button URL. Open the settings of your action button, click + Add action, choose Open URL, and paste the expression below:
{{!= $os == 'iOS' ? 'https://apps.apple.com/your-app' : 'https://play.google.com/your-app'}}
Android users will be redirected to Google Play and iOS users will be taken to App Store.
Date
The Date variables allow you to add the current date based on the visitor’s system settings.
Datedisplays the current date, e.g. 10/23/2021.Monthdisplays the current month, e.g. October.Weekdaydisplays the current day of the week, e.g. Saturday.Daydisplays the day of the month, e.g. 23.
Developer
The Developer variables allow you to use API parameters and create advanced expressions for dynamic text replacement. Check this guide on how to use Getsitecontrol API.
UTM
The UTM variables allow you to change the content based on the source the visitor is coming from, the marketing channel, the campaign you’re launching, or specific keywords.
All the service variables (Geo, Device, Date, UTM) can be recognized $ at the beginning, e.g {{$weekday}}. Form and JS API variables don’t contain $, for example, {{name}}.
Advanced options
Default text
You can create a fallback, an alternative piece of text to show up in case there isn’t a value defined. Let’s say, the visitor is hiding their location. Add the variable in the format:
{{$city | your door}}
If Getsitecontrol can’t detect the location, the message will look as follows: “Shipping to your door is on us!”.
Variables into the Open URL action
You can use the email form field in the Open URL action. In this case, the email the visitor submitted your widget with will be passed to the URL.
To set this, add the URL in the format https://example.com?email={{email}} to the Open URL action.
Now after the button click, the popup will open the URL containing the submitted email.
It’s also possible to pass variables into an Open URL action with the help of API. Below you’ll find the method to pass the variables through API:
gsc('params', {url: 'https://example.com?var=123'})
After that insert {{!url}} in the URL field of the action settings. We add ! (the exclamation character) at the beginning to prevent the URL encoding.
If necessary, you can pass a query string (containing several GET parameters). Here’s the method you need to use:
gsc('params', {query: 'price=10&quantity=2'})
Like in the previous paragraph, put {{!query}} into the URL field of the Open URL action.
After this, the final URL should look like the following:
https://example.com?{{!query}}
JavaScript expressions
You can use JavaScript to personalize messages as well.
{{=expression}}
expression is any valid JavaScript expression whose result is to be displayed to the visitor. In an expression you can use various variables:
totalSpent>1000 ? 'Premium' : 'Basic'
'MR. ' + name.toUpperCase()
In our blog post, you’ll find more examples that can be used without any effort.
If you have any questions or thoughts, feel free to contact us, we’ll be happy to help you implement your idea!