Pour vérifier le rendu de votre widget sur mobile directement sur votre site, utilisez le mode test de l’Éditeur de Widget avec la vue responsive de votre navigateur. Cet article vous guide pas à pas.
Configuration
- Dans votre stratégie, ouvrez l’onglet Position, puis dépliez Paramètres avancés.
- Activez Personnaliser le widget mobile, puis choisissez la position (En bas à gauche ou En bas à droite) et les distances (Distance du côté, Distance du bas).
- Cliquez sur Tester sur mon site, en haut de l’aperçu. La stratégie est enregistrée et votre site s’ouvre en mode test, dans le même onglet.
- Faites un clic droit sur la page et sélectionnez Inspecter.
💡 Raccourci : F12 (Windows) ou Cmd + Option + I (Mac) - 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, sélectionnez un modèle d’appareil (par exemple iPhone 12 ou Samsung Galaxy S20).
- Vérifiez le rendu de votre widget.
- Pour revenir à la vue ordinateur, fermez le panneau des outils de développement en cliquant sur la croix en haut à droite.
Cas des Conversation Starters intégrés
La position mobile se règle avec la case Personnaliser la position du widget sur mobile, en bas de l’onglet Position. Une fois cochée, elle ouvre le bloc Position sur mobile : sélecteur CSS, emplacement et marges propres au mobile.
Adaptation du widget mobile
Sur mobile, vos visiteurs naviguent souvent plus vite et sur un écran plus petit. Votre widget doit rester accessible à ceux qui ont besoin d’aide, tout en étant le plus discret possible. C’est pourquoi certains widgets s’affichent automatiquement sous forme de Badge sur mobile.
L’aperçu de la stratégie affiche la vue ordinateur, la vue mobile ou les deux, selon le Type d’appareil choisi dans l’onglet Widget et conditions.
Le tableau ci-dessous indique le rendu selon l’appareil de votre visiteur.
| Widget | Affichage ordinateur | Affichage mobile |
|---|---|---|
| Conversation Starters intégrés | Conversation Starters intégrés | Conversation Starters intégrés |
| Conversation Starters flottants | Conversation Starters flottants | Conversation Starters flottants |
| Smart banner (activable sur demande) | Smart banner | Badge |
| Classique | Classique | Badge |
| Badge (stratégie Mobile uniquement) | – | Badge |
| Bouton personnalisé | Bouton personnalisé | Bouton personnalisé |
| Messaging | Messaging | Badge |
| Mini badge (déprécié) | Mini badge | Mini badge |
| Invitation (déprécié) | Invitation | Badge |
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.
- Gardez un widget discret, moins visible que vos boutons principaux.
💡 Astuce : reprenez le design de vos boutons secondaires. - Avant la mise en ligne, testez aussi sur de vrais appareils mobiles.