Get display name (Beta)

`slot.getDisplayName()`

Get the display name of the slot.

The display name reflects any user-customized label applied in the Designer and may differ from the prop name defined in the component source. When comparing slot names programmatically, verify that the value matches the expected label rather than the original prop name.

Beta

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

Syntax

1 slot.getDisplayName(): Promise<string>

Returns

Promise<string>

A Promise that resolves to the slot’s display name, which may reflect user customization applied in the Designer rather than the original prop name.

Example

1 // Get a component instance on the page
2 const elements = await webflow.getAllElements();
3 const componentInstance = elements.find(el => el.type === 'ComponentInstance');
4 
5 if (componentInstance?.type === 'ComponentInstance') {
6 
7   // Get the slots on the instance
8   const slots = await componentInstance.getSlots();
9 
10   // Print the display name of each slot
11   for (const slot of slots) {
12     const name = await slot.getDisplayName();
13     console.log(name); // e.g. 'Content' or 'Sidebar'
14   }
15 
16 } else {
17   console.log('No component instance found');
18 }

Designer Ability

Checks for authorization only.

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

1	// Get a component instance on the page
2	const elements = await webflow.getAllElements();
3	const componentInstance = elements.find(el => el.type === 'ComponentInstance');
4
5	if (componentInstance?.type === 'ComponentInstance') {
6
7	// Get the slots on the instance
8	const slots = await componentInstance.getSlots();
9
10	// Print the display name of each slot
11	for (const slot of slots) {
12	const name = await slot.getDisplayName();
13	console.log(name); // e.g. 'Content' or 'Sidebar'
14	}
15
16	} else {
17	console.log('No component instance found');
18	}