Set settings (Beta)

element.setSettings(settings)

Set one or more settings on an element.

Pass an object with one or more setting keys and their new values. A value can be a static value, a binding reference to a data source, or null to reset the setting to its default and disconnect any existing binding. The update is undoable via the Designer’s undo stack.

Beta

These methods are in public beta and may change with future releases.

Syntax

1element.setSettings(settings: SetSettingsInput): Promise<Record<string, ResolvedValue | BindingInput | null>>

Related types:

1// ResolvedValue (static values)
2type ResolvedValue =
3 | string
4 | number
5 | boolean
6 | null
7 | LinkResolvedValue
8 | VideoResolvedValue
9 | RichTextResolvedValue;
10
11// BindingInput (bind to a data source)
12type BindingInput =
13 | { sourceType: 'prop'; propId: string }
14 | { sourceType: 'cms'; collectionId: string; fieldId: string }
15 | { sourceType: 'page'; fieldKey: string }
16 | { sourceType: 'locale'; fieldKey: string }
17 | { sourceType: 'localeItem'; fieldKey: string };

Parameters

  • settings: Record<string, ResolvedValue | BindingInput | null> — An object mapping setting keys to new values.

Value types

ValueDescription
Static value (string, number, boolean, object)Sets the setting to a fixed value.
Binding reference object with sourceTypeBinds the setting to a data source.
nullDisconnects any existing binding and resets the setting to its default.

Binding value shapes

Use an object with a sourceType field to bind a setting to a data source:

1// Bind to a parent component prop
2{ sourceType: 'prop', propId: 'prop_3' }
3
4// Bind to a CMS field
5{ sourceType: 'cms', collectionId: 'col_abc123', fieldId: 'field_author' }
6
7// Bind to a locale field
8{ sourceType: 'locale', fieldKey: 'languageCode' }
9
10// Bind to a page field
11{ sourceType: 'page', fieldKey: 'seoTitle' }

Pass null as the value to disconnect any binding and reset the setting to its default.

Returns

Promise<Record<string, ResolvedValue | BindingInput | null>>

A Promise that resolves to an object with the same shape as the input, reflecting the values that were set.

Example

1const element = await webflow.getSelectedElement()
2
3if (element) {
4
5 // Set static values
6 await element.setSettings({ tag: 'h1', domId: 'my-id' })
7
8 // Bind a setting to a component prop
9 await element.setSettings({ domId: { sourceType: 'prop', propId: 'prop_3' } })
10
11 // Reset a setting to its default and disconnect any binding
12 await element.setSettings({ altText: null })
13
14}

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canEditAnyAnyCanvasAny