Configuration du design de l'assistant
L'onglet Design du chat vous permet de personnaliser entièrement l'apparence visuelle du widget de chat afin de garantir son intégration transparente à l'image de marque de votre boutique.
Identité et positionnement de base
Identité : Vous pouvez définir le « Nom de l'assistant » (par exemple, « Assistant IA ») qui apparaît dans l'en-tête, et éventuellement fournir une « URL de l'avatar de l'assistant » pour afficher un logo ou une image personnalisée à côté du nom.
Positionnement : Utilisez le menu déroulant “Position à l'écran” pour choisir où le widget s'ancre sur votre vitrine (généralement en bas à droite).
Mise en page et dimensions
Vous contrôlez précisément la taille physique et la forme de l’interface de chat à l’aide d’unités en pixels (px), en hauteur de fenêtre (vh) ou en rem :
Ajustez la “Largeur du chat” globale (par exemple, 400px) et la “Hauteur maximale du chat” (par exemple, 50vh).
Ajustez finement l'espacement avec “Messages padding” et ajustez la courbure de l'interface à l'aide des contrôles de rayon tels que “Messages container radius” (18px) et “Chat window radius” (12px).
Contrôlez la taille de la typographie avec les paramètres « Taille de police du chat », « Taille du texte de l'en-tête du chat » et « Taille de l'icône de l'en-tête du chat ».
Thème de couleurs
L'interface propose de nombreux sélecteurs de code hexadécimal pour modifier chaque élément de la fenêtre de chat.
Arrière-plans : Personnalisez l’arrière-plan principal « Chat background » (#FFFFFF), l’« arrière-plan des messages client » et l’« arrière-plan des messages de l’assistant » (#000000). Vous pouvez également teinter des sections spécifiques comme l’« arrière-plan de la zone de texte de bienvenue » ou la « couleur d’arrière-plan de la FAQ » (#F9FAFB).
Bordures : Définissez les contours subtils du champ de message, des boîtes FAQ et des liens pour créer un aspect cohérent.
Questions fréquentes
L'onglet FAQ vous permet de créer des questions pré-écrites qui apparaissent avant même que l'utilisateur ne tape son premier message. Cela aide à résoudre instantanément les demandes courantes sans nécessiter de génération par IA.
Cliquez sur “+ Ajouter une FAQ” pour créer une nouvelle entrée.
Pour chaque entrée, saisissez la “Question” courante (par exemple, “Pouvez-vous expédier le produit aux États-Unis ?”) et mettez en forme la “Réponse” statique à l'aide de l'éditeur de texte enrichi (gras, italique, souligné, barré).
Vous pouvez glisser-déposer pour réorganiser les questions ou utiliser les icônes de crayon et de corbeille pour les modifier ou les supprimer.
Liens rapides
L'onglet Liens vous permet d'ajouter des boutons de navigation directs en bas de l'écran d'accueil du chat. C'est idéal pour orienter les utilisateurs vers des canaux de support alternatifs ou des pages importantes de la boutique.
Disposition en grille : Tout d'abord, définissez comment les liens sont affichés en sélectionnant le nombre de “Colonnes de grille” (par exemple, le définir à 3 les affichera sur une ligne horizontale).
Ajout de liens : Cliquez sur “+ Ajouter un lien” pour créer un nouveau bouton. Fournissez un “Titre du lien” (comme “WhatsApp” ou “Mail”) et saisissez l'“URL du lien” exacte (en utilisant des formats standard comme mailto: pour les e-mails ou les numéros de téléphone directs).
Icônes : Vous pouvez sélectionner dans une bibliothèque intégrée d'icônes vectorielles (comme une enveloppe, un téléphone, un globe ou un calendrier) pour représenter le lien visuellement. Vous pouvez également utiliser le bouton “Choisir un fichier” sous “Image personnalisée” pour télécharger votre propre icône.
Prêt à vendre plus sur Shopify ?
Installez Liliwi sur votre boutique Shopify et bénéficiez d'une configuration gratuite par notre équipe.
Utilisez le service complet pour seulement 1 $.