Der Hover Bubble CTA ist ein kleiner schwebender Button in einer Ecke der Seite. Fährt ein Besucher mit der Maus darüber (oder tippt ihn auf dem Smartphone an), öffnet sich eine Sprechblase mit einem oder zwei Calls-to-Action. So bieten Sie leichtgewichtig und unaufdringlich Hilfe, eine Demo, einen Buchungslink oder einen Chat an — ohne dass ein Popup jemanden unterbricht. Es gibt zwei Ausrichtungen: einen normalen Eck-Button oder einen schlanken senkrechten Reiter bündig am linken oder rechten Rand. Wo er auf dem Bildschirm sitzt, legen Sie im Schritt Location der Aktion fest.
Wann Sie ihn einsetzen
- Live-Hilfe oder Chat — ein Button „Brauchen Sie Hilfe?“, der per Klick Ihr Chat-Widget öffnet.
- Demo oder Gespräch buchen — ein Terminbuchungs-Popup öffnen oder auf eine Buchungsseite verlinken.
- Dauerhafter Seitenreiter — ein senkrechter Reiter für Hilfe oder Feedback, an einem Bildschirmrand fixiert, der nicht stört, bis man mit der Maus darüberfährt.
Zu einer Aktion hinzufügen
Öffnen Sie in einer Popup-Aktion die Vorlagenauswahl und wählen Sie Hover Bubble CTA. Gestalten Sie ein beliebiges Element, indem Sie es in der Vorschau anklicken. Platzieren Sie den Button im Schritt Location der Aktion und stellen Sie unter Placement die passende Richtung ein, damit die Sprechblase nicht über den Rand hinausläuft.
Einstellungen
Stil
- Colour Preset — brand, dark, light oder blue. Färbt Button, Sprechblase und Aktions-Buttons gemeinsam ein.
- Drop Shadow — an oder aus.
- Button / Bubble / Title / Text CSS — öffnet den CSS-Editor, um das Preset für jeden Teil zu überschreiben.
Button
- Orientation — Horizontal ist ein normaler schwebender Button in einer Ecke. Vertical ist ein schlanker Reiter bündig am linken oder rechten Rand, mit seitlich gedrehter Beschriftung — ideal für einen dauerhaften Hilfe- oder Feedback-Reiter. Im vertikalen Modus öffnet sich die Sprechblase immer nach innen, weg vom Rand, und Button Sits On (unter Placement) wählt den linken oder rechten Rand.
- Vertical Icon Position — nur bei vertikaler Ausrichtung: das Symbol top (über der Beschriftung), bottom oder none, um es für einen reinen Text-Reiter auszublenden.
- Shape — pill (Beschriftung neben dem Symbol), circle (nur Symbol) oder square. Wird bei vertikaler Ausrichtung ignoriert, die immer ein Randreiter ist.
- Size, Icon, Custom Icon Image — ein Foto der Person, die antwortet, kann besser konvertieren als ein Symbol.
- Text Label — optional; auf Smartphones automatisch ausgeblendet, sodass der Button zum Kreis wird.
Message & Actions
- Bubble Title and Text — der Aufhänger und eine oder zwei ergänzende Zeilen.
- First / Second Action — jeweils ein Standard-Button: Wählen Sie Open a link, um den Besucher zu einer URL zu schicken, oder Run JavaScript, um ein Chat-Widget (Intercom, Crisp, HubSpot, Tidio usw.) oder ein Buchungs-Popup zu öffnen oder ein Ereignis auszulösen.
- Action Look — link, button oder outline. Action Icon — ein optionales kleines Symbol. Die beiden Aktionen stehen nebeneinander in einer Zeile.
Animation
- Attention Animation — pulse, bounce, wiggle, glow oder ring. Sie stoppt, während der Besucher mit der Maus darüber ist, und ist für Besucher ausgeschaltet, die in ihrem System reduzierte Bewegung eingestellt haben.
- Open the Bubble by Itself — die Nachricht nach einer Verzögerung einmal von selbst anzeigen und dann wieder ausblenden. Auf Smartphones gibt es kein Hovern, lassen Sie den Wert daher über null.
Placement
- Bubble Opens Toward — nur horizontal: passend zur Ecke, also öffnet eine untere Ecke nach Up und eine obere nach Down. Bei vertikaler Ausrichtung öffnet sich die Sprechblase immer vom Rand nach innen, daher wird dies ignoriert.
- Button Sits On — Ausrichtung am Rand. Bei vertikaler Ausrichtung wählt dies den linken oder rechten Rand, an dem der Reiter fixiert ist.
- Spacing, Show on Mobile — Abstand um den Button und ob er auf Smartphones erscheint.
Behavior & Close
- After an Action is Clicked — Dismiss (diese Ansicht, kommt auf der nächsten Seite zurück), Hide for this session, Do not show again (nutzt die Display Frequency der Aktion) oder Keep visible.
- What the X Closes — nur die Sprechblase schließen (der Button bleibt), für diese Ansicht ausblenden, für diese Sitzung ausblenden oder nicht mehr anzeigen.
Tipps
- Horizontal: Richtung der Sprechblase an die Ecke anpassen. Ein Button unten rechts sollte nach Up öffnen und auf Right sitzen, damit die Sprechblase im Bildschirm bleibt.
- Vertikal: den Rand mit Button Sits On wählen. Right fixiert den Reiter am rechten Rand und öffnet die Sprechblase nach links; Left macht das Gegenteil. Die Richtung der Sprechblase ergibt sich automatisch.
- Dismiss ist nicht Do Not Show Again. Dismiss blendet den Button für den aktuellen Seitenaufruf aus, und er kommt auf der nächsten Seite zurück; Do Not Show Again wird über die Display Frequency der Aktion gesteuert.
- Um ein Chat-Widget zu öffnen, stellen Sie eine Aktion auf Run JavaScript und tragen den Öffnen-Befehl des Anbieters ein — zum Beispiel einen einzeiligen Aufruf, der Intercom, Crisp, HubSpot oder Tidio öffnet.
Weiterführende Lektüre
Die Platzierung legen Sie im Schritt Location der Aktion fest. Den Unterschied zwischen dem Schließen einer Aktion und ihrer längeren Unterdrückung finden Sie in den Einstellungen zur Display Frequency Ihrer Aktion.