How To: Display answers back to the user using Templating

You can use Embeddables’ Templating feature, a simple templating syntax available in the Builder, to display User Data values within text components or components with text elements.

This allows you to create dynamic, personalized content that updates based on user input or computed values.

​

Basic Templating Syntax

To display a User Data value in text, wrap the key name in double curly braces:

{{key_name}}

You can do this inside Plain Text and Rich Text components, as well as inside text fields of other components, such as Labels in Button components.

​

Common Examples

Here are some common ways to use templating:

​

Display user input

If you’ve collected a user’s name through an input component with the key first_name, you can display it like this:

Thanks for that info, {{first_name}}!

​

Display computed values

If you have a Computed Field that calculates a value (like BMI), you can display the result:

Your BMI is {{bmi}}

​

Display nested properties

For User Data that contains nested objects (like API responses), you can access nested properties using dot notation:

Error: {{api_response.error_message}}

​

Tips for using templating

• Make sure the key exists in User Data before trying to display it
• For numbers that need formatting, consider using a Computed Field to format the value first
• If the value might be undefined, you can provide a default value using a Computed Field
• Keys are case-sensitive and must match exactly what’s in the User Data

​

Computed Field + Templating Example: Full name display

Here’s a complete example that shows how to display a user’s full name using both direct input values and a Computed Field:

1. Collect the first and last name in separate input components with keys first_name and last_name
2. Create a Computed Field called full_name that combines them:

function result(userData) {
  return `${userData.first_name} ${userData.last_name}`;
}

3. Display the full name using templating:

Welcome back, {{full_name}}!