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

1
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

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement()
3
4
if (selectedElement?.customAttributes) {
5
6
  // Get All Custom Attributes
7
  const customAttributes = await selectedElement.getAllCustomAttributes()
8
  console.log(customAttributes)
9
10
}

Designer Ability

Checks for authorization only

element.getCustomAttribute(name)

Get custom HTML attributes from an element by name.

Syntax

1
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

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement()
3
4
if (selectedElement?.customAttributes) {
5
6
  // Get Custom Attribute by Name
7
  const customAttribute = await selectedElement.getCustomAttribute('tooltip')
8
  console.log(customAttribute)
9
10
}

Designer Ability

Checks for authorization only

element.setCustomAttribute(name, value)

Set a custom HTML attribute for an element.

Syntax

1
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

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement()
3
4
if (selectedElement?.customAttributes) {
5
6
  // Set Custom Attribute
7
  await selectedElement.setCustomAttribute("tooltip", "my tooltip value")
8
9
}

Designer Ability

element.removeCustomAttribute(name)

Remove a custom HTML attribute from an element.

Syntax

1
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

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement()
3
4
if (selectedElement?.customAttributes) {
5
6
  // Remove Custom Attribute
7
  await selectedElement.removeCustomAttribute("tooltip")
8
9
}

Designer Ability