La bannière d'annonce est un outil puissant pour capter l'attention de tes visiteurs instantanément.
Utilise-la pour promouvoir des offres limitées, annoncer de nouveaux programmes ou partager des actualités importantes.
Ce guide couvre tout, de la configuration de base aux comptes à rebours avancés.
Où trouver cette section
Va dans le panneau admin
Clique sur Website dans la barre latérale
Sélectionne l'onglet Announcement
Tu verras une page avec cinq onglets de configuration : Content, Style, Timer, Action et Advanced.
Étape 1 : Active ta bannière et ajoute du contenu
Onglet Content
Commence par activer ta bannière et rédiger ton message.
Activer la bannière
Active l'interrupteur pour rendre ta bannière visible.
Quand c'est activé, tu vois "Banner is visible on your website".
Quand c'est désactivé, ça affiche "Banner is currently hidden".
Texte de la bannière
Écris ton message d'annonce dans la zone de texte.
Garde-le court et percutant — c'est ce que les visiteurs voient en premier
Bons exemples :
"🎉 Offre nouvelle année : -20% sur tous les programmes !"
"Places limitées pour janvier — Réserve ton appel gratuit"
"Nouveau programme en ligne la semaine prochaine 🚀"
Mauvais exemples :
"Bienvenue sur mon site, je suis coach sportif et je propose différents services dont..." (trop long)
"Clique ici" (pas informatif)
💡 Astuce : Les emojis fonctionnent très bien dans les bannières pour attirer l'attention.
Le texte se traduit automatiquement dans tes autres langues activées.
Avatar (optionnel)
Télécharge une petite photo de profil qui apparaîtra sur le côté gauche de ta bannière.
Ça ajoute une touche personnelle et rend l'annonce plus humaine.
Étape 2 : Personnalise le style
Onglet Style
Fais correspondre ta bannière à ta marque et choisis où elle apparaît.
Options de placement
Option | Description |
Inline (full width) | La bannière occupe toute la largeur de l'écran |
Floating (card) | La bannière apparaît comme une petite carte flottante |
Options de position
Option | Description |
Top | La bannière apparaît tout en haut de la page |
Bottom | La bannière apparaît en bas de l'écran |
Paramètres de couleur
Par défaut, ta bannière utilise ta couleur de marque (définie dans Website Settings → Branding).
Tu verras un badge "Using branding color" avec un aperçu de la couleur.
Pour utiliser une couleur personnalisée :
Désactive le toggle "Use branding color"
Un sélecteur de couleur apparaît — choisis ta couleur de fond
Ajuste optionnellement la couleur du texte pour un meilleur contraste
💡 Astuce : Le texte blanc sur ta couleur de marque fonctionne généralement bien. Assure-toi d'avoir assez de contraste pour la lisibilité.
Étape 3 : Ajoute un compte à rebours (optionnel)
Onglet Timer
Crée de l'urgence en ajoutant un compte à rebours en temps réel à ta bannière.
Activer le compte à rebours
Active l'interrupteur pour ajouter un timer.
Une fois activé, tu verras des options supplémentaires.
Lier au timer des tarifs
Si tu as déjà un timer dans ta section tarifs, tu peux les lier ensemble. Clique sur "Use pricing timer" pour synchroniser les dates automatiquement. Ça garde tes dates d'offre cohérentes sur tout ton site.
Paramètres manuels du timer
Si tu ne lies pas aux tarifs, définis tes propres dates :
Date de début (optionnelle) : Quand le compte à rebours commence à s'afficher
Date et heure de fin : Quand l'offre expire et le compte atteint zéro
Styles de timer
Choisis parmi 8 designs de timer :
Style | Idéal pour |
Boxed | Look clair et professionnel avec unités étiquetées |
Minimal | Texte simple en ligne (02h 15m 30s) |
Pills | Badges compacts arrondis |
Bold | Grands chiffres accrocheurs avec deux-points |
Elegant | Raffiné avec fonds subtils |
Flip | Style horloge à rabat avec effet 3D |
Neon | Effet lumineux pour offres dynamiques |
Gradient | Moderne avec fonds colorés |
Effets d'animation
Ajoute du mouvement pour attirer l'attention sur les secondes :
Animation | Effet |
None | Pas d'animation |
Pulse | Pulsation douce sur les secondes |
Bounce | Animation de rebond |
Glow | Effet d'ombre lumineuse sur tout le timer |
Shake | Effet de secousse sur les secondes |
Texte avant le timer
Ajoute du texte qui apparaît avant le compte à rebours, comme "L'offre se termine dans" ou "Dépêche-toi !"
Étape 4 : Configure l'action
Onglet Action
Décide ce qui se passe quand les visiteurs interagissent avec ta bannière.
Types d'action
Type | Ce que ça fait |
None (just show text) | La bannière affiche ton message sans action cliquable |
Click anywhere opens URL | Cliquer n'importe où sur la bannière ouvre un lien |
Show CTA button | Affiche un bouton avec texte et lien personnalisés |
Ask for reactions | Affiche des pouces haut/bas pour les retours visiteurs |
Pour les actions lien ou bouton :
URL : Entre où les visiteurs doivent aller. Peut être une URL complète (https://...) ou un lien interne (#coaching, /ton-username/tools)
Cible du lien : Choisis "Same tab" ou "New tab"
Pour l'action bouton uniquement :
Texte du bouton : Texte sur le bouton (ex : "Réserver", "Profiter de l'offre", "En savoir plus")
Couleur du bouton (optionnel) : Couleur personnalisée du bouton, blanc par défaut
Étape 5 : Paramètres avancés
Onglet Advanced
Affine le comportement de ta bannière.
Autoriser la fermeture
Active ou désactive la possibilité pour les visiteurs de fermer la bannière avec un X. Si désactivé, la bannière reste visible.
Après fermeture (quand autorisée)
Option | Comportement |
Show again on next visit | La bannière réapparaît à la prochaine session de navigation |
Hide for X days | La bannière reste cachée pendant le nombre de jours spécifié |
Never show again | La bannière ne s'affiche plus jamais pour ce visiteur |
💡 Astuce : "Show again on next visit" est généralement le mieux pour les offres limitées. "Never show again" fonctionne pour les annonces ponctuelles.
Programmation de la bannière Définis des dates précises pour quand ta bannière doit apparaître et disparaître :
Date de début : La bannière n'apparaît qu'après cette date
Date de fin : La bannière se cache automatiquement après cette date
C'est parfait pour les promos qui commencent plus tard ou doivent s'arrêter automatiquement.
Améliorer ta bannière avec l'IA
Clique sur le bouton "Improve with AI" en haut de la page pour que Dwayne AI suggère un meilleur texte de bannière et de bouton. Ça coûte 1 crédit IA.
Sauvegarder et publier
Après avoir configuré ta bannière :
Clique sur "Save banner" pour sauvegarder tes modifications
Clique sur "Publish" en haut du panneau admin pour mettre en ligne
⚠️ Important : Ta bannière n'apparaîtra pas sur ton site live tant que tu n'auras pas publié. Tu verras un rappel si tu as des modifications non publiées.
Tester ta bannière
Après avoir fermé ta bannière pendant les tests, utilise le bouton "Clear dismissed state (testing)" en bas de la page. Ça réinitialise l'état fermé pour que tu puisses revoir ta bannière.
Bonnes pratiques
À faire :
Garde ton message sous 15 mots
Inclus un bénéfice ou une offre claire
Utilise les emojis avec parcimonie pour l'intérêt visuel
Définis une date de fin pour les offres limitées
Teste ta bannière sur mobile
Lie vers une page spécifique ou réservation, pas juste ta page d'accueil
À éviter :
Écrire des paragraphes de texte
Utiliser tout en majuscules (ça fait agressif)
Mettre "never show again" pour des offres récurrentes
Oublier de publier après avoir sauvegardé
Utiliser des couleurs à faible contraste qui rendent le texte difficile à lire
Résolution de problèmes
Problème | Solution |
La bannière n'apparaît pas | Vérifie que "Enable banner" est activé et que tu as publié |
La bannière réapparaît après fermeture | Vérifie ton paramètre de fermeture dans l'onglet Advanced |
Le timer affiche 00:00:00 | Ta date de fin est passée — mets-la à jour vers une date future |
Les couleurs semblent fausses | Assure-toi que la couleur du texte a assez de contraste avec le fond |
La bannière apparaît puis disparaît | Vérifie les dates de programmation dans l'onglet Advanced |
Impossible de tester la bannière | Utilise le bouton "Clear dismissed state" en bas |