Configuration

TreatmentConsultant takes a single optional config prop — a deep-partial version of TreatmentConsultantConfig. Anything you don't provide falls back to sensible defaults, so most integrations only need to override a handful of fields.

<TreatmentConsultant
  :config="{
    behaviour: { currency: `GBP` },
    text: { cta: { bookHref: `/book-appointment` } },
  }"
/>

Merge behaviour

The three top-level shapes in TreatmentConsultantConfig merge differently:

Behaviour

Wizard steps

The wizard has 7 internal step indices. Application Type is auto-skipped when the client picks "none" for dream colour; Cut and Treatments can each be turned off entirely via behaviour above.

Text

Every user-facing string in the widget lives under text — step headings, navigation labels, the results screen, the summary sidebar, and the final call-to-action. Override just the keys you need; anything else falls back to the English defaults. See the TextConfig reference for the full shape.

Option arrays

hairTypes, naturalColours, desiredColours, treatments, applicationTypes, cuts, greyCoverageOptions, shades and naturalShades define the selectable options at each step. These replace the defaults entirely when provided, so a partial override isn't possible — supply the complete list. See the option type reference for each shape.

Granular shade catalog mode

Requires a Premium license. By default, Dream Colour and Natural Colour each show their 7-item broad-category grid. Setting behaviour.dreamColourMode and/or behaviour.naturalColourMode to "granular" switches that step to a tabbed catalog of individual named shades — config.shades for Dream Colour, config.naturalShades for Natural Colour — grouped into tabs derived from whatever category ids appear in the data. The two modes are independent.

On a Basic or Standard license (or no/invalid license), "granular" is silently treated as "basic" — no error, no locked/upsell UI. The same fallback applies on a Premium license if the relevant catalog is empty. Selecting a shade is functionally equivalent to selecting its broad category for suitability purposes; the specific shade is additionally tracked as ConsultationSelections.desiredShade / .naturalShade. See Licensing for how license tiers are enforced.

Grey coverage

A second, independent question shown beneath the Natural Colour swatches: config.greyCoverageOptions (default: None / Some / Significant / Mostly Grey). Tracked as ConsultationSelections.greyCoverage and shown as its own Results summary card, but — unlike hair type/natural colour/desired colour — it never feeds the suitability matrix and never triggers autoAdvance.

Header text & the header slot

text.header.brand (empty string hides it) and text.header.title set the built-in header shown above the step content — brand/salon name plus a persistent title, alongside a live progress label. To replace the header's markup entirely (a custom logo/progress bar), use the scoped #header slot instead — see the Slots reference.

Events