Smart Discovery

Smart Discovery (anciennement Configuration de modale) contrôle quand et comment l’assistant Dialog apparaît de lui-même, sur n’importe quelle page de la boutique. À distinguer du bloc de questions produit : au lieu d’attendre qu’un visiteur engage l’assistant sur une page produit, l’assistant est présenté de façon proactive — sur une URL choisie, après un déclencheur de chargement ou de scroll, avec un contenu et des questions suggérées propres.

Chaque configuration s’affiche sur l’une des deux surfaces :

• la Modale — une fenêtre d’accueil avec suggestions,
• l’AI Bar — une barre de recherche flottante discrète, qui peut aussi porter un bouton personal shopper.

Plusieurs configurations Smart Discovery peuvent tourner en parallèle, chacune ciblant un motif d’URL différent avec sa propre surface, son propre déclencheur et son propre contenu.

Où se fait la configuration

Tout est en self-service depuis le tableau de bord Dialog, sous Smart Discovery dans la navigation :

https://app.askdialog.com/organization/{votre-slug-org}/modal-configs

De là, les configurations sont créées, éditées et supprimées. Chacune correspond à une ligne du tableau ; Create Smart Discovery ouvre le formulaire.

Fonctionnement d’une configuration

Chaque configuration relie :

• une surface — Modale ou AI Bar,
• un motif d’URL de page — où elle peut apparaître,
• un événement déclencheur — ce qui la fait apparaître (chargement de page ou scroll),
• un délai — le temps d’attente après le déclencheur,
• le contenu — textes et questions suggérées (et, sur l’AI bar, un bouton personal shopper optionnel).

Quand un visiteur arrive sur une URL correspondante et que le déclencheur se produit, la surface s’ouvre après le délai. Une configuration dont le motif d’URL ne correspond à rien n’apparaît jamais.

Modale

Champs de configuration

Champ	Rôle
Description (requis, traduisible)	Note interne sur le quand et le pourquoi de l’apparition de la modale. Minimum 5 caractères. Non affichée aux visiteurs.
Motif d’URL de page (Regex)	Regex comparée au chemin de la page. Ancrée automatiquement (^motif$). Exemples : .* (toutes les pages), /products/.* (pages produit), /product/[0-9]+ (identifiants numériques). Un testeur en direct permet de coller une URL et de vérifier la correspondance.
Quand la modale doit-elle apparaître ?	L’événement déclencheur : au chargement de la page ou au scroll.
Délai avant affichage de la modale	Temps d’attente après le déclencheur avant l’ouverture : 0s, 5s, 10s, 15s, 30s ou 60s. 0s = immédiatement.
Nom de l’assistant (traduisible)	Nom affiché sur la modale (ex. Assistant shopping, Guide de style).
Placeholder de saisie (traduisible)	Texte indicatif dans le champ de question de la modale.
Questions suggérées (2, requises, traduisibles)	Deux questions présentées au visiteur à l’ouverture de la modale, comme points d’entrée rapides dans la conversation.

Notes de comportement

• Première fois vs. ensuite. À la première ouverture déclenchée, la modale s’affiche en entier. Une fois vue, les déclenchements suivants présentent un bookmark plus discret au lieu de re-déployer la modale complète — pour éviter d’être intrusif sur chaque page.
• Pas de double ouverture. Si l’assistant est déjà ouvert (modale, chat, bookmark ou splash), le déclencheur est ignoré.
• Chemin, pas URL complète. Le motif est testé sur le chemin (ex. /products/chaussure), pas sur la query string ni le domaine.
• Regex ancrée. Le motif est encadré en ^motif$ : il doit correspondre au chemin entier. Utiliser des segments .* pour des correspondances partielles (ex. /products/.*).

AI Bar

L’AI Bar est la deuxième surface Smart Discovery : une barre de recherche flottante discrète au lieu d’une fenêtre d’accueil complète. Elle utilise la même mécanique de ciblage que la modale — motif d’URL, événement déclencheur (chargement de page ou scroll) et délai — mais avec une empreinte plus légère : le visiteur voit une barre compacte qu’il peut déplier vers la conversation complète de l’assistant.

