Run configurator commands

Commands perform supported configurator actions without exposing private application state.

Open a search workflow

api.ui.mount('page-header:actions', (container) => {
  const button = document.createElement('button')
  button.type = 'button'
  button.textContent = 'Choose another vehicle'
  button.addEventListener('click', api.commands.openSearchByVehicle)
  container.appendChild(button)

  return () => {
    button.removeEventListener('click', api.commands.openSearchByVehicle)
    button.remove()
  }
})

Navigate to an app-owned screen

await api.commands.openBrands()

await api.commands.openVisualizer({
  fmk: 'VEHICLE_FMK',
  bodyType: 'BODY_TYPE_ID',
  sizeCategory: 'OE',
  wheel: 'WHEEL_IMAGE_ID',
})

The spec-sheet, exact-detail, and visualizer commands each have a separate typed query. See Product workflow queries for required fields and fitment-category rules.

Prefer semantic commands such as openBrands() and openVisualizer() over constructing private hash routes. Use navigate() only for public route values that the integration owns and can test.

Change presentation

api.commands.setTheme('dark')
api.commands.setLanguage('fr')

See the commands reference for the complete command set.