Personnaliser Dialog

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

1. Personnalisation visuelle dans Shopify

Depuis les paramètres du thème Shopify, ajuster :

• La police et les couleurs pour s’accorder à la marque.
• Le CSS personnalisé pour un contrôle total de l’apparence.

2. Personnalisation de l’assistant dans Dialog

Depuis le tableau de bord Dialog, définir l’identité de l’assistant :

• Nom — donner un nom convivial ou aligné sur la marque.
• Logo de l’assistant — téléverser le logo.
• Logo d’ajout au panier — choisir une icône adaptée au secteur.

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

3. Personnaliser le widget avec du CSS

Le widget Dialog est rendu avec des points d’ancrage stables — des identifiants (ID) et des classes CSS qui ne changent pas d’une version à l’autre. Ils fonctionnent sur toutes les plateformes (Shopify, PrestaShop ou une intégration SDK sur mesure) : les cibler avec du CSS permet de restyliser n’importe quelle partie du widget (polices, couleurs, bordures, espacements).

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

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

Conteneurs (cibler par ID)

À utiliser pour styliser des régions entières du widget. Le sélecteur # cible un ID.

Sélecteur	Cible
#dialog-drawer	Le panneau du widget — conteneur racine de tout le contenu
#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)

Conseils

• Changer la police. Dialog applique sa police sur #dialog-drawer. La surcharger à cet endroit restylise tous les messages d’un coup ; cibler une classe comme .dialog-human-message permet un contrôle plus fin.
• Utiliser !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-human-message {
  font-family: "Georgia", serif !important;
}
/* Restyliser les questions suggérées */
.dialog-suggestions-item {
  border-color: red;
}
/* Recolorer les boutons de retour */
.dialog-feedback-button {
  border-color: orange;
}
/* Réduire tout le texte de la conversation */
.dialog-human-message,
.dialog-message,
.dialog-message * {
  font-size: 10px !important;
}

Résultat :