La barre étant plus minimale, son contenu diffère de celui de la modale :

Champ	Rôle
Placeholder de saisie (traduisible)	Texte indicatif dans le champ de question de la barre.
Questions suggérées (optionnelles, traduisibles)	Sur l’AI bar, les questions suggérées sont optionnelles (elles sont requises sur la modale).

Les champs propres à la modale (nom de l’assistant, message de description) ne s’appliquent pas à l’AI bar.

Personal shopper (AI bar uniquement)

L’AI bar peut porter un bouton personal shopper. Une fois activé, la barre dépliée affiche un bouton qui ouvre directement le Personal Shopper sélectionné — un point d’entrée en un clic depuis la barre vers le bon flux guidé.

Activer le toggle Personal shopper dans le formulaire, puis renseigner :

Champ	Rôle
Personal shopper (requis si activé)	Sélectionner le personal shopper que le bouton lance.
Libellé du bouton (traduisible)	Le texte du bouton (ex. Lancer le personal shopper).

Cette section n’apparaît que lorsque la surface de la configuration est AI Bar.

Multilingue

Les champs traduisibles (description, nom de l’assistant, placeholder de saisie, questions suggérées, libellé du bouton personal shopper) sont édités par langue via le sélecteur de langue en haut du formulaire. Sur la langue principale, Translate to all languages remplit par IA toutes les autres langues activées à partir de la valeur courante, en un clic.

Surcharges CSS avancées

Pas une surface de customisation officielle

Pour du CSS custom, c’est faisable techniquement côté intégration, mais ce n’est pas un système de customisation officiel/stable exposé dans la config. Les classes ci-dessous sont les points de surcharge supportés ; au-delà, la cible est du markup interne qui peut changer sans préavis. Garder le CSS custom minimal et re-tester après chaque mise à jour du widget.

La modale est rendue avec le reste du widget Dialog : les mêmes classes de surcharge s’appliquent. Elles peuvent être surchargées depuis le champ CSS custom Shopify, ou depuis une feuille de style propre sur les installations custom :

Classe	Cible
.dialog-input	Le champ de question
.dialog-suggestions-item	Questions suggérées
.dialog-add-to-cart-button	Bouton d’ajout au panier
.dialog-human-message	Messages du client
.dialog-ai-message	Réponses de l’IA
.dialog-feedback-button	Boutons de feedback

Exemple — modale alignée sur la marque

/* Champ et suggestions */
.dialog-input {
  border-color: #4f46e5;
  border-radius: 12px;
}
.dialog-suggestions-item {
  border-color: #c7d2fe;
  background-color: #eef2ff;
}

/* Bulles de conversation */
.dialog-human-message {
  background-color: #4f46e5;
  color: #ffffff;
}
.dialog-ai-message {
  background-color: #f8fafc;
}
.dialog-human-message,
.dialog-ai-message * {
  font-size: 15px !important;
  line-height: 1.5;
}

/* Actions */
.dialog-add-to-cart-button {
  background-color: #16a34a;
  border-radius: 999px;
}
.dialog-feedback-button {
  border-color: #f59e0b;
}

Conseils pour des surcharges sûres

• Cibler précisément. Ne surcharger que les classes documentées ci-dessus. Cibler des sélecteurs internes plus profonds est fragile.
• Attention à la spécificité. Le widget embarque ses propres styles ; !important peut être nécessaire sur des propriétés comme font-size pour l’emporter, comme ci-dessus.
• Privilégier d’abord le chemin supporté. Pour les installations SDK / headless, l’objet theme est la surface de style stable — à préférer avant le CSS custom.
• Re-tester après les mises à jour. Les snippets Shopify et le widget sont mis à jour périodiquement. Revérifier les surcharges après une mise à jour.

Liens utiles

• Personnaliser Dialog — la vue d’ensemble de la customisation.
• Personal Shopper — flux guidés déclenchés par un clic plutôt que par une URL.
• Référence SDK — objet theme pour le style sur les stacks custom.
• Dialog n’est pas visible — si la modale ne s’ouvre jamais.