Les développeurs peuvent personnaliser l’endroit où la chat box s’affiche en ajoutant des options de configuration au code d’installation Smartsupp. Ce guide vous explique comment placer la chat box à gauche, la décaler de sa position standard et définir une position différente sur mobile.
Avancé : gérer la position dans le code d'installation
🟡 Remarque : Un accès développeur au code de votre site web est nécessaire. Le positionnement de la chat box à gauche requiert le forfait Solo ou supérieur.
Insérez les options dans la partie configuration de votre code d'installation, juste après la ligne _smartsupp.key et avant le loader (commençant par window.smartsupp||). La chat box les prend en compte lors de son lancement, elles doivent donc être configurées avant que le loader ne s’exécute.
Placer la chat box à gauche :
<script>var _smartsupp = _smartsupp || {};_smartsupp.key = 'YOUR_SMARTSUPP_KEY';_smartsupp.orientation = "left";// ...reste de votre code d'installation (le loader)</script>Délacer la chat box de sa position par défaut (valeurs en pixels) :
_smartsupp.offsetX = 20; // espace depuis le bord latéral _smartsupp.offsetY = 100; // espace depuis le bas de page
Définir une position différente uniquement sur mobile :
<script>var _smartsupp = _smartsupp || {};_smartsupp.key = 'YOUR_SMARTSUPP_KEY';if (window.innerWidth < 768) { _smartsupp.offsetY = 150;}// ...reste de votre code d'installation (le loader)</script>Pour mettre en place :
Ouvrez le code de votre site web et repérez le script d’installation Smartsupp.
Ajoutez les options nécessaires juste après la ligne
_smartsupp.key, avant le loader.Adaptez les valeurs selon les besoins de votre design.
Enregistrez les modifications puis rechargez votre site web dans une fenêtre de navigation privée ou en mode incognito pour vérifier la nouvelle position. Pensez aussi à tester la version mobile sur votre téléphone.
💡 Astuce : Les commandes comme smartsupp('chat:position', ...) ne sont pas prises en compte. La chat box les ignore et la console de votre navigateur affiche « Commande API inconnue ». Pour la liste complète des options de configuration, consultez la documentation développeur.
Et après ?
💡 Besoin d’une aide supplémentaire ? Contactez notre équipe de support — nous sommes à votre disposition pour vous accompagner !