HTML Attributes

Wized makes use of HTML attributes to provide key functionalities. These attributes are added to the HTML elements in your Webflow project to enable Wized to provide the functionalities you need.

Check Webflow University's lesson on Custom Attributes to learn more about how to add custom HTML attributes to your Webflow project.

wized

The wized attribute is the main attribute that you will use to identify the elements that you want to interact with Wized.

To start interacting with an element in Wized:

1. Add a wized attribute to the element in Webflow with a descriptive value. For example: wized="submit_logout"
2. Publish your Webflow project.
3. Go to the Wized Configurator and reload the Canvas. Wized will automatically identify the elements in the current page. If you need to trigger a full project rescan, you can do so by clicking on the Rescan attributes button.

wized-cloak

This attribute is helpful to apply certain styles to an element while Wized is loading on the page. The most common use case is to hide an element while Wized is loading to prevent content flickering.

wized-cloak will remain on the element until Wized is fully loaded. Once Wized is loaded, the attribute will be removed from the element. This allows you to apply CSS styles that target the wized-cloak attribute like:

[wized-cloak] {
  display: none;
}

You are not limited to targetting the wized-cloak key, but also can target specific values. For example, you could have different styles based on the value of the wized-cloak attribute:

[wized-cloak='hide'] {
  display: none;
}

[wized-cloak='fade'] {
  opacity: 0;
}

[wized-cloak='blur'] {
  filter: blur(5px);
}

wized-loader

Similar to wized-cloak, this attribute can be added to an element and it will be removed by Wized afterwards. The main difference is that wized-loader will wait for requests to finish before being removed.

You can specify which requests should be waited for by adding them as a whitespace-separated list of request IDs. For example:

wized-loader="load_posts load_comments"

In this case, the wized-loader attribute will be removed from the element once either the load_posts or load_comments requests are performed.

This attribute is useful when you want to show a loader loading state for an element while waiting for data to be fetched. For instance, you could have a loader that is hidden by default but has the wized-loader attribute added to it with the following style:

[wized-loader] {
  display: flex;
}

This would make the element visible while waiting for the data to be fetched, and then hide it once the data is available.