Substitution of Data from the Site in Widgets

Reteno can use data from your website to personalize widget text and prefill form fields.

Five data types are available for personalizing text with Merge Tags:

• Data layer is a structure that stores data about user actions on the website. For example, a widget can display an offer for the product category that a visitor is currently viewing.
• URL query parameter is a key=value pair in the part of a URL after ?, for example, https://shop.com/product/123?coupon=PARTNER25. You can use it to pass promo codes, traffic sources, and other values.
• JavaScript variable is a variable in the global scope of the page's JavaScript code. It can pass values such as cart total, subscription status, or loyalty tier.
• Cookie stores data in browser cookies that belong to your domain. Cookie values can personalize widgets based on referral source, login status, or previous user actions and persist across sessions.
• Local storage stores data in your domain's browser storage. Its values also persist across page reloads but, unlike cookies, are not sent to the server with every request. Local storage is suitable for storing page-view counts, completed actions, user preferences, and other client-side data.

You can use these values in two ways:

• Merge Tags insert data into headings, descriptions, buttons, and other text elements. All five data types are available for Merge Tags.
• Prefill inserts values into form fields so visitors do not have to enter information that is already known. All five data types listed above are available for prefill. You can also select Static field — a contact field in Reteno, such as Email.

Finding Data in the Data Layer on Your Website

Open Developer Tools in your browser: press Ctrl+Shift+I on Windows or Cmd+Option+I on macOS. You can also right-click the page and select Inspect.

1. Open the Console tab.
2. Enter dataLayer and press Enter.
3. Expand the list to review the Data layer structure and find the required event or parameter.

Using URL Query Parameters

Add the required parameter to a link to your website, for example, https://shop.com/product/123?coupon=PARTNER25. When a visitor follows the link, you can use the parameter value in widget text or a form field. For example: Enter code PARTNER25 — the 25% discount will be applied automatically.

To pass several values, separate the parameters with &:

https://shop.com/product/123?coupon=PARTNER25&source=partner

Setting Up JavaScript Variables on Your Site

To pass variable values to Reteno, add the script:

• directly to your website code;
• or to a Custom HTML tag in Google Tag Manager (more).

Script format:

<script>
  reteno('addVariables', { variableName: value });
</script>

For example, to pass the subscription status:

<script>
  reteno('addVariables', { subscribed: false });
</script>

You can also pass several variables at once:

<script>
  reteno('addVariables', {
    user_age: 25,
    user_status: 'vip'
  });
</script>

Values are stored until the page is reloaded or the visitor navigates to another page, similar to Data layer data.

Adding Merge Tags to Widget Text

1. Go to Site → Widgets, then open an existing widget or create a new one.

2. Select the text you want to personalize, click Merge tag, and choose Data layer, URL query parameter, JavaScript variable, Cookie, or Local storage.

3. Configure the Merge Tag according to the selected source.

Data Layer

• Data layer event — specify the event name.
• Path to variable — enter the exact path to the required value in the Data layer.
• Example value — add a sample value to preview the widget in the editor.

URL Query Parameter

Enter the parameter name and an example value to preview the widget.

JavaScript Variable

Enter the variable name and an example value to preview the widget.

Cookie

Enter the cookie name and an example value to preview the widget.

Local Storage

Enter the Local storage key and an example value to preview the widget.

Prefilling Form Fields

Prefill inserts information that is already known about a visitor into a form. For example, you can add the value of the Email contact field from Reteno, a first name from the Data layer, an email address from a URL parameter, or a phone number from a cookie. The visitor only needs to check the value and submit the form.

Prefill is available for the following fields:

• Email;
• Phone;
• First Name;
• Last Name;
• text fields.

The following options are available:

• Static field — a contact field in Reteno, such as Email;
• URL query parameter — the value of a URL parameter;
• JavaScript variable — the value of a JavaScript variable;
• Local storage — a value from browser storage;
• Cookie — a value from a cookie that belongs to your domain;
• Data layer event — a parameter value from a Data layer event.

To configure prefill:

1. Open the widget in the editor and select the required form field.
2. Enable prefill in the field settings.

3. Select one of the available options.
4. Complete the settings displayed for the selected option:

