EcomBot Docs

Style & Canaux Multiples

Personnalisez l'apparence du widget, générez des thèmes de couleurs et configurez le mode d'affichage idéal pour votre boutique.

L'onglet Style & Personnalisation de votre tableau de bord vous permet d'adapter parfaitement EcomBot à la charte graphique de votre marque pour offrir une expérience utilisateur haut de gamme qui favorise l'augmentation des ventes et la conversion.

Personnalisation Visuelle & Thèmes de Couleurs

L'interface visuelle de votre chatbot e-commerce doit s'intégrer de manière totalement transparente à votre boutique en ligne. EcomBot propose un système de thématisation intelligent et automatisé :

  1. Génération Automatique de la Couleur Secondaire : Sélectionnez simplement la couleur primaire de votre marque. Notre moteur calcule instantanément une couleur secondaire harmonieuse en appliquant un décalage de teinte HSL de 28 degrés. Cette formule mathématique garantit un contraste optimal pour l'accessibilité visuelle tout en respectant l'identité de votre marque.
  2. Palettes Premium Sélectionnées : Si vous préférez être guidé, vous pouvez choisir parmi une sélection de palettes de couleurs de qualité supérieure (Premium Curated Palettes) conçues par nos designers pour s'adapter aux tendances majeures du e-commerce (luxe, tech, bien-être, mode).
  3. Éditeur de CSS Avancé : Pour les marques exigeant un contrôle total, un panneau rétractable "CSS avancé" est mis à votre disposition. Il vous permet de surcharger manuellement les variables CSS d'EcomBot (par exemple, personnaliser l'ombre du bouton --chat-fab-shadow, ajuster les arrondis des fenêtres ou modifier le comportement au survol hover) pour obtenir un rendu au pixel près.

Widget Intelligent Auto-Adaptatif (Funnel-Adaptive)

EcomBot n'impose plus de configuration rigide. Grâce à notre approche Funnel-Adaptive, le widget s'adapte de manière 100% autonome et fluide selon la position du visiteur dans votre entonnoir de conversion (Funnel) :

1. Mode de Repos Initial Autonome

Selon la taille de votre catalogue de produits synchronisés, EcomBot choisit automatiquement le format d'ouverture optimal sur vos pages de découverte (Accueil, Catégories, etc.) :

  • Boutique à grand catalogue (plus de 50 produits) : Le mode Search-First (Assistant Centré) est activé par défaut. Il s'affiche sous forme d'une élégante Pilule de Recherche Sémantique centrée en bas de l'écran avec un arrière-plan flouté immersif (backdrop-blur) pour maximiser la découverte de produits. Un clic sur la croix "X" réduit intelligemment la pilule en un bouton flottant classique (FAB) persistant en sessionStorage pour libérer l'écran.
  • Boutique de niche (moins de 50 produits) : Le mode Support-First (Bouton Flottant) est privilégié d'office pour encourager le conseil personnalisé et la qualification directe.

2. Mode Réassurance Checkout (Anti-Abandon)

C'est le pilier CRO d'EcomBot. Dès que le client s'apprête à finaliser sa commande (navigation sur les pages /panier, /checkout, /commander ou signalement du milestone checkout par le plugin e-commerce) :

  • Repli Instantané & Silencieux : Le widget bascule instantanément en format Bouton Flottant compact dans le coin de l'écran.
  • Zéro Obstacle Visuel : L'overlay d'arrière-plan sombre est entièrement désactivé.
  • Bénéfice : Les formulaires de paiement et le tunnel de commande restent 100% visibles et dégagés pour éliminer toute friction d'achat, tout en gardant l'assistant et le support client à portée de clic pour répondre aux ultimes questions de réassurance.

3. Marges Découplées par Mode d'Affichage

