Intelligence Center

Appearance

Elements ​

In this lesson, you'll learn how to add Wized attributes to Webflow elements, so that you can access, and manipulate these elements inside of the Configurator.

In this lesson, you'll learn about Wized Attributes.

We'll learn:

  1. What are Wized attributes?
  2. How to use Wized attributes?
  3. Best practices for naming Wized elements

What are wized attributes used for? ​

In order to add functionality to a web project in Wized, you need to add wized attributes to your Webflow project.

These attributes act as hooks that allow the project to connect to Wized. Adding the attribute wized to any Webflow element will turn it into a Wized element, which can be used in a Wized project for a variety of purposes. Here is how to create a Wized element:

  • Add an attribute in Webflow, with a name of wized or w-el
  • Set a descriptive name for the value f.e. submit_homepageForm
  • Publish your Webflow project
  • Go to your Wized Configurator, and click on the Refresh attributes button Once the elements are set up, they can be found in the Actions panel and in Data In and Data Out when configuring requests. You will need these attributes when building requests, Actions, and Authentication in Wized.

Now let's cover the topic on more depth.

A practical example of wized attributes ​

To demonstrate a practical use of Wized attributes, let's consider a scenario in which we want to display items from an external source like Airtable on our site.

First, we need to choose a template element on our site and add the wized attribute to it.

Next, we need to add wized attributes to any element that will be used inside the template, such as headings, images, and paragraphs.

Once that's done, and we published the Webflow projects, we can access these attributes in Wized, and start building our functionality. We can use these elements, to render our list, replace headings, images, and paragraphs, and even for triggering requests.

How to name your wized attributes ​

We recommend using descriptive names for elements to stay organized.

Also avoid using hyphens or spaces, since these are likely going to lead to errors.

For example, you could use a name like this:
trigger_loadUser ✅

Not this:
Trigger Load-user 🚫

With this knowledge, we can create a range of functionalities in Wized using our Wized elements. In upcoming lessons, we will explore these possibilities further.