In this guide, we describe how to use user input in attributed text. This allows dynamic display of user-entered information, selections from lists, or values from pickers on subsequent screens.
Examples of Use:
The user has entered their name, and you want to display it on the next screens.
The user has selected items from a list, and you want to display these items on the next screens.
The user has selected a value on the picker, and you want to display it on the next screens.
Add a label for the Attributed text
Open the Correct Project - Ensure you are in the correct project where you intend to create Web onboarding.
2. Create or Open an Onboarding If you haven’t created an onboarding yet, do so. Otherwise, open the existing onboarding screen where you want to add the attributed text with the link.
3. Add some screens on the flow - Make sure to add the necessary screens where users will input data (e.g., entering their name, selecting items from a list, or picking a value). These screens must be present in the sequence to use their data.
4. Select the screen where you want to display the user input data. Click on the Pencil icon to open the edit screen.
5. On the edit screen, you can find the title or subtitle where you'd like to add attributed text.
6. Click on the settings icon next to the title or subtitle to expand text settings.
7. lick on the dropdown under the text settings and select 'Template' options.
7. Add a New Label
To add attributed text, click on the +ADD button to create a new label.
Enter a unique label name in the pop-up and click Add.
Add and Set Up the Link for User Data
In the text settings, find the Links section.
Click on the +ADD button to add a new link.
2. Fill data in the opened window:
Enter Name: The name must be the SAME as the tag name. In our example, it will be 'attribute'.
Select Type: Choose 'Screen'.
Select the Screen from the List: Choose the screen from which you want to use the data. The list will reflect the screens with user input that were added before the current screen.
Add the Attributed Text with User Input into Your Text
Now, you have to add the added label name in tag <attribute> into your text and insert the name of the link inside using @.
Example:
Harness the power of intermittent fasting, <attribute>@name</attribute>.
This means that the data from the selected screen (e.g., where the user entered their name) will be used and inserted inside the tag.
Customize the Tag Text Style
You can customize the tag text style by adjusting settings (by default, title settings are used).
Result
If the user enters any data on the screen with the text field, this data will reflect on the screen with the tag and link. By the same way, you can choose screens with table selections and pickers and use their data on subsequent screens.