Append (Beta)

`slot.append(component)`

Add a new component instance as the last child of the slot.

Only component instances can be added to slots. Components from installed libraries are not supported; only components in the site’s own component library can be added to a slot. This action is undoable via the Designer’s undo stack.

Beta

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

Syntax

1 slot.append(component: Component): Promise<null>

Parameters

component: Component — The component definition to instantiate and insert at the end of the slot.

Returns

Promise<null>

A Promise that resolves when the component instance is added.

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 first slot on the instance
8   const slots = await componentInstance.getSlots();
9   const firstSlot = slots[0];
10 
11   if (firstSlot) {
12 
13     // Find the component to add
14     const components = await webflow.getAllComponents();
15     const cardComponent = await webflow.getComponentByName('Card');
16 
17     if (cardComponent) {
18 
19       // Append a component instance to the slot
20       await firstSlot.append(cardComponent);
21 
22     }
23   }
24 
25 } else {
26   console.log('No component instance found');
27 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canDesign	Any	Any	Canvas	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 first slot on the instance
8	const slots = await componentInstance.getSlots();
9	const firstSlot = slots[0];
10
11	if (firstSlot) {
12
13	// Find the component to add
14	const components = await webflow.getAllComponents();
15	const cardComponent = await webflow.getComponentByName('Card');
16
17	if (cardComponent) {
18
19	// Append a component instance to the slot
20	await firstSlot.append(cardComponent);
21
22	}
23	}
24
25	} else {
26	console.log('No component instance found');
27	}