Add UI through outlets

An outlet is an app-owned location where a plugin can mount a small DOM contribution. Each mount receives a container and read-only context. Its returned cleanup runs when the context changes or the plugin is disposed.

Add a wheel-card action

api.ui.mount('wheel-card:actions', (container, context) => {
  const button = document.createElement('button')
  button.type = 'button'
  button.textContent = 'Save wheel'

  const save = () => {
    window.dispatchEvent(
      new CustomEvent('dealer:save-wheel', {
        detail: { wheelImageId: context.wheel.wheelImageId },
      }),
    )
  }

  button.addEventListener('click', save)
  container.appendChild(button)

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

Use semantic <button type="button"> elements for actions. Icon-only controls need an accessible name. Badges and decoration outlets are noninteractive.

Add styles inside the configurator

Host-page styles do not automatically apply to plugin UI inside the configurator. Register plugin styles through api.ui.addStyle():

api.ui.addStyle(`
  .dealer-save-wheel {
    border-radius: 999px;
    font-weight: 700;
  }
`)

Scope selectors to plugin-owned class names. Do not depend on undocumented configurator selectors.

Choose a larger UI API

• Use registerLandingSection() for a complete landing section.
• Use openModal() for a trusted custom workflow.
• Use campaigns.register() for a structured marketing prompt.
• Use an outlet for a small additive contribution.

See the outlet reference for names and typed contexts.