L'aperçu de l'éditeur de widget affiche uniquement la vue desktop. Pour prévisualiser ou configurer votre widget sur mobile, cet article vous guide pas à pas.
Configuration
Contexte : vous avez configuré un widget classique sur desktop, positionné à droite. Par défaut sur mobile, un badge sera affiché et vous souhaitez adapter son affichage (à gauche).
- Dans ma stratégie, allez dans l'onglet "Position" > Paramètres avancés
- Cochez l'option Personnaliser le widget mobile et configurez votre widget
- Cliquez sur Tester sur mon site web en haut de l'aperçu
- Clic droit sur la page et sélectionnez Inspecter
💡 Raccourci : Appuyez sur F12 - Cliquez sur l'icône mobile/tablette dans la barre d'outils en haut
💡 Raccourci : Ctrl + Shift + M (Windows) ou Cmd + Shift + M (Mac) - Dans le menu déroulant en haut, vous pouvez sélectionner un modèle d'appareil (ex. : iPhone 12, Samsung Galaxy S20)
- Effectuez la configuration souhaitée
- Pour revenir à la vue desktop, fermez la fenêtre de droite en cliquant sur la croix en haut à droite de votre écran
Adaptation du widget mobile
L'aperçu de la version Mobile peut être trompeur car certains widgets s'adaptent automatiquement en affichant un Badge sur mobile.
En effet, lorsque vos visiteurs naviguent sur la version mobile de votre site, ils sont souvent plus pressés et sont certainement sur un écran plus petit. Votre widget doit donc être présent pour ceux qui apprécieraient de l'aide, tout en étant le plus discret possible pendant leur navigation.
Le tableau ci-dessous montre le rendu en fonction de l'appareil de votre visiteur.
| Widget | Affichage Desktop | Affichage Mobile |
|---|---|---|
| Starters Intégrés | Starters Intégrés | Starters Intégrés |
| Starters Flottants | Starters Flottants | Starters Flottants |
| Smart Banner | Smart Banner | Smart Banner |
| Classique | Classique | Badge |
| Badge | Badge | Badge |
| Bouton personnalisé | Bouton personnalisé | Badge |
| Messaging | Messaging | Badge |
| Mini badge (déprécié) | Mini badge | Mini badge |
| Invitation (déprécié) | Invitation | Badge |
Exemple : si vous activez le widget classique dans votre configuration (desktop et mobile), vos visiteurs sur mobile verront un Badge affiché.
Bonnes pratiques
- Testez sur plusieurs modèles d'appareils pour vérifier les différentes tailles d'écran
- Assurez-vous que le widget ne cache pas de contenu important
- Vérifiez la lisibilité (moins visible que vos boutons principaux)
💡 Astuce : utilisez le design de vos boutons secondaires - Toujours tester sur de vrais appareils mobiles avant de passer en production