• select the required Reteno contact field for Static field, for example, Email;
• enter the parameter name for URL query parameter;
• enter the variable name for JavaScript variable;
• enter the key for Local storage;
• enter the cookie name for Cookie;
• specify the event and path to the required value for Data layer event.

5. Save the widget and test prefill on your website with sample data.

If the system cannot find a value in the selected source or contact field, the field is not prefilled. It displays its configured placeholder, and the visitor can enter the value manually.

Prefill Examples

When values differ between visitors, test the widget with several sample datasets.

Data Layer Use Cases

Displaying the Viewed Product Category in a Widget

• Scenario:

A user browses products in a specific category on your website. You want to grab their attention by displaying a pop-up offering a 10% discount if they purchase two items from the category they are currently viewing.

• Setup:

1. Data layer event: Use the view_item event to retrieve data.

2. Path to variable: Open Developer Tools, locate the view_item event in the Data layer.

Define a property containing product category information (in our example, item_category).

Right-click on the line containing item_category, and copy its property path.

Paste it into the Path to variable field. Remove any array indices at the beginning (e.g., 13 in our example).

3. Example value: Enter a sample category (e.g., Jewellery) in the Example value field to preview how the widget will look.

Abandoned Cart Reminder with Dynamic Product Information

• Scenario:

A user adds an item to the cart but does not proceed to checkout within a certain period. This behavior suggests hesitation or distraction. To re-engage them, you can trigger a pop-up reminding them to complete the purchase, displaying the product names in their cart along with a special incentive.

• Setup:

1. Data layer event: add_to_cart

2. Path to variable: ecommerce.items[0].item_name

3. Example value: Item name

After saving the pop-up, configure its calling rules.

Increasing the Total Order Value

• Scenario:

To encourage customers to increase their cart total, you can display a dynamic message like: Spend $300 to get a 10% discount. Your current cart total is N. Here, N is dynamically replaced with the current cart value.

• Setup:

1. Data layer event: view_cart

2. Path to variable: checkout.total_value

3. Example value: Total value

JavaScript Variable Use Cases

Personalizing Offers Based on Loyalty Tier

• Scenario:

You want to show VIP customers a pop-up with an exclusive offer, while other visitors see a standard promotion. The loyalty tier is available in your system after the user logs in.

• Setup:

1. Pass the loyalty tier via a JS variable:

<script>
  reteno('addVariables', { loyalty_tier: 'vip' });
</script>

2. Use the variable as a Merge Tag in the pop-up text: "As a {{loyalty_tier}} program member, here's a special offer just for you."

Or create a separate pop-up for VIP customers and set the condition in calling rules: JavaScript variable loyalty_tier equals vip.

Cookie Use Cases

Personalized Welcome for Visitors from a Partner Site

• Scenario:

A visitor arrives at your site via a referral link from a partner. You want to show them a personalized pop-up with an exclusive promo code or special welcome message on their first visit.

• Setup:

Cookie name: referral, example value: partner123.

The Merge Tag will substitute the value into the pop-up text: "Welcome from {{referral}}! Here's a special 15% discount just for you."

Targeting by Viewed Categories

• Scenario:

Your site stores the product categories a user has browsed in a cookie. You want to show a relevant pop-up — for example, an accessories offer for the category that interested the visitor.

• Setup:

Cookie name: lastViewedCategory, example value: Shoes.

The Merge Tag will substitute the value into the pop-up text: "New {{lastViewedCategory}} collection is here!"

Local Storage Use Cases

Personal Recommendation Based on Quiz Results

• Scenario:

Your site has a product configurator or quiz. After completion, the result is stored in Local storage. You want to show a pop-up with a personal recommendation — immediately or during the next visit.

• Setup:

Local storage key: recommended_product, example value: Running shoes.

The Merge Tag will substitute the value into the pop-up text: "Based on your answers, {{recommended_product}} are the right fit for you. Here's 10% off your first order."

Bonus Points Reminder

• Scenario:

After login, your site stores the user's bonus point balance in Local storage. You want to remind them in a pop-up to encourage a purchase.

• Setup:

Local storage key: bonus_points, example value: 350.

The Merge Tag will substitute the value into the pop-up text: "You have {{bonus_points}} bonus points — use them before the end of the month."

Potential Issues

Merge Tags

Prefill

If the selected source or contact field does not contain the required value, the field remains available for manual input and displays its configured placeholder.