Unlock the power of zero- and first-party data by including 1:1 personalized elements in your messages. Insert Dynamic Text such as country name, language, current month, or first name right from Editor into any message and watch your campaigns turn into a truly personal experience for each visitor.
1. What is Dynamic Text?
With Dynamic Text, you can create 1:1 personalized messages that make your visitors feel like your offers are talking to them directly by personalizing parts of a message.
Imagine if you could thank every person that visited your e-commerce site by name, include the dollar amount in their cart in your message or mention the country they’re from … all without lifting a finger. Well, that’s exactly what Dynamic Text can do. Dynamic Text let you alter the text automatically in Popups or Embedded Content based on different visitor attributes. This way, you don’t have to create different campaigns for all the different groups in your audience. Dynamic Text gives you the power to display fully-personalized messages: address customers by their name or display the total value of their current cart content on autopilot.
2. Must try Tactics with Dynamic Text
3. What type of Visitor Attributes can be used for Dynamic Text?
Dynamic Text can be built upon various data from simple ones to complex ones. OptiMonk gathers the data used for Dynamic Text through a JavaScript code that is inserted on your site, so you can connect with visitors on a deeply personal level.
In short, data for Dynamic Text can be acquired from different sources, including:
Zero-Party Visitor Attributes: collection through OptiMonk campaigns via input fields in campaigns
First-Party Visitor Attributes: automatic collection by OptiMonk
Custom Visitor Attributes: a custom source, like your own database (in which case we refer to it as a Custom Attribute)
Zero-Party Visitor Attributes
Zero-Party Visitor Attributes refer to data that your visitors provide to you directly. For instance, if you ask them about their first name, last name or e-mail address in a sign-up form, those pieces of data are considered Zero-Party Visitor Attributes. You can ask your visitors to provide any piece of information you might be interested in and want to use later as Dynamic Text or as targeting rules. To collect Zero-Party Visitor Attributes, you can use OptiMonk's built-in Form Elements in Editor:
Input Fields,
Radio Buttons,
Checkboxes,
Dropdowns,
Feedback Elements,
Textarea,
Survey Elements.
Learn more about Input Fields here.
Learn more about how to use this data in targeting using the Engaged with OptiMonk rule.
First-Party Visitor Attributes
First-Party Data is collected automatically by OptiMonk. It can be used for example to display the name of the country your visitor is coming from. OptiMonk collects the following first-party data you can choose from:
Static Visitor Attributes (visitors receive upon their first visit): Landing page, First visit date, UTM source, UTM medium, UTM campaign, UTM content
Dynamic Visitor Attributes (change based on visitor behavior): Current month, Browser language, Browser name, Browser version, Operating system name, Operation system version, Timezone offset (timezone, for example: "UTC-2"), Country name, Visitor popup last seen, Cart total, Cart number of items, Cart number of kinds, Product name, Product category, Cart value countdown
❗Cart and product-related Dynamic Text:
If you have a Shopify, WordPress, WooCommerce, Magento, or Shoprenter site, OptiMonk can automatically detect the content of the visitor’s cart and the products of your website, and use this information for Dynamic Text once the OptiMonk application is installed.
If you have a different website from Shopify, WordPress, WooCommerce, Magento, or Shoprenter, you will need to:
add a custom JS code detailed in the following article to be able to use cart-related Dynamic Text: JavaScript code for Cart Rules
define the custom attributes you want to use with product-related Dynamic Text and their value within a Java Script code, and then insert the code on your site to be able to use product-related Dynamic Text: Custom Attributes
💡 The Cart Value Countdown is best used with Cart rules, where you target the cart value between a minimum amount (not to show the countdown to everyone, just for those who have something in the cart.)
Custom Visitor Attributes
Please refer to the following article for information on how to configure OptiMonk to gather data from the custom attributes you want to use with Dynamic Text:
4. An example of a campaign using Dynamic Text
Let’s look at an example of how to customize a popup with Dynamic Text including using the optional entry for the default value. One of the best uses of Dynamic Text is to address your visitors by name.
You’d like to address all your visitors by their first name, but you might not have this data for all visitors. The solution is to use the default value to create a campaign that displays the text 'Dear Visitor' for non-registered users and displays their first name if they are registered.
1. Log in to your OptiMonk account at https://app.optimonk.com/
2. Select Campaigns on the navbar.
3. Select the Campaign you wish to edit or create a new one.
4. Click on the Variant you want to edit. This will take you to the Campaign editor.
5. If you click on any text element, you will be able to choose a Dynamic Text from the drop-down menu.
6. Select the First name and add a default value in case you might not have this data for all visitors, then click on Save.
7. Click on Save or Save & Exit to save the changes you made in the Campaign Editor.
The below screenshot shows what this looks like in the Campaign editor in your OptiMonk dashboard:
When the visitor is a registered user and their first name is available, the popup will look like this:
When the visitor is not registered or logged in, the system will display the default value we provided:
5. How to set up and use Custom Visitor Attributes as Dynamic Text?
OptiMonk gathers the data used for Dynamic Text through a JavaScript code that is inserted on your site. You define the custom attributesyou want to use with Dynamic Text and their value within this code, and then insert the code on your site.
After defining the custom attributes or cart content data in the JavaScript code, you have to put placeholders in the text of your popup. The placeholders you use must follow a specific format to enable the system to recognize them, and replace them with the values of your custom attributes:
[[type:variable|default value]]
The system will interpret the information between the double square brackets, ‘[[‘ and ‘]]’.
First, the type must be defined. This can either be cart or attribute, depending on whether you would like to use cart data or a custom attribute, respectively.
Following the type is a colon, ‘:’, and the name of the variable. The name of the variable must match the one you set in the JavaScript code. It can't contain any special characters, and it’s case-sensitive, meaning uppercase and lowercase letters are interpreted as different characters.
The last part is optional: Following the type is a vertical bar ‘|’ and the text you would like to use as a default value. This default value will be displayed in the event the custom attribute is not set and doesn't return a value to the system.
❗ Placeholders can't contain any typos. If your placeholder can't be interpreted by the system, the entire placeholder will show up on the popup.
❗ The custom attribute name must match the name you set up in JavaScript exactly.
6. How to set up and use Dynamic Country Flags?
1. Put the below code to the CSS Editor
.om-overlay:not(#editor-mode) img[src*="data:"] {
opacity: 0;
}
/* emoji css for windows */
@font-face {
font-family: 'Twemoji Country Flags';
src: url('https://cdn.jsdelivr.net/npm/[email protected]/dist/TwemojiCountryFlags.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
#editor-mode .om-dtr-content em,
.win .om-dtr-content em {
font-family: "Twemoji Country Flags", sans-serif !important;
font-style: normal;
}
2. Put the below code to the JS Editor under Page Load
const countries = { Andorra: 'AD', 'United Arab Emirates': 'AE', Afghanistan: 'AF', 'Antigua and Barbuda': 'AG', Anguilla: 'AI', Albania: 'AL', Armenia: 'AM', Angola: 'AO', Antarctica: 'AQ', Argentina: 'AR', 'American Samoa': 'AS', Austria: 'AT', Australia: 'AU', Aruba: 'AW', 'Åland Islands': 'AX', Azerbaijan: 'AZ', 'Bosnia and Herzegovina': 'BA', Barbados: 'BB', Bangladesh: 'BD', Belgium: 'BE', 'Burkina Faso': 'BF', Bulgaria: 'BG', Bahrain: 'BH', Burundi: 'BI', Benin: 'BJ', 'Saint Barthélemy': 'BL', Bermuda: 'BM', Brunei: 'BN', Bolivia: 'BO', 'Caribbean Netherlands': 'BQ', Brazil: 'BR', Bahamas: 'BS', Bhutan: 'BT', Botswana: 'BW', Belarus: 'BY', Belize: 'BZ', Canada: 'CA', 'Cocos [Keeling] Islands': 'CC', 'Congo - Kinshasa': 'CD', 'Central African Republic': 'CF', 'Congo - Brazzaville': 'CG', Switzerland: 'CH', "Côte d'Ivoire": 'CI', 'Cook Islands': 'CK', Chile: 'CL', Cameroon: 'CM', China: 'CN', Colombia: 'CO', 'Costa Rica': 'CR', Cuba: 'CU', 'Cape Verde': 'CV', Curaçao: 'CW', 'Christmas Island': 'CX', Cyprus: 'CY', 'Czech Republic': 'CZ', Germany: 'DE', Djibouti: 'DJ', Denmark: 'DK', Dominica: 'DM', 'Dominican Republic': 'DO', Algeria: 'DZ', Ecuador: 'EC', Estonia: 'EE', Egypt: 'EG', Eritrea: 'ER', Spain: 'ES', Ethiopia: 'ET', Finland: 'FI', Fiji: 'FJ', 'Falkland Islands': 'FK', Micronesia: 'FM', 'Faroe Islands': 'FO', France: 'FR', Gabon: 'GA', 'United Kingdom': 'GB', Grenada: 'GD', Georgia: 'GE', 'French Guiana': 'GF', Guernsey: 'GG', Ghana: 'GH', Gibraltar: 'GI', Greenland: 'GL', Gambia: 'GM', Guinea: 'GN', Guadeloupe: 'GP', 'Equatorial Guinea': 'GQ', Greece: 'GR', 'South Georgia and the South Sandwich Islands': 'GS', Guatemala: 'GT', Guam: 'GU', 'Guinea-Bissau': 'GW', Guyana: 'GY', 'Hong Kong SAR China': 'HK', Honduras: 'HN', Croatia: 'HR', Haiti: 'HT', Hungary: 'HU', Indonesia: 'ID', Ireland: 'IE', Israel: 'IL', 'Isle of Man': 'IM', India: 'IN', 'British Indian Ocean Territory': 'IO', Iraq: 'IQ', Iran: 'IR', Iceland: 'IS', Italy: 'IT', Jersey: 'JE', Jamaica: 'JM', Jordan: 'JO', Japan: 'JP', Kenya: 'KE', Kyrgyzstan: 'KG', Cambodia: 'KH', Kiribati: 'KI', Comoros: 'KM', 'Saint Kitts and Nevis': 'KN', 'North Korea': 'KP', 'South Korea': 'KR', Kuwait: 'KW', 'Cayman Islands': 'KY', Kazakhstan: 'KZ', Laos: 'LA', Lebanon: 'LB', 'Saint Lucia': 'LC', Liechtenstein: 'LI', 'Sri Lanka': 'LK', Liberia: 'LR', Lesotho: 'LS', Lithuania: 'LT', Luxembourg: 'LU', Latvia: 'LV', Libya: 'LY', Morocco: 'MA', Monaco: 'MC', Moldova: 'MD', Montenegro: 'ME', 'Saint Martin': 'MF', Madagascar: 'MG', 'Marshall Islands': 'MH', Macedonia: 'MK', Mali: 'ML', 'Myanmar [Burma]': 'MM', Mongolia: 'MN', 'Macau SAR China': 'MO', 'Northern Mariana Islands': 'MP', Martinique: 'MQ', Mauritania: 'MR', Montserrat: 'MS', Malta: 'MT', Mauritius: 'MU', Maldives: 'MV', Malawi: 'MW', Mexico: 'MX', Malaysia: 'MY', Mozambique: 'MZ', Namibia: 'NA', 'New Caledonia': 'NC', Niger: 'NE', 'Norfolk Island': 'NF', Nigeria: 'NG', Nicaragua: 'NI', Netherlands: 'NL', Norway: 'NO', Nepal: 'NP', Nauru: 'NR', Niue: 'NU', 'New Zealand': 'NZ', Oman: 'OM', Panama: 'PA', Peru: 'PE', 'French Polynesia': 'PF', 'Papua New Guinea': 'PG', Philippines: 'PH', Pakistan: 'PK', Poland: 'PL', 'Saint Pierre and Miquelon': 'PM', 'Pitcairn Islands': 'PN', 'Puerto Rico': 'PR', 'Palestinian Territories': 'PS', Portugal: 'PT', Palau: 'PW', Paraguay: 'PY', Qatar: 'QA', Réunion: 'RE', Romania: 'RO', Serbia: 'RS', Russia: 'RU', Rwanda: 'RW', 'Saudi Arabia': 'SA', 'Solomon Islands': 'SB', Seychelles: 'SC', Sudan: 'SD', Sweden: 'SE', Singapore: 'SG', 'Saint Helena': 'SH', Slovenia: 'SI', 'Svalbard and Jan Mayen': 'SJ', Slovakia: 'SK', 'Sierra Leone': 'SL', 'San Marino': 'SM', Senegal: 'SN', Somalia: 'SO', Suriname: 'SR', 'South Sudan': 'SS', 'São Tomé and Príncipe': 'ST', 'El Salvador': 'SV', 'Sint Maarten': 'SX', Syria: 'SY', Swaziland: 'SZ', 'Turks and Caicos Islands': 'TC', Chad: 'TD', 'French Southern Territories': 'TF', Togo: 'TG', Thailand: 'TH', Tajikistan: 'TJ', Tokelau: 'TK', 'Timor-Leste': 'TL', Turkmenistan: 'TM', Tunisia: 'TN', Tonga: 'TO', Turkey: 'TR', 'Trinidad and Tobago': 'TT', Tuvalu: 'TV', Taiwan: 'TW', Tanzania: 'TZ', Ukraine: 'UA', Uganda: 'UG', 'U.S. Minor Outlying Islands': 'UM', 'United States': 'US', Uruguay: 'UY', Uzbekistan: 'UZ', 'Vatican City': 'VA', 'Saint Vincent and the Grenadines': 'VC', Venezuela: 'VE', 'British Virgin Islands': 'VG', 'U.S. Virgin Islands': 'VI', Vietnam: 'VN', Vanuatu: 'VU', 'Wallis and Futuna': 'WF', Samoa: 'WS', Kosovo: 'XK', Yemen: 'YE', Mayotte: 'YT', 'South Africa': 'ZA', Zambia: 'ZM', Zimbabwe: 'ZW',};var adapter = OptiMonk.Visitor.createAdapter();const countryEn = adapter.attr('_country_en');const code = countries[countryEn] || null;adapter.attr('country_code_variable', code);if (code === null) { adapter.removeAttr('country_code_variable');}// if we want flag image// const countryCodeLowerCase = code?.toLowerCase();// let omImageTag = document.querySelector('img.om-image');// let omImageSource = document.querySelector('.om-image source');// if (code !== null) {// let replacedFlag =// 'https://flagicons.lipis.dev/flags/4x3/${countryCodeLowerCase}.svg';// omImageSource.setAttribute('srcset', replacedFlag);// omImageTag.setAttribute('src', replacedFlag);// }function getFlagEmoji(countryCode) { if (countryCode !== null) { const codePoints = countryCode ?.split('') .map((char) => 127397 + char.charCodeAt()); return String.fromCodePoint(...codePoints); }}const emojiFlag = getFlagEmoji(code);adapter.attr('emoji_flag', emojiFlag);/* if on windows */if (/windows/i.test(navigator.userAgent)) { document.querySelector('.om-overlay').classList.add('win');}3. Use Dynamic Text
Use the following Dynamic Text in your campaign: [[attribute:emoji_flag]]
It is important that the EMOJI FLAG has italic formatting!
7. Things to keep in mind when using Dynamic Text
❗ You must pay attention that there is no typo in the used characters. In case you have any typos, the used text will show up instead of the text replacement.
❗ The name of the variable must match the name used in your JavaScript code. It cannot contain any special characters, and it also differentiates between upper-case and lower-case letters.
✉️ If you need any further help or have any questions, please let us know at [email protected], and we would be happy to assist you :)