Floating-CTA
Ein Floating-CTA ist ein kompakter Call-to-Action-Button oder ein Widget, das über dem Seiteninhalt schwebt, meist in einer Ecke verankert, und beim Scrollen an Ort und Stelle bleibt.
Das Wichtigste in Kürze
- Ein Floating-CTA liegt mit festem Abstand und hohem z-index über einer Ecke.
- Die Ecke entscheidet: Daumenzone erhöht gewollte wie versehentliche Taps.
- Sinnvoll auf Inhaltsseiten, deren Template keinen eigenen Funnel-Einstieg hat.
- Auf Funnel-Seiten mit eigenem Haupt-CTA gehört er unterdrückt.
- Zu klein für Erklärungen, also nur für bereits verstandene Aktionen geeignet.
Im Detail
Ein Floating-CTA ist ein Overlay-Element, das mit festem Abstand an einer Viewport-Ecke sitzt und über einen ausreichend hohen z-index über der Seite liegt. Da es nie die volle Breite einnimmt, ist es nicht Teil des Seitenrasters und lässt sich ergänzen, ohne darunterliegende Inhalte zu verschieben. Meist hängt eine Anzeigeregel daran: nach einer Verzögerung, ab einem Scrollanteil oder wenn der Mauszeiger Richtung Tableiste wandert. Enthalten ist üblicherweise ein Icon oder ein kurzes Label, manchmal beides.
Die gewählte Ecke bestimmt einen großen Teil der Wirkung. Auf Smartphones liegt unten rechts im natürlichen Daumenbogen, was sowohl gewollte als auch versehentliche Taps erhöht, während die oberen Ecken sicherer, aber leichter zu übersehen sind. Der zweite Hebel ist die Verzögerung: Sofortiges Erscheinen erzieht Nutzer dazu, das Widget vor dem Lesen wegzuklicken, sehr spätes Erscheinen erreicht nur den kleinen Rest. Die Größe wägt Reichweite gegen Störung ab, denn eine größere Pille fällt mehr auf und verdeckt mehr.
Teams setzen Floating-CTAs dort ein, wo der eigentliche Conversion-Pfad woanders liegt: Dokumentation, Feature-Seiten, Blogbeiträge. Statt jedes Template um einen Funnel-Einstieg herum neu zu bauen, verlinkt ein dauerhafter Button dorthin. Im Quiz-Funnel heißt das: Ein Leser kann die Scorecard von jeder Inhaltsseite aus öffnen, wobei ein Quellparameter festhält, welcher Artikel ihn geschickt hat. Auf den Funnel-Seiten selbst wird der Button in der Regel unterdrückt, weil dort bereits ein eigener CTA steht.
Das Muster bricht zusammen, sobald mehrere schwebende Elemente konkurrieren. Chat-Launcher, Icon zum erneuten Öffnen der Cookie-Einstellungen, Nach-oben-Pfeil und CTA-Pille beanspruchen dieselben Ecken; das zuletzt gerenderte gewinnt optisch, die anderen werden unerreichbar. Floating-CTAs transportieren zudem kaum Nuancen: Für die Erklärung eines unbekannten Angebots fehlt der Platz, sie funktionieren also nur für Aktionen, die der Besucher aus der gelesenen Seite bereits versteht. Auf Seiten, deren Inhalt bis an den Rand reicht, etwa breite Tabellen oder Karten, verdeckt das Overlay dauerhaft eine Ecke davon.
Beispiel aus der Praxis
So wird es gemessen
Vergleichen Sie Impressionen mit Klicks: Wie viele Sitzungen haben den Button nach Verzögerung oder Scroll-Trigger überhaupt gesehen, und wie viele davon haben getippt? Eine niedrige Rate bei hohen Impressionen deutet meist auf Platzierung oder Label hin, nicht auf fehlende Nachfrage. Prüfen Sie danach, was folgt: Klicks mit anschließend sehr kurzen Sitzungen sprechen für Neugier statt für echte Absicht.
Werten Sie nach Einstiegsseite aus, nicht seitenweit. Der Sinn des Musters liegt darin, Leser aus Templates ohne eigenen Funnel-Einstieg abzuholen, also schlüsseln Sie Klicks nach Artikel oder Doku-Seite auf. Verfolgen Sie außerdem die Schließrate: Ein wachsender Anteil an Besuchern, die den Button wegklicken, warnt früh vor zu kurzer Verzögerung oder zu großer Pille.
Häufige Fehler
Der klassische Fehlschlag ist die Eckenkollision. Chat-Widget und Floating-CTA landen beide standardmäßig unten rechts, eines verdeckt das andere, und niemand merkt es, weil auf dem Desktop mit eingeklapptem Widget getestet wurde. Weisen Sie jedem dauerhaften Element eine explizite Ecke und einen Abstand zu, maximal eines pro Ecke, und prüfen Sie auf einem kleinen Display mit tatsächlich geladenen Drittanbieter-Skripten statt im reduzierten Staging-Build.
Der zweite Fehler ist ein Button ohne Ausweg. Ein Floating-CTA, der sich nicht schließen lässt, verfolgt den Leser durch einen ganzen Langtext und wird zum Ärgernis statt zur Abkürzung. Geben Sie ihm ein kleines Schließen-Element, merken Sie sich diese Entscheidung für die Sitzung und blenden Sie ihn bei geöffnetem Modal, Lightbox oder Formular automatisch aus. Der Tastaturfokus sollte ihn zudem an sinnvoller Stelle erreichen, nicht zuerst.
Häufig gestellte Fragen
Ist ein Floating-CTA dasselbe wie ein Pop-up?
Nein. Ein Floating-CTA ist ein dauerhafter, unaufdringlicher Button, der in einer Ecke bleibt und nie den ganzen Bildschirm blockiert. Ein Pop-up unterbricht die Seite mit einem Overlay, das Aufmerksamkeit fordert und meist geschlossen werden muss.
Wo sollte ich einen Floating-CTA platzieren?
Die untere rechte Ecke ist am gebräuchlichsten, da sie auf Mobilgeräten nahe der natürlichen Daumenposition liegt. Achten Sie darauf, dass er keine Chat-Widgets, Navigation oder Inhalte überlagert, und lassen Sie genug Abstand gegen Fehlklicks.
Verlangsamt ein Floating-CTA meine Seite?
Für sich genommen hat er kaum Einfluss auf die Performance, da es ein kleines Element ist. Das Risiko liegt im Laden über ein schweres Drittanbieter-Skript, daher ist eine leichtgewichtige, native Umsetzung vorzuziehen.
Wo platziert man einen Floating-CTA auf Mobilgeräten?
Unten rechts ist der übliche Standard, weil die Stelle im Daumenbogen liegt, aber nur wenn dort kein anderes Widget sitzt. Belegt ein Chat-Launcher die Ecke, wandert der CTA nach unten links statt darüber. Halten Sie ausreichend Abstand zum Bildschirmrand, damit der Button nicht mit Systemgesten oder der Browserleiste kollidiert.
Wie lange sollte die Verzögerung vor dem Erscheinen sein?
Lang genug, dass der Besucher zu lesen begonnen hat, praktisch also an den Scrollfortschritt gekoppelt statt an einen Timer. Ein Button, der erscheint, während die Seite noch aufbaut, wird reflexhaft weggeklickt. Nach dem ersten durchgescrollten Inhaltsabschnitt liegt ein echtes Engagement-Signal vor, ohne den ersten Eindruck zu stören.
Können Floating-CTA und Chat-Widget nebeneinander bestehen?
Ja, aber nur mit bewusster Platzierung und unterschiedlichem visuellen Gewicht. Geben Sie ihnen gegenüberliegende Ecken, machen Sie eines über Größe und Farbe klar primär und klappen Sie den Chat-Launcher auf ein Icon ein. Müssen beide auf dieselbe Seite, fassen Sie sie zu einem ausklappbaren Element zusammen, statt zwei Overlays um dieselben Pixel streiten zu lassen.
Schadet ein Floating-CTA SEO oder Barrierefreiheit?
Auf Rankings wirkt er nicht direkt, an Barrierefreiheitsprüfungen kann er aber scheitern. Das Overlay muss per Tastatur in logischer Tab-Reihenfolge erreichbar sein, darf den Fokus nicht einsperren und muss gegen den darunter scrollenden Inhalt kontrastreich bleiben. Auf Mobilgeräten kann ein großes, dauerhaft überlagerndes Element zudem als aufdringliches Interstitial gelten, halten Sie es klein.
Was sollte auf einem Floating-CTA stehen?
Zwei bis drei Wörter, die das Ergebnis benennen, denn für Einordnung fehlt der Platz. Der Name eines Assessments funktioniert, wenn die Seite es bereits eingeführt hat; ein abstraktes Verb allein nicht. Braucht das Angebot Erklärung, ist der schwebende Button der falsche Behälter und die Aktion gehört in einen Inline-Abschnitt.
Soll der Floating-CTA auf jeder Seite erscheinen?
Nein. Nehmen Sie Funnel-Seiten, Checkout- oder Buchungsstrecken und jede Seite aus, deren Haupt-CTA dieselbe Aktion ist, sonst verdoppeln Sie den Button und zersplittern die Klickdaten. Beschränken Sie ihn auf Templates, die nicht um Conversion herum gebaut wurden, etwa Blogartikel, Dokumentation und Hilfeseiten, wo er einen fehlenden Einstieg ergänzt.