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.

Variable button in the Title field

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.

Shopify variables category

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.

Cart total price option of the var tab

Click the expression itself and add = 100 - before the $cartTotalPrice part. Now the expression should look like this:

{{= 100 - $cartTotalPrice}}

Changing the Cart total price expression

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.

Field ID on the dashboard

For example, add the name variable to the success page to show the name the visitor submitted on the first page.

Name variable on the success 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.

The City variable from the Geo category

Device

The Device variables let you display personalized messages based on the visitor’s device properties and settings.

  • Language displays the visitor’s language set in their browser.
  • Browser displays the name of the browser the visitor is using.
  • Device displays the visitor’s device name, e.g. iPhone.
  • OS displays the visitor’s operating system.
  • Device type displays 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.

OS variable in the Device section

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.

Adding expression to the button URL

Date

The Date variables allow you to add the current date based on the visitor’s system settings.

  • Date displays the current date, e.g. 10/23/2021.
  • Month displays the current month, e.g. October.
  • Weekday displays the current day of the week, e.g. Saturday.
  • Day displays the day of the month, e.g. 23.

Date variables on the dashboard

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.

UTM variables on the Getsitecontrol dashboard

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.

Email form field in 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.

Open URL action with the !url variable

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.

 Open URL action with the !query variable

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!

Browse by category