ElementsElement Types & MethodsSlots

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

1slot.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
2const elements = await webflow.getAllElements();
3const componentInstance = elements.find(el => el.type === 'ComponentInstance');
4
5if (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 AbilityLocaleBranchWorkflowSitemode
canDesignAnyAnyCanvasAny