Adding Wized Attributes in Custom Sites

Wized attributes are essential for identifying and configuring elements on your custom website. These custom HTML attributes tell Wized which elements should be managed by the configurator.

Understanding Wized Attributes

Wized uses custom HTML attributes to identify elements that should be managed by the configurator. The main attributes are:

Attribute	Purpose
wized	Main attribute to identify interactive elements
wized-cloak	Prevents content flash during page load
wized-loader	Identifies loader elements

Adding Attributes in Your HTML

Method 1: Direct HTML Editing

Add Wized attributes directly to your HTML elements:

<!-- Basic Wized element -->
<div wized="your-element-name">Content here</div>

<!-- Element with cloak to prevent flash -->
<div wized="form-section" wized-cloak>Form content</div>

Method 2: Using JavaScript

If you need to add attributes dynamically:

const element = document.getElementById('my-element');
element.setAttribute('wized', 'your-element-name');

Method 3: Using a Build Tool

If your custom site uses a build tool (React, Vue, Svelte, etc.):

// React example
<div wized="your-element-name">Content here</div>

// Vue example
<div :wized="'your-element-name'">Content here</div>

TIP

Choose the method that best fits your site's architecture. For static HTML sites, direct HTML editing is recommended. For dynamic sites, use JavaScript or your framework's binding syntax.

Best Practices

1. Use descriptive names - Choose clear, unique names for your Wized attributes that describe the element's purpose

2. Keep it organized - Use a consistent naming convention (e.g., page-section-element)

3. Document your elements - Keep a list of all Wized-enabled elements and their purposes

4. Test thoroughly - After adding attributes, verify they appear correctly in the Wized configurator

Learn More

To learn more about attributes, check our Wized Attribute documentation.