Pour assurer une intégration visuelle irréprochable sur tous les terminaux et thèmes, EcomBot permet désormais aux marchands de définir des marges inférieures totalement indépendantes pour les deux formats principaux :

  • Mode Flottant (Bouton FAB) : Vous pouvez ajuster manuellement le décalage dans le coin inférieur droit afin de contourner parfaitement d'autres éléments flottants tiers (boutons WhatsApp personnalisés, ancres de retour en haut, ou boutons d'ajout au panier fixes).
  • Mode Centré (Pilule de Recherche) : La pilule de recherche centrée bénéficie de son propre réglage de marge. Cela évite qu'une marge personnalisée élevée sur le bouton flottant (par exemple, 80px pour laisser place à une bulle WhatsApp dans le coin) ne vienne décentrer la pilule de recherche principale ou la rendre asymétrique et inesthétique.
  • Valeurs de Repli Intelligentes & Ajustement Mobile : EcomBot applique automatiquement des marges responsives par défaut (16px sur mobile / 20px sur ordinateur pour la pilule de recherche centrée). De plus, le widget intègre une formule d'adaptation dynamique soustrayant automatiquement les marges de sécurité et paddings de l'hôte pour s'assurer que la pilule fermée ne soit jamais tronquée, même sur de très petits viewports mobiles (de 320px à 360px).
  • Anti-Doublon Visuel Proactif : En mode centré, si un message proactif statique ou IA est déclenché alors que le texte correspondant est déjà visible dans la pilule fermée, le widget masque automatiquement la bulle proactive supérieure redondante pour conserver une interface propre et aérée. Un clic sur la pilule injecte alors directement le message proactif dans le fil de discussion.

Ergonomie Avancée & Performance en Temps Réel

Nous avons doté EcomBot d'une intelligence de viewport avancée et d'un routage de base de données optimisé pour offrir la meilleure expérience utilisateur possible sur mobile, sans jamais ralentir votre site ou vider la batterie de vos visiteurs.

1. Évitement Intelligent d'Obstacles Mobiles

Sur mobile, les écrans de vente sont souvent encombrés d'éléments fixes (filtres de catégorie collants, badges de fidélité, boutons YITH, panneaux FacetWP). EcomBot prévient activement tout chevauchement gênant :

  • Scan Automatique du Viewport : Lorsqu'un client parcourt une page catalogue ou une catégorie sur mobile, le widget analyse dynamiquement le DOM à la recherche d'overlays flottants actifs.
  • Repositionnement Dynamique : Si un obstacle est détecté dans la zone d'affichage du widget, EcomBot se décale automatiquement vers le haut de la hauteur de l'obstacle majorée d'une marge de sécurité de 12px.
  • Préservation de la Batterie & Fluidité : Afin de maintenir un défilement à 60fps et d'économiser l'énergie de l'appareil, ce scan du viewport est strictement restreint aux pages catalogue et catégorie (là où apparaissent généralement les filtres mobiles), laissant les pages standards totalement légères.

2. Contournement Intelligent du Catalogue (Anti-Spam & Chargement Éclair)

