Personnaliser Dialog

Dialog est installé et entraîné. Reste à le rendre vôtre. Personnaliser Dialog l’aide à s’intégrer à votre boutique et à refléter votre marque.

1. Personnalisation visuelle dans Shopify

Depuis les paramètres de votre thème Shopify, ajustez :

• La police et les couleurs pour les accorder à votre marque.
• Le CSS personnalisé pour tout ce que les paramètres ne couvrent pas : espacements, bordures, dimensions, ou un élément précis de Dialog.

2. Personnalisation de l’assistant dans Dialog

Depuis votre tableau de bord Dialog, définissez l’identité de l’assistant :

• Nom : donnez-lui un nom convivial ou aligné sur votre marque.
• Logo de l’assistant : téléversez votre logo.
• Logo d’ajout au panier : choisissez une icône adaptée à votre secteur.

Un assistant bien personnalisé est plus esthétique et inspire davantage confiance à vos clients.

3. Personnaliser l’assistant avec du CSS

L’assistant Dialog est rendu avec des points d’ancrage documentés : des identifiants (ID) et des classes CSS à cibler avec votre propre CSS. Ils fonctionnent sur toutes les plateformes (Shopify, PrestaShop ou une intégration SDK sur mesure) : utilisez-les pour restyliser n’importe quelle partie de l’assistant (polices, couleurs, bordures, espacements).

Les sélecteurs listés sur cette page constituent la surface supportée. Préférez-les à tout ce que vous trouveriez en inspectant le DOM : les éléments internes profondément imbriqués peuvent bouger lors d’une mise à jour des composants Dialog, et une surcharge qui les cible peut nécessiter une révision après une mise à jour.

L’endroit où ajouter le CSS dépend de votre installation :

• Shopify : le champ CSS personnalisé dans les paramètres du thème.
• PrestaShop : la feuille de style de votre thème, ou un module CSS personnalisé.
• SDK / sur mesure : n’importe quelle feuille de style chargée sur les pages où l’assistant apparaît.

Limiter chaque surcharge à Dialog

Sur une boutique, le CSS circule dans les deux sens : une règle trop large écrite pour Dialog peut restyliser toute votre boutique, et les règles larges de votre thème peuvent déborder sur Dialog (voir plus bas). La même habitude protège des deux : ancrez toujours votre sélecteur sur un ID ou une classe Dialog, jamais sur un élément nu.

/* Bien : seuls les messages de Dialog sont touchés */
#dialog-drawer .dialog-message {
  font-size: 14px !important;
}

/* À éviter : tous les boutons de la boutique, dont plusieurs dans Dialog */
button {
  border-radius: 0;
}

Conteneurs (cibler par ID)

À utiliser pour styliser des régions entières de l’assistant. Le sélecteur # cible un ID.

Sélecteur	Cible
#dialog-shopify-ai	Conteneur racine de l’app Shopify Dialog
#dialog-ai-bar	L’AI bar et son champ de saisie
#dialog-drawer	Le panneau du drawer, conteneur racine de la conversation
#dialog-ai-container	La zone de conversation de l’assistant
#dialog-ai-input	Le champ de saisie de la question
#dialog-bookmark	Le bouton de favori

Éléments (cibler par classe)

À utiliser pour les éléments individuels de la conversation. Le sélecteur . cible une classe.

Sélecteur	Cible
.dialog-human-message	Messages du client (acheteur)
.dialog-message	Messages de l’assistant (IA)
.dialog-suggestions-item	Questions suggérées
.dialog-feedback-button	Boutons de retour pouce haut / pouce bas
.dialog-diagnostic-choice-with-photo	Carte de choix du diagnostic visuel (avec photo)
.dialog-diagnostic-choice-without-photo	Carte de choix du diagnostic visuel (sans photo)
.dialog-diagnostic-action-button	Bouton d’action du diagnostic visuel

Variables CSS

Variable	Contrôle
--dialog-overlay-bg	Couleur de fond de la surcouche (définie sur #dialog-drawer)

#dialog-drawer {
  --dialog-overlay-bg: rgba(0, 0, 0, 0.45);
}

Conseils

