Widerrufsbutton anpassen – Farbe, Größe & Position
Farbe, Form und Position Ihres Widerrufsbuttons stellen Sie in wenigen Sekunden selbst ein – ohne den Einbau-Code zu ändern. Hier sehen Sie, wie die einzelnen Positionen aussehen und wie Sie den Button per Drag-and-Drop genau dorthin ziehen, wo er passt (z.B. neben Cookie- oder Chat-Fenster).
Empfehlung: Wählen Sie eine immer sichtbare (fixierte) Position. Der Widerrufsbutton muss nach § 356a BGB „leicht zugänglich“ sein – ein Button, den man erst durch Scrollen bis ans Seitenende findet, ist dafür die riskantere Wahl.
In 3 Schritten angepasst
Shop öffnen & „Farbe & Position anpassen“
Im Dashboard auf Ihren Shop klicken und auf „Farbe & Position anpassen“ (direkt unter dem Einbau-Code). Sie landen auf der Widget-Konfiguration mit einer Live-Vorschau rechts.
Position wählen oder Button ziehen
Wählen Sie oben eine feste Position (z.B. „Fixiert unten links“) – oder ziehen Sie den Button in der Vorschau einfach mit der Maus an die gewünschte Stelle. Farbe, Form und Größe stellen Sie daneben ein; alles aktualisiert sich sofort in der Vorschau.
Speichern – fertig
Auf „Konfiguration speichern“ klicken. Die Änderung ist innerhalb weniger Minuten in Ihrem Shop sichtbar (der Einbau-Code bleibt unverändert).
Die Positionen im Vergleich
Fixiert unten links (empfohlen)
Schwebt immer sichtbar in der linken unteren Ecke – egal wie weit der Besucher scrollt. Gegenüber der üblichen Chat-Position (rechts), damit nichts kollidiert. Erfüllt die Anforderung „leicht zugänglich“ nach § 356a BGB am sichersten.
Fixiert unten rechts
Gleiche schwebende Sichtbarkeit, nur rechts. Sinnvoll, wenn Ihr Chat- oder Hilfe-Fenster links sitzt.
Frei positioniert (Drag-and-Drop)
Ziehen Sie den Button in der Live-Vorschau einfach dorthin, wo Platz ist – z.B. direkt neben das Cookie-Banner. Der Button verankert sich randsicher und ragt nie über den Bildschirm.
Footer (nur am Seitenende)
Sitzt im Seitenfuß und scrollt mit. Achtung: Besucher sehen ihn nur, wenn sie ganz nach unten scrollen – beim Kriterium „leicht zugänglich“ die riskantere Wahl. Nur wählen, wenn der Footer auf jeder Seite eingebunden ist.
Den Button direkt in Ihren Footer einbauen
Wenn der Button nicht schweben, sondern fest in Ihren Seitenfuß integriert sein soll – sauber zwischen Ihren anderen Footer-Links – setzen Sie an die gewünschte Stelle einen kleinen Platzhalter. Der Button erscheint dann genau dort, im normalen Seitenfluss. Das ist optional: Ohne Platzhalter bleibt alles beim schwebenden Button.
So geht's – in 2 Schritten
- Unseren Einbau-Code einbinden – genau wie sonst (Ihren Widget-Key aus dem Dashboard einsetzen).
- An die Stelle im Footer, wo der Button stehen soll, dieses Platzhalter-Element setzen:
<!-- 1. Einbau-Code (wie gewohnt) -->
<script src="https://widerrufbutton.net/widget/v1/wh.js"
data-shop-id="IHR_WIDGET_KEY"></script>
<!-- 2. Dorthin, wo der Button stehen soll: -->
<div id="widerrufbutton-button"></div>So sieht es aus
Sale
Kontakt
AGB
Bleibt rechtssicher: Der Button ist weiterhin auf jeder Seite erreichbar und als Button klar erkennbar – wie es § 356a BGB verlangt. Achten Sie nur darauf, dass Ihr Footer wirklich auf allen Seiten eingebunden ist und der Button sich farblich deutlich abhebt (kein blasser Link in der Rechtstext-Zeile).
Farbe, Größe & Schrift an Ihren Shop anpassen
Der Button soll zu Ihrem Shop passen: auffällig genug, dass Kunden ihn sofort finden (§ 356a BGB verlangt „leicht zugänglich“ und erkennbar), aber farblich stimmig. Alle Einstellungen ändern Sie im Dashboard unter „Farbe & Position anpassen“ – mit Live-Vorschau, die sich sofort aktualisiert. Der Einbau-Code bleibt dabei unverändert.
🎨 Farbe
Hintergrund- und Textfarbe des Buttons auf Ihre Markenfarben setzen – ebenso die Farben des Formular-Fensters (Kopfzeile, Bestätigen-Button). Tipp: genug Kontrast zum Seitenhintergrund wählen, damit der Button sichtbar bleibt.
📐 Größe & Form
Innenabstand (klein / mittel / groß), Schriftgröße und Eck-Radius – von kantig bis rund wie eine Pille. Machen Sie ihn dezent klein oder bewusst größer für mehr Sichtbarkeit.
✍️ Text & Icon
Button-Beschriftung frei wählbar („Widerruf“, „Widerruf erklären“, „Vertrag widerrufen“ …) und das Icon an- oder abschaltbar. Auch die Texte im Formular passen Sie an.
Gut zu wissen: Während Ihrer 14-tägigen Testphase – und in den Plänen Solo, Shop und Agency – sind eigene Farben, eigenes Branding und das Entfernen des „Powered by“-Hinweises voll freigeschaltet. Probieren Sie es ruhig aus: Sie haben diese Premium-Funktionen gerade kostenlos.
Was Ihre Kunden sehen
Ein Klick auf den Button öffnet das zweistufige Widerrufs-Formular: Identifikation (E-Mail-Adresse, Benutzername oder Kundennummer), die Bezeichnung des zu widerrufenden Vertrags sowie – optional – eine E-Mail-Adresse für die Eingangsbestätigung. Inklusive DSGVO-Hinweis und dem gesetzlich vorgeschriebenen Bestätigungs-Schritt „Widerruf bestätigen“.
Ihre Daten werden ausschließlich zur Bearbeitung Ihres Widerrufs verwendet und auf Servern in Deutschland gespeichert. Rechtsgrundlage: Art. 6 Abs. 1 lit. b und c DSGVO.
Button jetzt anpassen
Melden Sie sich an, öffnen Sie Ihren Shop und ziehen Sie den Button in der Live-Vorschau an die gewünschte Stelle. Kostenlos starten.
Zum Dashboard