Pour garantir un temps de chargement ultra-rapide du widget sur vos pages de collections et de catalogue général, EcomBot intègre un système de contournement intelligent des requêtes produit :

  • Prévention des Faux Positifs : Sur les pages de boutique globales ou de catégories de produits, EcomBot désactive la recherche contextuelle automatisée par produit. Cela élimine définitivement l'apparition de bulles d'accroche proactives non pertinentes (par exemple, proposer de l'aide sur un produit totalement hors sujet qui aurait matché via une recherche de texte brute).
  • Chargement Instantané : En évitant ces requêtes superflues sur les catalogues, le widget s'initialise jusqu'à 40 % plus rapidement, offrant une expérience sans latence dès la première seconde de visite.

Gestionnaire Multi-Canaux & Liens Rapides

EcomBot n'est pas uniquement une fenêtre de discussion. C'est un Hub de Contact complet et un assistant multi-canal. L'onglet "Canaux" vous permet de configurer le comportement d'ouverture du Widget :

  1. Chatbot IA : Le canal par défaut qui ouvre l'interface de discussion RAG.
  2. Formulaires de Contact (RGPD) : Si le client a une requête complexe nécessitant une intervention humaine, vous pouvez ajouter un formulaire natif. Ces formulaires embarquent nativement la gestion du consentement (case à cocher requise) pour être 100% conformes au RGPD.
  3. Liens Rapides & Groupes : Vous pouvez router vos visiteurs vers une FAQ externe, une page de suivi de commande, ou regrouper des canaux sous un même dossier (ex: "Nous contacter" contenant un lien E-mail et Téléphone).

Ces canaux sont instanciés de manière conditionnelle dans le DOM (React) afin de conserver un Widget ultra-léger qui n'impacte pas votre score Google PageSpeed.

1. Assistant Interactif de Liens Rapides

Concevoir votre hub de contact est plus simple que jamais. EcomBot intègre un constructeur interactif à préconfigurations disponible directement dans /admin/style. Les marchands peuvent configurer, trier et activer leurs raccourcis d'assistance et de réseaux sociaux en un seul clic.

2. Icônes de Réseaux Sociaux Autogénérées & Auto-Hébergées

Pour garantir une image de marque irréprochable et maximiser l'engagement des clients :

  • Icônes Vectorielles Haute Qualité : EcomBot auto-héberge des fichiers SVG optimisés pour les principaux réseaux (WhatsApp, Instagram, Facebook, TikTok, Messenger, YouTube).
  • Impact Performance Zéro : Contrairement aux widgets traditionnels qui chargent des polices d'icônes externes lourdes (comme FontAwesome ou Google Material Icons) qui pénalisent vos scores de performance mobile, nos icônes SVG s'affichent instantanément sans aucune surcharge réseau.

3. Normalisation & Formatage Intelligent des Liens

Pour éliminer les liens cassés et les mauvaises redirections, EcomBot agit comme un correcteur automatique lors de la sauvegarde de vos canaux :

  • WhatsApp : Nettoie automatiquement les espaces, les parenthèses, et convertit les numéros locaux (comme les numéros français à 10 chiffres commençant par 0) au format standard international wa.me/33... pour une fiabilité absolue.
  • Instagram : Supprime automatiquement le caractère @ des noms d'utilisateur saisis pour générer une URL directe valide vers le profil.
  • Liens Généraux : Détecte l'absence de protocole et ajoute automatiquement le préfixe https:// si celui-ci manque, évitant ainsi les erreurs de redirection brisées.

4. Transition Intelligente vers vos Canaux de Support

Pour offrir une expérience client irréprochable et maximiser la confiance des acheteurs, le chatbot intelligent d'EcomBot collabore directement avec vos canaux de contact configurés.

Lorsqu'un client pose une question relative au suivi de sa commande, à ses informations de compte, ou exprime un besoin d'assistance, le chatbot détecte automatiquement les canaux de contact que vous avez configurés (comme l'e-mail, WhatsApp, le téléphone ou vos formulaires de contact) et les présente au client sous forme de boutons d'action ou de liens.

Cette approche garantit une transition fluide vers votre équipe de support client et évite que l'intelligence artificielle n'invente un statut de commande ou des détails de livraison, puisqu'elle ne dispose pas d'un accès direct à vos systèmes internes et privés de gestion de commandes.

5. Dégradation Gracieuse & Résilience en cas d'Interruption

La continuité de service est critique pour votre e-commerce. En cas de micro-coupure réseau ou d'indisponibilité momentanée des services d'intelligence artificielle :

  • Détection Instantanée : Le widget intercepte l'erreur réseau ou le message de connexion interrompue.
  • Affichage Résilient : Au lieu d'une erreur technique obscure ou d'un écran figé, EcomBot affiche une bulle d'avertissement stylisée invitant le client à réessayer.
  • Escalade Support Intégrée : Si vous avez configuré des canaux de contact, le widget affiche automatiquement un bouton permettant au client d'être redirigé instantanément vers vos canaux de support réels pour finaliser sa demande.

Animations & Engagement (Vibe Coded)

L'expérience visuelle d'EcomBot est pensée pour un ressenti fluide et moderne :

  • Chargement Instantané (Fade-in) : Le widget apparaît de manière fluide sans aucun "flash blanc" au chargement de la page, assurant une intégration visuelle parfaite.
  • Indicateurs de Réflexion en Temps Réel : Pendant que l'IA cherche un produit, l'utilisateur voit des statuts dynamiques ("Recherche de promotions...", "Analyse des stocks...") au lieu d'un simple indicateur de chargement. Cela réduit drastiquement le taux d'abandon pendant les recherches complexes.

Ciblage & Règles de Visibilité par URL

Vous pouvez prendre le contrôle total des pages de votre boutique sur lesquelles EcomBot doit s'afficher ou se masquer grâce à notre éditeur de Règles de Visibilité :

  • Mode par défaut (Toutes les pages) : Le widget est actif sur l'ensemble de votre site marchand.
  • Règles d'Exclusion & d'Inclusion (Masquer / Afficher) : Configurez des règles précises basées sur les URL de vos pages.
  • Types de Correspondance :
    • Contient (contains) : La règle s'applique si l'URL courante contient la chaîne de caractères définie (ex: cart pour masquer sur toutes les pages de panier).
    • Exact (exact) : La règle s'applique si le chemin de l'URL correspond exactement au chemin défini (ex: /checkout).
  • Priorité Stricte : Les règles d'exclusion (exclude) ont une priorité absolue. Si une URL correspond à une règle d'exclusion, le widget est immédiatement désactivé et masqué en toute transparence sans impact sur le reste de la page.