De Hover Bubble CTA is een kleine zwevende knop in een hoek van de pagina. Als een bezoeker erover zweeft (of er op mobiel op tikt), opent er een tekstballon met één of twee calls-to-action. Het is een lichte, niet-opdringerige manier om hulp, een demo, een boekingslink of een chat aan te bieden — zonder dat een pop-up iemand onderbreekt. Er zijn twee oriëntaties: een normale hoekknop, of een smal verticaal tabblad strak tegen de linker- of rechterrand. Waar hij op het scherm staat, stel je in bij de stap Locatie van de actie.
Wanneer je hem gebruikt
- Live hulp of chat — een knop “Hulp nodig?” die bij een klik je chatwidget opent.
- Een demo of gesprek boeken — open een pop-up om in te plannen, of link naar een boekingspagina.
- Vast zijtabblad — een verticaal tabblad Help of Feedback, vastgezet aan een schermrand, dat uit de weg blijft totdat iemand eroverheen zweeft.
Aan een actie toevoegen
Open in een pop-upactie de templatekiezer en kies Hover Bubble CTA. Geef elk element een stijl door erop te klikken in het voorbeeld. Gebruik de stap Locatie van de actie om de knop te plaatsen, en stel onder Placement de bijpassende richting in, zodat de ballon niet buiten de rand valt.
Instellingen
Stijl
- Colour Preset — brand, dark, light of blue. Kleurt de knop, de ballon en de actieknoppen samen.
- Drop Shadow — aan of uit.
- Button / Bubble / Title / Text CSS — open de CSS-editor om de preset voor elk onderdeel te overschrijven.
Knop
- Orientation — Horizontal is een normale zwevende knop in een hoek. Vertical is een smal tabblad strak tegen de linker- of rechterrand, met het label gedraaid — ideaal voor een vast tabblad Help of Feedback. In de verticale modus opent de ballon altijd naar binnen, weg van de rand, en Button Sits On (onder Placement) kiest de linker- of rechterrand.
- Vertical Icon Position — alleen gebruikt bij verticale oriëntatie: zet het icoon top in het tabblad (boven het label), bottom, of none om het te verbergen voor een tabblad met alleen tekst.
- Shape — pill (label naast het icoon), circle (alleen icoon) of square. Wordt genegeerd bij verticale oriëntatie, die altijd een randtabblad is.
- Size, Icon, Custom Icon Image — een foto van de persoon die antwoordt, kan beter converteren dan een icoon.
- Text Label — optioneel; wordt op telefoons automatisch verborgen, zodat de knop een cirkel wordt.
Bericht & acties
- Bubble Title and Text — de haak en één of twee ondersteunende regels.
- First / Second Action — elk is een standaardknop: kies Open a link om de bezoeker naar een URL te sturen, of Run JavaScript om een chatwidget te openen (Intercom, Crisp, HubSpot, Tidio enzovoort), een boekingspop-up te openen of een event af te vuren.
- Action Look — link, button of outline. Action Icon — een optioneel klein icoon. De twee acties staan naast elkaar op één regel.
Animatie
- Attention Animation — pulse, bounce, wiggle, glow of ring. Stopt zolang de bezoeker eroverheen zweeft, en staat uit voor bezoekers die hun systeem vragen minder beweging te tonen.
- Open the Bubble by Itself — toon het bericht na een vertraging één keer vanzelf en verberg het daarna weer. Op telefoons bestaat hover niet, dus laat dit boven nul staan.
Plaatsing
- Bubble Opens Toward — alleen horizontaal: stem het af op de hoek, dus een hoek onderaan opent naar Up en een hoek bovenaan naar Down. Bij verticale oriëntatie opent de ballon altijd naar binnen vanaf de rand, dus dan wordt dit genegeerd.
- Button Sits On — uitlijning aan de rand. Bij verticale oriëntatie kiest dit de linker- of rechterrand waaraan het tabblad vastzit.
- Spacing, Show on Mobile — ademruimte rond de knop, en of hij op telefoons verschijnt.
Gedrag & sluiten
- After an Action is Clicked — Dismiss (deze weergave, komt terug op de volgende pagina), Hide for this session, Do not show again (gebruikt de Display Frequency van de actie) of Keep visible.
- What the X Closes — alleen de ballon sluiten (de knop blijft), verbergen voor deze weergave, verbergen voor deze sessie, of niet meer tonen.
Handige tips
- Horizontaal: stem de richting van de ballon af op de hoek. Een knop rechtsonder moet naar Up openen en op Right staan, zodat de ballon op het scherm blijft.
- Verticaal: kies de rand met Button Sits On. Right zet het tabblad vast aan de rechterrand en opent de ballon naar links; Left doet het omgekeerde. De richting van de ballon gaat automatisch.
- Dismiss is niet Do Not Show Again. Dismiss verbergt de knop voor de huidige paginaweergave en hij komt terug op de volgende pagina; Do Not Show Again wordt geregeld door de Display Frequency van de actie.
- Om een chatwidget te openen, stel je een actie in op Run JavaScript en plak je het openingscommando van de provider — bijvoorbeeld een aanroep van één regel die Intercom, Crisp, HubSpot of Tidio opent.
Verder lezen
De plaatsing stel je in bij de stap Locatie van de actie. Zie voor het verschil tussen een actie wegklikken en haar langer onderdrukken de instellingen voor Display Frequency van je actie.