L’interface de chat contrôle la présentation visuelle et textuelle dans l’expérience client, tandis que Entry point contrôle la manière dont les acheteurs la découvrent sur différentes pages et appareils. Les deux zones fournissent des aperçus, mais la validation finale doit avoir lieu sur la vitrine réelle.

Ce guide couvre les contrôles actuels de l’avatar, de la couleur, de la forme, du texte facultatif, du panier, de l’icône, du point d’entrée et des règles de page, sans supposer que chaque entreprise ou intégration expose des options identiques.

Comment cela s’intègre dans Humind

L’AI Agent est l’espace de configuration de l’assistant destiné aux clients. Knowledge et Catalog fournissent les faits, Guidance façonne le comportement des réponses, Tools ajoute des actions, Escalation définit l’assistance humaine, et les surfaces de test vous permettent de vérifier le résultat avant le déploiement.

Les modifications peuvent affecter de nombreuses conversations, testez donc des scénarios représentatifs d’achat et d’assistance après chaque mise à jour significative. Un chat visuellement correct ne suffit pas : vérifiez ensemble la réponse, le contexte produit, l’action disponible et le comportement de transfert.

Avant de commencer

Accès : un accès en écriture à la configuration d’Agent est requis. Certains paramètres avancés sont réservés aux administrateurs Humind, et les contrôles spécifiques à Shopify n’apparaissent que pour les entreprises Shopify connectées.

• Préparez les ressources de logo ou d’avatar approuvées ainsi que les couleurs de la marque.
• Vérifiez le contraste des couleurs et les contraintes de la vitrine mobile avant de choisir des valeurs.
• Répertoriez les types de pages où le lanceur doit être visible, masqué ou personnalisé.

Procédure étape par étape

1. Définir la base visuelle

   Ouvrez AI Agent, puis Chat interface. Choisissez un avatar dans la galerie ou téléversez la ressource prévue. Définissez les couleurs de l’interface et du texte, l’arrondi des bulles, les couleurs d’arrière-plan et de texte de l’ajout au panier, ainsi que l’arrondi des boutons.

   Utilisez l’aperçu pendant la modification et vérifiez un contraste lisible dans chaque composant coloré. Les paramètres de cette page s’enregistrent en direct, attendez donc le retour d’enregistrement et évitez les changements contradictoires rapides.

2. Examiner les options avancées de présentation

   L’interface actuelle peut utiliser en option un nom d’Agent personnalisé, un titre d’accueil et un message d’accueil. Elle peut afficher ou masquer l’icône étincelle, l’image du sélecteur de cadeaux, les questions prédéfinies et le bouton d’ajout au panier. Les entreprises Shopify peuvent choisir si l’action du panier mène au panier ou au paiement via le contrôle de destination disponible.

   Une valeur d’accueil personnalisée vide peut volontairement masquer cette ligne. Documentez cette décision afin qu’un résultat vide ne soit pas plus tard pris à tort pour un contenu perdu.

3. Configurer le point d’entrée par défaut

   Ouvrez AI widgets, puis Entry point. Activez le lanceur par défaut et choisissez son type, sa position, son libellé, la visibilité de l’avatar, la taille de la bulle, le traitement du logo, ainsi que les décalages horizontaux ou verticaux lorsque disponibles. Basculez entre ordinateur et mobile pour examiner les deux configurations.

   Veillez à ce que le lanceur reste facile à découvrir sans couvrir la navigation de la boutique, les contrôles de consentement, les actions d’achat produit ou les widgets d’accessibilité.

4. Ajouter des règles spécifiques aux pages uniquement lorsque nécessaire

   Les règles de page peuvent cibler les types de pages pris en charge et définir la visibilité sur mobile ou ordinateur sur masqué, hérité ou personnalisé. Les règles personnalisées peuvent modifier la présentation du lanceur pour le contexte de page sélectionné. Les règles de page produit peuvent également exposer l’option automatique actuelle de question produit.

   Évitez les règles qui se chevauchent. Utilisez les onglets de contexte d’aperçu pour comparer les résultats par défaut et spécifiques à la page, et supprimez les règles obsolètes au lieu d’empiler les exceptions indéfiniment.

5. Valider l’accessibilité et la mise en page en direct

   Testez l’accès au clavier, le contraste du texte, l’ouverture et la fermeture, les textes traduits longs, les écrans étroits, les pages produit et le comportement du panier dans l’aperçu. Déployez ensuite et répétez les vérifications sur la vitrine réelle dans un navigateur privé.

   Si le résultat en direct diffère, examinez l’installation, les ressources obsolètes de la vitrine, le contexte de l’entreprise et la correspondance des règles de page avant de modifier de nouveau le design.

Autorisations et points importants à connaître

• L’aperçu n’inclut pas chaque thème de vitrine, superposition ou interaction responsive.
• Les options avancées et spécifiques à Shopify sont conditionnelles, documentez uniquement les contrôles visibles pour l’entreprise active.
• Les paramètres enregistrés en direct peuvent affecter les tests immédiatement après leur enregistrement.
• Les règles de page doivent rester mutuellement compréhensibles entre ordinateur et mobile.

Vérifier le résultat

Utilisez cette liste de contrôle avant de considérer le travail comme terminé :

• L’avatar, le texte, l’interface et les couleurs du panier respectent la norme de contraste de l’équipe.
• Les aperçus du point d’entrée par défaut et spécifiques à la page correspondent à l’ensemble de règles documenté.
• Les libellés longs, les traductions, le focus clavier et les mises en page mobiles restent utilisables.
• La vitrine en direct affiche un seul lanceur correct sans couvrir des contrôles critiques.

Résolution des problèmes

Une modification visuelle n’apparaît pas

Attendez le retour d’enregistrement de la page, confirmez l’entreprise active, actualisez l’aperçu et testez une nouvelle session de vitrine. Vérifiez si une règle spécifique à la page remplace la valeur par défaut.

Le lanceur apparaît au mauvais endroit

Vérifiez la sélection de l’appareil, la position, les décalages et la règle de page correspondante. Confirmez qu’une autre installation de widget en double ne crée pas l’instance inattendue.

Le texte ou les boutons sont difficiles à lire

Réexaminez à la fois les couleurs d’arrière-plan et de texte pour les contrôles d’interface et de panier. Testez les libellés réels et le texte traduit aux tailles ordinateur et mobile avant de publier le design corrigé.

Guides associés

• Personnalisez votre Agent, du contenu à l’interface
• Déployer un Agent sur un canal de vente
• Configurer les langues de l’espace de travail et celles visibles par les clients
• Configurer les outils, les enquêtes et les invitations de chat