In this guide, we will describe how to add and customize attributed text on your onboarding screens. This allows you to change the text style within the text, such as highlighting certain words in a different color, font size, or style.
Note that this customization is available for titles and subtitles in every screen, but not for header buttons, footer buttons, and tables.
Example Scenario
Original Text: Discover the benefits of intermittent fasting.
Custom Style: Highlight the words "intermittent fasting" in a different style.
Steps to Implement 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 TC & PP links.
3. Select the Desired Screen - Add the screen (if it is not added already), Click on the Pencil icon to open the edit screen.
4. On the edit screen, find the title or subtitle where you want to add attributed text.
In this example, we will use the title.
5. Click on the settings icon next to the title or subtitle to expand text settings.
6. Select 'Template' Options
Click on the dropdown under the text settings and select 'Template' options.
For this example, we clicked on settings for the title.
Here 'labels' and 'links' settings will appear.
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.
The label will appear in the list. You will see a range of settings for text customization.
8. Add the Attribute Tag Inside the Text
Modify the title text to include the attribute tag around the words you want to customize.
Example:
Discover the benefits of <attribute>intermittent fasting.</attribute>
By default, the text style of the title will apply to the text inside the tag.
9. Customize the Text Style
Edit the text style within the label named 'attribute'.
You can customize:
Font family
Font size
Line height
Text color
Font weight
Background color
You can follow the same steps to update the text inside the subtitle.
Click on Save and Close to save changes.
In the next articles you can find how to add inside tag:
links to external URLs(ex: terms and conditions)
Use Dynamic Data in Attributed Text from another screens (for example name that user has entered, options from the table, data from the picker)