Landing sections API

Register a plugin-owned section with api.ui.registerLandingSection(section). The method returns an unsubscribe function that removes the registration and any mounted content.

type PluginLandingSection = {
  id: string
  placement: PluginLandingSectionPlacement
  order?: number
  title?: PluginLocalizedText
  description?: PluginLocalizedText
  ariaLabel?: PluginLocalizedText
  render: PluginLandingSectionRenderCallback
}

Fields

Field	Required	Purpose
id	Yes	Stable identifier unique within the plugin.
placement	Yes	Supported location on the landing page.
order	No	Sort value within the selected placement; defaults to 0.
title	No	Visible localized heading.
description	No	Visible localized supporting copy.
ariaLabel	No	Accessible label when no visible heading is appropriate.
render	Yes	Renders the section body and may return cleanup.

PluginLocalizedText is either a string or a language-code record such as { en: 'Featured builds', fr: 'Configurations en vedette' }.

Placements

type PluginLandingSectionPlacement =
  | 'before-featured-brands'
  | 'between-featured-brands-and-new-arrivals'
  | 'after-new-arrivals'

Render callback

type PluginLandingSectionRenderCallback = (
  container: HTMLElement,
  context: PluginLandingSectionRenderContext,
) => void | (() => void)

The context is read-only:

type PluginLandingSectionRenderContext = Readonly<{
  sectionId: string
  pluginId: string
  placement: PluginLandingSectionPlacement
  language: string
  runAction: (itemId: string, action: PluginAction) => Promise<boolean>
  reportItemSelected: (itemId: string, action?: PluginLandingSectionInteractionAction) => void
}>

runAction() returns true when the action succeeds. It also reports the item selection and emits a failure event when the action cannot be completed.

Supported actions

type PluginAction = {
  id?: string
  label?: string
  command:
    | 'openSearchByVehicle'
    | 'openSearchBySize'
    | 'openBrands'
    | 'openVisualizer'
    | 'openWheelSpecSheet'
    | 'openWheelDetail'
    | 'navigate'
    | 'externalLink'
    | 'emit'
  query?: PluginWheelSpecSheetQuery | PluginWheelDetailQuery | PluginVisualizerQuery
  to?: PluginRouteLocation
  href?: string
  target?: '_self' | '_blank' | '_parent' | '_top'
  eventName?: ConfiguratorEventName
  data?: unknown
  closeOnComplete?: boolean
}

Supply the fields required by the selected command: query for applicable product workflows, to for navigation, href for an external link, or eventName and optional data for an emitted event.

See Add a landing section for a working implementation.