Using variables like user input text inside interactions

Variables enable the integration of dynamic text generated from user-provided values. You can use the values directly or provide a formula for more complex use cases.

This feature is designed to address a variety of real-world applications, including loan and investment calculations, language translations, personalised titles and texts, and much more.

How to incorporate dynamic text into an interaction

 

1.   Insert Text Element from element picker or if you already have the element, you can skip this step.

2.   Select the text that you wish to get the dynamic data. 

 

3.   Keeping the text selected, navigate to the styles tab on the right sidebar and click on the variables icon:

 

4.   After clicking the button, a dialog box will appear, allowing you to modify the formula:

 

How to use a Formula field?

 

In a Variable formula dialog, the formula field is the place where you set-up the formulas.

The left hand side of the equal sign (=) is the name of the variable, which by default, is the text you selected. The right hand side is the operation that will determine the value of the variable or name.

For example, let's assign a value to the text we selected, which is “Text” and save it. 

In the preview mode the “Text” variable has the value that we assigned which is 5.

 

Editing existing variables

There are two different ways to open the formula dialog.

1. Double click on the variable directly in Text element
2. Select the variable in Text element and click variables icon in the styles tab

 

Using variables

In the Variables formula dialog, you can see the list of available variables. The list contains all the variables created from formula buttons, custom data fields and element variables. You can click on the variable chip and it will get inserted into the formula field.

For using an existing variable,  click on the variable chip name under the “Variables in this interaction” header. 

             

   

 

Create new variables

For creating a new variable,  type the desired variable name inside the formula input:

 

Click on the new variable name, next to the Create variable. After this, the list of the variable will be populated with the newly created variable as well:

 

Variables can store various types of data, including:

• Text: 

variableName = "Hello" 

• Formula calculation:

variableName = 3 + 10 

• Dynamic variable value: 

variableName = ${name} 

• Calculation of variables values

variableName = ${price} * ${amount} 

• Values from elements: can be from inputs, slider elements etc.

variableName = ${slider_years}

variableName = ${input_name}

 

Supported operations in formula

In the previous example, we utilised a static value that did not involve any calculations. Now, let's explore how to leverage the formula field to perform dynamic calculations.

We can perform various mathematical operations, including Addition, Subtraction, Multiplication, and Division.

 

Example:

• Addition: 2 + 5 results in 7.
• Subtraction: 7 - 5 results in 2.
• Multiplication: 2 * 3 results in 6.
• Division: 9 / 3 results in 3.
• Exponentiation: 2 ^ 3  results in: 8
  
  

Parenthesis can be used in the formula field to perform more complex calculations and for controlling the order of operations. 

Example:

200 - (27 / 3) * 5 + (7 - 2 *  3)

 

Available functions

• abs(number):  gets the absolute value of a number. Negative numbers are converted to their positive counterparts, while positive numbers remain unchanged.

Example:

abs(-2) // output: 2

• round(number, precision, locale): to round a decimal number, specify the number you wish to round and the precision, which indicates how many digits you want to display after the decimal point. Additionally, you can choose a locale to format the number according to your language's conventions (for example, using "fi" for Finnish or "en" for English).

Example:

round(2.489, 2); // output: 2.49

round(5.782, 2, "fi") // output: 5,78

round(4.256, 1, "en") // output: 4.3

• if(condition, truthy, falsy): it returns a truthy value if the condition is neither zero nor an empty string; otherwise, it returns the value associated with the falsy parameter.
• equal(a, b): it returns true if the a and b are exactly the same value.
• toNumber(value): it converts string value to a number

 

Real use case interaction that uses variable formulas

 

Many banks and insurance companies offer online calculators that allow users to estimate loan amounts, insurance premiums, and more. The interaction described here functions as a loan calculator, providing users with insights into their payment obligations based on specific interest rates and loan durations. This interactive tool helps visitors in determining an appropriate borrowing amount, ultimately streamlining the loan application process.

In this interaction, users will input the desired loan amount they wish to borrow and select the repayment duration in years. The interaction will then calculate both the monthly repayment amount and the total payment due, based on a fixed interest rate. Let’s explore how the loan calculator interaction was created using variables.

Amount field: This is a numeric input element that has an initial value of 10,000.

Slider: This is a slider element that has the following settings:

 

1 year: This text element displays a dynamic value labeled as "v". The value is the one form the slider element, through a formula field.

 

Monthly repayment: This text element displays a dynamically calculated amount, derived from a formula field.

 

In the formula mentioned above, the round() function is utilised to format the result to two decimal places. The remainder of the formula calculates the monthly repayment amount, which is expressed as =((principal + interest) / months).

Monthly interest rate: This is a text element which has a fixed value of 2.8 set from the formula.

 

Total amount to pay:  This is a text element where the amount value is dynamic data calculated using formula field.

 

In the formula, the round() function is utilised to ensure that the result displays 2 decimals. The rest of the formula calculates the total payment amount using the standard mathematical expression Amount = P(1 + RT), where P represents the principal amount, R is the interest rate, and T is the time period. The additional elements in this interaction are designed solely for user interface purposes.

 

Note: Variables are not yet available to every customer.

 

---

By incorporating variables and formulas directly into text elements, this tool enables a range of applications, including complex calculations and custom content generation. Its flexibility in handling real-time data makes it an invaluable tool for industries like banking, insurance, and personalised marketing. This feature can significantly enhance user interaction and streamline complex processes.