In Webflow, you can use native elements, styles, and settings to create standard HTML attributes like href, class, and id.

However, Custom Attributes extend this capability. Custom attributes allow developers to attach additional, specialized data to elements, helping broaden the scope of a site's functionality and interactivity. In Webflow, they are especially useful for enriching custom code, particularly when integrated with CMS data.

To effectively use the methods described below, choose an element with a CustomAttributes property of true. This property is read-only, so it's important to select elements that have this attribute. Using these methods with elements that don't have this property will return an error.

Methods

element.getAllCustomAttributes()

Get all custom HTML attributes from an element.

Syntax

element.getAllCustomAttributes():Promise<Array<NamedValue>>

Returns

Promise<NamedValue> - {name: string, value: string}

A Promise that resolves to an array of NamedValue custom attribute objects.

Example

// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.customAttributes) {

  // Get All Custom Attributes
  const customAttributes = await selectedElement.getAllCustomAttributes()
  console.log(customAttributes)

}

Designer Ability

Checks for authorization only

element.getCustomAttribute(name)

Get custom HTML attributes from an element by name.

Syntax

element.getCustomAttribute(name: string):Promise<null | string>

Parameters

• name : String - The name of the custom attribute.

Returns

Promise<String>

A Promise that resolves to the value of the named custom attribute.

Example

// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.customAttributes) {

  // Get Custom Attribute by Name
  const customAttribute = await selectedElement.getCustomAttribute('tooltip')
  console.log(customAttribute)

}

Designer Ability

Checks for authorization only

element.setCustomAttribute(name, value)

Set a custom HTML attribute for an element.

Syntax

element.setCustomAttribute(name: string, value: string): Promise<null>

Parameters

• name : String - The name of the custom attribute.
• value : String - The value of the custom attribute

The value of the named custom attribute.

Returns

Promise<null>

A promise that resolves to null

Example

// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.customAttributes) {

  // Set Custom Attribute
  await selectedElement.setCustomAttribute("tooltip", "my tooltip value")

}

Designer Ability

element.removeCustomAttribute(name)

Remove a custom HTML attribute from an element.

Syntax

element.removeCustomAttribute(name: string): Promise<null>

Parameters

• name : String - The name of the custom attribute.

Returns

Promise<null>

A Promise that resolves to null

Example

// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.customAttributes) {

  // Remove Custom Attribute
  await selectedElement.removeCustomAttribute("tooltip")

}

Designer Ability