Le Hover Bubble CTA est un petit bouton flottant placé dans un coin de la page. Quand un visiteur le survole (ou le touche sur mobile), une bulle de message s’ouvre avec un ou deux appels à l’action. C’est une façon légère et discrète de proposer de l’aide, une démo, un lien de réservation ou un chat — sans popup qui interrompt qui que ce soit. Il existe en deux orientations : un bouton de coin classique, ou un onglet vertical fin collé au bord gauche ou droit. Sa position à l’écran se règle à l’étape Lieu de l’action.
Quand l’utiliser
- Aide en direct ou chat — un bouton « Besoin d’aide ? » qui ouvre votre widget de chat au clic.
- Réserver une démo ou un appel — ouvrir une popup de prise de rendez-vous, ou renvoyer vers une page de réservation.
- Onglet latéral permanent — un onglet vertical Aide ou Avis fixé à un bord de l’écran, qui reste discret tant qu’on ne le survole pas.
L’ajouter à une action
Dans une action Popup, ouvrez le sélecteur de modèles et choisissez Hover Bubble CTA. Stylisez n’importe quel élément en cliquant dessus dans l’aperçu. Utilisez l’étape Lieu de l’action pour placer le bouton, et réglez la direction correspondante sous Placement pour que la bulle ne déborde pas de l’écran.
Réglages
Style
- Colour Preset — brand, dark, light ou blue. Colore ensemble le bouton, la bulle et les boutons d’action.
- Drop Shadow — activée ou désactivée.
- Button / Bubble / Title / Text CSS — ouvre l’éditeur CSS pour remplacer le préréglage sur n’importe quelle partie.
Bouton
- Orientation — Horizontal est un bouton flottant classique dans un coin. Vertical est un onglet fin collé au bord gauche ou droit, avec son libellé tourné sur le côté — idéal pour un onglet Aide ou Avis permanent. En mode vertical, la bulle s’ouvre toujours vers l’intérieur, à l’opposé du bord, et Button Sits On (sous Placement) choisit le bord gauche ou droit.
- Vertical Icon Position — utilisé uniquement en orientation verticale : place l’icône en top de l’onglet (au-dessus du libellé), en bottom, ou none pour la masquer et obtenir un onglet texte seul.
- Shape — pill (libellé à côté de l’icône), circle (icône seule) ou square. Ignoré en orientation verticale, qui est toujours un onglet de bord.
- Size, Icon, Custom Icon Image — une photo de la personne qui répond peut mieux convertir qu’une icône.
- Text Label — facultatif ; masqué automatiquement sur téléphone pour que le bouton devienne un cercle.
Message et actions
- Bubble Title and Text — l’accroche et une ou deux lignes d’appui.
- First / Second Action — chacune est un bouton standard : choisissez Open a link pour envoyer le visiteur vers une URL, ou Run JavaScript pour ouvrir un widget de chat (Intercom, Crisp, HubSpot, Tidio, etc.), une popup de réservation, ou déclencher un événement.
- Action Look — link, button ou outline. Action Icon — une petite icône facultative. Les deux actions sont côte à côte sur une seule ligne.
Animation
- Attention Animation — pulse, bounce, wiggle, glow ou ring. Elle s’arrête pendant le survol, et elle est désactivée pour les visiteurs qui demandent à leur système de réduire les animations.
- Open the Bubble by Itself — affiche le message une fois de lui-même après un délai, puis le masque à nouveau. Sur téléphone, il n’y a pas de survol : laissez donc cette valeur au-dessus de zéro.
Placement
- Bubble Opens Toward — horizontal uniquement : alignez-le sur le coin, de sorte qu’un coin inférieur s’ouvre vers le haut (Up) et un coin supérieur vers le bas (Down). En orientation verticale, la bulle s’ouvre toujours vers l’intérieur depuis le bord : ce réglage est donc ignoré.
- Button Sits On — alignement sur le bord. En orientation verticale, il choisit le bord gauche ou droit auquel l’onglet est fixé.
- Spacing, Show on Mobile — l’espace autour du bouton, et s’il apparaît sur téléphone.
Comportement et fermeture
- After an Action is Clicked — Dismiss (pour cette vue, revient à la page suivante), Hide for this session, Do not show again (utilise la fréquence d’affichage de l’action), ou Keep visible.
- What the X Closes — fermer uniquement la bulle (le bouton reste), masquer pour cette vue, masquer pour cette session, ou ne plus afficher.
Conseils
- Horizontal : alignez la direction de la bulle sur le coin. Un bouton en bas à droite doit s’ouvrir vers le haut (Up) et se placer à droite (Right) pour que la bulle reste à l’écran.
- Vertical : choisissez le bord avec Button Sits On. Right fixe l’onglet au bord droit et ouvre la bulle vers la gauche ; Left fait l’inverse. La direction de la bulle est automatique.
- Dismiss n’est pas Do Not Show Again. Dismiss masque le bouton pour la vue de page en cours et il revient à la page suivante ; Do Not Show Again est régi par la fréquence d’affichage de l’action.
- Pour ouvrir un widget de chat, réglez une action sur Run JavaScript et saisissez la commande d’ouverture du fournisseur — par exemple un appel d’une ligne qui ouvre Intercom, Crisp, HubSpot ou Tidio.
Pour aller plus loin
Le placement se règle à l’étape Lieu de l’action. Pour la différence entre fermer une action et la supprimer plus longtemps, consultez les réglages de fréquence d’affichage de votre action.