• Changer la police. Dialog applique sa police sur #dialog-drawer. Surchargez-la à cet endroit pour restyliser tous les messages d’un coup, ou ciblez une classe comme .dialog-human-message pour un contrôle plus fin.
• Utilisez !important lorsqu’une règle ne s’applique pas. Dialog embarque des styles en ligne à portée limitée ; une surcharge peut nécessiter !important pour prendre le dessus.

Exemple

/* Police personnalisée pour les messages de l'acheteur */
#dialog-drawer .dialog-human-message {
  font-family: "Georgia", serif !important;
}
/* Restyliser les questions suggérées */
#dialog-drawer .dialog-suggestions-item {
  border-color: red;
}
/* Recolorer les boutons de retour */
#dialog-drawer .dialog-feedback-button {
  border-color: orange;
}
/* Réduire tout le texte de la conversation */
#dialog-drawer .dialog-human-message,
#dialog-drawer .dialog-message,
#dialog-drawer .dialog-message * {
  font-size: 10px !important;
}

Résultat :

4. Quand le CSS de votre thème déborde sur Dialog

La plupart des thèmes embarquent des règles globales pour les éléments de formulaire, du type :

input[type="text"] {
  height: 52px;
  padding: 16px;
  border: 1px solid #000;
}

Dialog est rendu à l’intérieur de votre page : ces règles touchent donc aussi ses champs de saisie. Si le champ de l’AI bar paraît trop haut, porte un padding qu’il n’a jamais eu ou hérite d’une bordure de votre thème, c’est presque toujours la cause.

N’assouplissez pas la règle du thème : les formulaires de votre boutique en dépendent. Réinitialisez plutôt les propriétés héritées à l’intérieur de Dialog, puis remettez ce que vous voulez.

Réinitialiser le champ de l’AI bar

#dialog-shopify-ai #dialog-ai-bar input[type="text"],
#dialog-ai-bar #dialog-ai-input {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

Puis réappliquez les styles que vous voulez vraiment :

#dialog-ai-bar #dialog-ai-input {
  font-size: 14px !important;
  color: #111 !important;
}

Réinitialiser le champ du drawer

Même schéma, limité au drawer :

#dialog-drawer #dialog-ai-input,
#dialog-drawer input[type="text"] {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

Le double ancrage (un conteneur Dialog plus le sélecteur d’input) empêche la réinitialisation de toucher quoi que ce soit hors de Dialog, et lui donne assez de spécificité pour l’emporter sur la règle du thème.

5. Dépannage

Le champ de l’AI bar est trop haut ou mal aligné

Une règle du thème ciblant tous les champs texte (en général input[type="text"]) déborde sur Dialog. Appliquez la réinitialisation de l’AI bar ci-dessus.

Un bouton Dialog a changé après une mise à jour du thème

La mise à jour a probablement ajouté ou modifié un sélecteur large comme button, .button ou [type="button"]. Ne répliquez pas avec une autre règle globale ; limitez le correctif à Dialog :

#dialog-drawer .dialog-feedback-button {
  border-radius: 8px !important;
}

Une personnalisation fonctionne sur une page mais pas sur une autre

Le CSS n’est pas chargé partout où Dialog apparaît. Sur Shopify, vérifiez qu’il se trouve dans le CSS personnalisé du thème actif, pas dans une section propre à une page.

Un sélecteur a cessé de fonctionner après une mise à jour de Dialog

La surcharge ciblait probablement un élément interne plutôt qu’un point d’ancrage documenté. Réécrivez-la avec les ID et classes de cette page : et considérez toute surcharge profonde comme à revérifier après une mise à jour de Dialog.

6. Quand contacter le support Dialog

Écrivez à paul@askdialog.com lorsque :

• vous devez restyliser un élément qui n’a pas d’ID ou de classe documenté sur cette page : nous préférons exposer un point d’ancrage plutôt que vous laisser cibler des éléments internes ;
• un sélecteur documenté a cessé de fonctionner après une mise à jour de Dialog ;
• une mise à jour du thème a cassé l’apparence de Dialog et vous ne trouvez pas la règle en conflit.

Joignez l’URL de votre boutique, la page où le problème apparaît, une capture d’écran et le CSS ajouté. Avant de contacter le support explique pourquoi ces éléments permettent une réponse en un seul aller-retour.