Add a landing section

Use api.ui.registerLandingSection() when a plugin owns a complete landing-page section. Use an outlet for smaller additive content.

Register the section

api.ui.registerLandingSection({
  id: 'featured-builds',
  placement: 'between-featured-brands-and-new-arrivals',
  order: 20,
  title: {
    en: 'Featured builds',
    fr: 'Configurations en vedette',
  },
  description: 'Explore vehicle and wheel combinations selected by our team.',
  render(container, context) {
    const article = document.createElement('article')
    const title = document.createElement('strong')
    const button = document.createElement('button')

    title.textContent = 'FEATURED_BUILD_NAME'
    button.type = 'button'
    button.textContent = 'Open this build'

    const openBuild = () => {
      void context.runAction('FEATURED_BUILD_ID', {
        command: 'openVisualizer',
        query: {
          fmk: 'VEHICLE_FMK',
          bodyType: 'BODY_TYPE_ID',
          sizeCategory: 'OE',
          wheel: 'WHEEL_IMAGE_ID',
          wheelDiameter: 'WHEEL_DIAMETER',
        },
      })
    }

    button.addEventListener('click', openBuild)
    article.append(title, button)
    container.appendChild(article)

    return () => {
      button.removeEventListener('click', openBuild)
      article.remove()
    }
  },
})

Placement and order

Supported placements are:

• before-featured-brands
• between-featured-brands-and-new-arrivals
• after-new-arrivals

Sections at one placement sort by order and then registration order. Give each section a stable ID that is unique within the plugin.

Run actions through the context

context.runAction(itemId, action) executes a supported action and reports the item selection. Available actions include opening search, brand, wheel, and visualizer workflows; opening an external link; and emitting a configurator event.

Call context.reportItemSelected() directly only when the plugin completes a custom action itself.

Accessibility and cleanup

• Supply a visible title or ariaLabel.
• Use semantic buttons and links for actions.
• Give images useful alternative text.
• Support keyboard interaction for custom carousels.
• Remove listeners, observers, and plugin-owned DOM in the returned cleanup.

For structured customer-configurable cards, consider the landing-sections built-in instead of executable plugin UI.