Comment personnaliser l’apparence de votre chatbot

Shoply AI Chat et AI Search offrent plus de 40 options pour personnaliser l’apparence de l’application.

Cette section vous présente les différentes options de personnalisation disponibles pour votre chatbot IA. Vous pouvez personnaliser son apparence, le design de la fenêtre de chat et l’expérience de messagerie afin qu’ils correspondent à votre marque.

Prêt à commencer ? Ouvrez Customize AI Chat dans votre Shoply AI Admin Console, que vous utilisiez Shopify ou une autre plateforme de site web. Si le chatbot n’est pas encore visible, suivez la checklist d’installation et de visibilité.

Prévisualiser votre fenêtre de chat

Essayez le même thème et les illustrations en largeur bureau utilisés dans l’interface d’administration. Choisissez une apparence claire ou sombre et comparez l’espace occupé par la fenêtre de chat.

Pour modifier la manière dont l’IA s’exprime plutôt que son apparence, consultez comment personnaliser la personnalité de votre IA.

Choix de l’icône de chat

Select an icon

Vous pouvez choisir une icône de chat parmi nos 17 icônes prédéfinies différentes, ou importer une image comme votre propre icône de chat

Couleur et taille de l’icône de chat

Primary Color

Il s’agit de la couleur principale du thème, et elle est également utilisée comme couleur de texte mise en évidence dans la fenêtre de chat.

Si vous utilisez un mode clair sur votre site web, veuillez sélectionner une couleur non blanche comme couleur de thème — cela permet de garantir que le texte mis en évidence reste lisible sur un fond clair. Si vous utilisez un mode sombre sur votre site web, veuillez sélectionner une couleur non noire comme couleur de thème.

Complementary Color

Il s’agit d’une couleur complémentaire qui fonctionne avec votre couleur principale pour créer des dégradés (transition douce entre deux couleurs) pour l’icône de chat et l’en-tête de la fenêtre de chat, rendant l’icône de chat plus attrayante visuellement et mieux alignée sur votre marque.

Icon’s Line Color

Il s’agit de la couleur du contour de l’icône de chat.

Whether to remove the background color of the chat icon.

Cela est souvent utile si vous importez une image comme icône de chat et que vous souhaitez supprimer la couleur d’arrière-plan (la couleur principale) de l’icône de chat.

Whether to remove the shadow of the chat icon.

Cette option vous permet de supprimer l’effet d’ombre portée de l’icône de chat pour un design plus plat et minimaliste. Cela est particulièrement utile si votre boutique a une esthétique épurée et moderne, ou si vous avez importé une icône personnalisée qui inclut déjà ses propres effets d’ombre ou de profondeur.

Floating Icon Size for desktop and mobile.

Sur mobile, vous pouvez vouloir définir une taille plus petite pour l’icône de chat afin d’éviter qu’elle ne bloque la vue du client sur l’écran mobile.

Positionnement de l’icône de chat

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

Utilisez une valeur plus élevée si vous souhaitez que l’icône reste devant les autres éléments de l’interface.

Auto-hide chat icon on mobile

Masquez l’icône de chat après un nombre spécifié de secondes sur les appareils mobiles.

Cette option n’est disponible que pour les appareils mobiles. Elle permet d’éviter que l’icône de chat ne bloque la vue du client sur l’écran mobile.

Personnalisation de la fenêtre de chat

Lorsque vous cliquez sur l’icône de chat de Shoply AI, la fenêtre de chat s’ouvre. Les clients peuvent interagir avec Shoply AI via cette fenêtre de chat.

Cette section vous présente les différentes options disponibles pour personnaliser la fenêtre de chat.

Color Theme (dark mode or light mode) of the chat window

Si vous choisissez le mode sombre, l’arrière-plan de la fenêtre de chat sera noir et la couleur de la police sera blanche. Nous recommandons d’adopter l’option de mode sombre si le thème de votre boutique est également en mode sombre.

Width of the chat window on desktop

Cette option s’applique uniquement à l’ordinateur de bureau. Sur mobile, la fenêtre de chat occupe toujours tout l’écran.

Select the branding image and background image

Vous pouvez choisir d’importer votre propre image de marque et image d’arrière-plan pour la fenêtre de chat, ou simplement laisser Shoply AI générer ces images pour vous.

Si vous choisissez d’utiliser l’image générée par l’IA, Shoply AI générera les images de marque et les images d’arrière-plan à partir de la description de votre boutique.

Adjust the transparency and aspect ratios of the background image for the chat window.

Les images d’arrière-plan dans la fenêtre de chat peuvent rendre le texte affiché par-dessus difficile à lire. C’est pourquoi, par défaut, nous ajoutons une couche semi-transparente au-dessus de l’image d’arrière-plan.

Whether to remove Shoply AI’s Logo in Input Bar

Cette option vous permet de supprimer le logo Shoply AI de la barre de saisie du chat pour une expérience plus épurée et mieux alignée sur votre marque. Cela est particulièrement utile si vous souhaitez conserver une identité de marque cohérente dans toute votre boutique sans logos tiers, ou si vous préférez un design d’interface de chat plus minimaliste.

Cette option n’est disponible que pour les forfaits payants.

Messages prédéfinis pour le chat IA

Vous pouvez également définir ou modifier les messages par défaut qui guident les clients lorsqu’ils interagissent pour la première fois avec votre chatbot. De plus, vous pouvez configurer les options de traduction de ces messages (consultez cette page FAQ pour plus de détails).

Popup Welcome message (shows above chat icon if not empty)

Si vous laissez le message de bienvenue vide, nous n’afficherons pas le message de bienvenue au-dessus de l’icône de chat.

Pre-defined messages in chat window

Vous pouvez configurer jusqu’à 3 types de messages prédéfinis dans la fenêtre de chat :

1. Premier message dans la fenêtre de chat - Il s’agit du message de salutation initial qui apparaît automatiquement lorsque les clients ouvrent la fenêtre de chat pour la première fois. Utilisez-le pour accueillir les clients et donner le ton de la conversation.

2. Jusqu’à 4 questions de départ - Il s’agit de suggestions de questions cliquables affichées au début du chat. Elles aident à guider les clients en proposant des questions fréquentes sur lesquelles ils peuvent cliquer pour démarrer une conversation, ce qui leur permet de commencer plus facilement.

3. Message d’espace réservé du champ de saisie - Il s’agit du texte d’indication qui apparaît dans le champ de saisie du chat avant que les clients ne commencent à taper. Il fournit des indications sur ce que les clients peuvent demander, par exemple “Ask me anything 🤗” ou “How can I help you today?”

Ces paramètres contrôlent l’ouverture standard du chat. Lorsqu’un acheteur ouvre le chat via un lien “Question About This Product?”, Shoply affiche à la place le nom du produit, un court point fort du produit et des questions générées automatiquement à propos de cet article. Vous n’avez pas besoin de rédiger des questions de départ pour chaque produit. Découvrez comment fonctionnent les questions produit alimentées par l’IA, ou suivez les étapes pour ajouter un bouton de question sur le produit.

Consultez l’exemple pour chaque type de message prédéfini :