Wized Docs

Appearance

Set Text ​

The Set Text functionality allows you to display dynamic text in an element on your website. You can customize welcome messages, show real-time information retrieved from an API, or create any other interactive text-based experience.

How It Works ​

  1. Choose the type of text: Select whether you want to display plain text, HTML, or Markdown.
  2. Define the content: Use the Function Editor to specify the text that will be displayed in the element. Here you can:
    • Use fixed values: Write the text directly in quotes.
    • Access dynamic data using: Use Wized prefixes (c, v, i, f, r, n) to access cookies, variables, inputs, API responses, navigation data, and more.
    • Create conditional logic: Use if...else, ternary operators, and other JavaScript tools to customize the text based on different conditions.

Practical Examples ​

  • Display a personalized welcome message:

Before showing the code, we are checking if the user is logged in. If so, their name will be displayed; otherwise, a general greeting will be shown.

javascript
// If the user is logged in, show their name. Otherwise, show a general greeting.

return c.userLoggedIn ? `Welcome back, ${r.get_user.data.name}.` : 'Hello.';
  • Display the price of a product from an API:
javascript
// Retrieves the price of a product from an API and formats it.

return `${r.product_request.data.price.toFixed(2)}`;
  • Display a list of items in HTML format:
javascript
// Generates an HTML list from an array of items.

const listitems = v.myList.map((item) => `<li>${item}</li>`).join('');

return `<ul>${listitems}</ul>`;
  • Show an error message if a condition is not met:
javascript
// Checks if an input field is empty and shows an error message if necessary.

return i.name.value.trim() === '' ? 'Please enter your name.' : '';

Considerations

  • If you choose the HTML or Markdown format, ensure that the text is valid and properly structured.
  • Use the Results View in the Function Editor to test your code and verify that the text displays correctly, paying special attention to possible syntax errors in the code.