Configuration

TreatmentConsultant accepte une unique prop optionnelle config, une version partielle en profondeur de TreatmentConsultantConfig. Tout ce que vous ne fournissez pas revient à des valeurs par défaut raisonnables, la plupart des intégrations n'ont donc besoin de surcharger qu'une poignée de champs.

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

Comportement de fusion

Les trois formes de premier niveau de TreatmentConsultantConfig fusionnent différemment :

Comportement

Étapes du parcours

Le parcours comporte 7 indices d'étapes internes. Type d'application est automatiquement ignorée si le client choisit « aucune » pour la couleur rêvée ; Coupe et Traitements peuvent chacune être entièrement désactivées via behaviour ci-dessus.

Texte

Chaque chaîne visible par l'utilisateur dans le widget se trouve sous text : titres d'étapes, libellés de navigation, écran de résultats, barre latérale de résumé, et l'appel à l'action final. Ne surchargez que les clés dont vous avez besoin ; tout le reste revient aux valeurs par défaut en anglais. Consultez la référence TextConfig pour la forme complète.

Tableaux d'options

hairTypes, naturalColours, desiredColours, treatments, applicationTypes, cuts, greyCoverageOptions, shades et naturalShades définissent les options sélectionnables à chaque étape. Elles remplacent entièrement les valeurs par défaut lorsqu'elles sont fournies, une surcharge partielle n'est donc pas possible : fournissez la liste complète. Consultez la référence des types d'options pour chaque forme.

Mode catalogue de nuances détaillé

Nécessite une licence Premium. Par défaut, Couleur rêvée et Couleur naturelle affichent chacune leur grille de 7 catégories larges. Définir behaviour.dreamColourMode et/ou behaviour.naturalColourMode sur "granular" fait passer cette étape à un catalogue à onglets de nuances individuelles nommées — config.shades pour Couleur rêvée, config.naturalShades pour Couleur naturelle — regroupées en onglets dérivés des identifiants de catégorie présents dans les données. Les deux modes sont indépendants.

Sur une licence Basic ou Standard (ou sans licence/licence invalide), "granular" est silencieusement traité comme "basic" : aucune erreur, aucune interface verrouillée ou incitative. Le même repli s'applique sur une licence Premium si le catalogue concerné est vide. Sélectionner une nuance équivaut fonctionnellement à sélectionner sa catégorie large pour les besoins de la compatibilité ; la nuance spécifique est en outre suivie sous ConsultationSelections.desiredShade / .naturalShade. Consultez Licences pour savoir comment les niveaux de licence sont appliqués.

Couverture des cheveux gris

Une seconde question, indépendante, affichée sous les échantillons de Couleur naturelle : config.greyCoverageOptions (par défaut : Aucune / Quelques-uns / Significative / Majoritairement gris). Suivie sous ConsultationSelections.greyCoverage et affichée sur sa propre carte de résumé des résultats, mais, contrairement au type de cheveux/couleur naturelle/couleur souhaitée, elle n'alimente jamais la matrice de compatibilité et ne déclenche jamais autoAdvance.

Texte d'en-tête et le slot d'en-tête

text.header.brand (une chaîne vide le masque) et text.header.title définissent l'en-tête intégré affiché au-dessus du contenu de l'étape : nom de marque/salon plus un titre persistant, accompagnés d'un libellé de progression en direct. Pour remplacer entièrement le balisage de l'en-tête (logo personnalisé, barre de progression), utilisez plutôt le slot à portée #header, voir la référence des slots.

Événements