Skip to main content

Extend widget UI

In this tutorial, we'll explore how to extend your widget UI. Slots allow you to dynamically insert and update HTML elements within your widget, providing flexibility in customizing the widget's content.

Usage​

Ecah widget includes two methods for managing slots:

  • setSlot: Sets a single slot with a specified HTML element.
  • setSlots: Sets multiple slots at once.

Setting a Single Slot​

To set a single slot, you can use the setSlot method. This method requires the name of the slot and the HTML element you want to insert into the slot.

// Define the slot name and the HTML element
const slotName = 'header'
const headerElement = document.createElement('div')
headerElement.innerHTML = '<h1>Header Content</h1>'

// Set the slot using setSlot
widget.setSlot(slotName, headerElement)

Setting Multiple Slots​

To set multiple slots at once, you can use the setSlots method. This method accepts an object where the keys are slot names and the values are HTML elements.

// Define the slots and their corresponding HTML elements
const slots = {
  header: document.createElement('div'),
  footer: document.createElement('div'),
}

slots.header.innerHTML = '<h1>Header Content</h1>'
slots.footer.innerHTML = '<p>Footer Content</p>'

// Set the slots using setSlots
widget.setSlots(slots)