E-Commerce: So integrieren den Widerrufsbutton in Ihren Webshop

Ab dem 19.06.2026 wird für Online-Händler die Pflicht zur Bereitstellung einer Widerrufsfunktion bzw. eines Widerrufsbuttons in deren Webshops wirksam. Ziel dieser EU-Gesetzgebung ist es, den Widerruf von Verträgen ebenso einfach zu gestalten wie den Vertragsabschluss selbst – d.h. mit wenigen Klicks.

Die neue Pflicht ergibt sich aus der EU-Richtlinie 2023/2673, die den Verbraucherschutz stärken soll und daher die Einführung einer europaweit "funktionierenden und leicht zugänglichen" elektronischen Widerrufsmöglichkeit vorsieht. Weitere Informationen rund um die Formalitäten zu der verpflichtenden Widerrufsfunktion sowie zu der EU-Richtlinie und deren Umsetzung in nationales Recht finden sich beispielsweise auf dieser Webseite.

1. Neue Portalseite bauen & in den Portalkontext integrieren
2. Bekannter Besucher (angemeldet) vs. Unbekannter Besucher (nicht angemeldet)
3. Szenarien in der Praxis

Aus den oben genannten Gründen gibt es im Myfactory-Layoutdesigner (unter „Webportal / Layoutdesigner“) daher das Portalelement „Widerrufsformular“. Dieses ermöglicht mehrere Modi für dessen Einsatz innerhalb eines Beleges, einer Belegposition oder ohne Bezug zu einem Beleg, dafür mit Formularfeldern. Das heißt, mit diesem Element lassen sich abhängig vom Kontext resp. abhängig vom Zustand der Anmeldung (Benutzer angemeldet und bekannt vs. Benutzer nicht angemeldet und unbekannt) komplette Verkaufsbelege oder einzelne Verkaufsbelegpositionen per Knopfdruck widerrufen bzw. manuell über ein Formular eingeben und widerrufen.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 0

Für das erste Szenario (Benutzer angemeldet und bekannt) können Sie am Element in den Elementeigenschaften eine Datenquelle auswählen, welche entweder auf die Verkaufsbelege oder die Verkaufsbelegpositionen referenziert.

Im zweiten Szenario (Benutzer nicht angemeldet und unbekannt) existiert kein spezifischer Verkaufsbelegkontext (oder Verkaufsbelegpositionskontext). Hier können die Beleg- und Kundeninformationen für den Widerruf ohne Login in einem öffentlichen Dialog manuell in Formulareingabefelder eingetragen und abgesendet werden. Dazu lässt sich unterhalb der Datenquelle in den Elementeigenschaften per Checkbox der Formularmodus auswählen.

Bei einem Widerruf können der Belegstatus geändert, E-Mails versendet und Aufgaben angelegt werden. Für E-Mails und Aufgaben stehen zudem relevante Platzhalter zur Verfügung (siehe auch FAQ-Kapitel Alle Myfactory-Platzhalter in alphabetischer Reihenfolge). Im Folgenden werden die oben genannten Szenarien anhand unseres Myfactory-Highrise-Templates erläutert.

Zum Anfang

1. Neue Portalseite bauen & in den Portalkontext integrieren

Initial ist im Layoutdesigner der Myfactory eine neue Portalseite zu erstellen.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 1

Nach der Bestätigung mittels der [OK]-Schaltfläche gelangen Sie dann in den Dialog „Portalseiten“.

Setzen Sie hier neben einer Bezeichnung und einem Seitentitel auch die Checkboxen „Im Menü anzeigen“ sowie „Layout wird geerbt“. Ist letztgenannte Option aktiviert, dann hinterlegen Sie bitte auch ein „Inhaltselement bei Vererbung“.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 2

Anschließend sollte die neue Seite (in unserem Fall mit dem Namen „Bestellung widerrufen“) innerhalb der Menüstruktur des Webportals erscheinen und verwendet werden können.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 3

Zum Anfang

2. Bekannter Besucher (angemeldet) vs. Unbekannter Besucher (nicht angemeldet)

Nun gilt es, eine Elementstruktur auf der „Bestellung widerrufen“-Seite aufzubauen.

Der übergeordnete Elementaufbau für unsere „Bestellung widerrufen“-Portalseite sieht in unserem Beispielportal wie folgt aus:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 4

Die Grundstruktur besteht somit aus einem übergeordneten Positionsfeld, welches ein untergeordnetes Positionsfeld für das Überschrift-Element sowie zwei weitere Positionsfeld-Elemente für die Szenarien „Bekannter Besucher (angemeldet)“ vs. „Unbekannter Besucher (nicht angemeldet)“ enthält.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 5

Zum Anfang

2.1 Szenario 1: Benutzer angemeldet und bekannt

Es werden grundsätzlich zwei Widerrufsformular-Elemente in der Elementstruktur für dieses Szenario verwendet (eines für die Verkaufsbelege & eines für die Verkaufsbelegpositionen). Gesteuert wird die jeweilige Datenquelle über die hier verwendeten Formularlisten.

Vor dem Einbau der übergeordneten Formularliste, welche das Widerrufsformular-Element enthält, wird diese Formularliste mittels der Elemente „Listen Datumseinschränkung“ und „Verkaufsbelegeinschränkung“ zunächst auf einen spezifischen Zeitraum für das Belegdatum sowie bestimmte Verkaufsbelegarten eingegrenzt.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 6

Wählen Sie hierzu in den Elementoptionen bei dem Element „Listen Datumseinschränkung“ in der Datenauswahl „Verkaufsbeleg“ und als Datenfeld „Belegdatum“. Um nun noch den Belegdatumszeitraum spezifisch einzuschränken, wählen Sie bei „Typ“ zunächst die entsprechende Zeiteinheit (in unserem Beispiel „Tag“) und tragen Sie eine fixe oder dynamische „Von-Datum-Einstellung“ ein. Empfehlenswert ist hier ein „dynamisches Von-Datum“. Ein sinnvoller Zeitraum sind gerade in Bezug auf Widerrufe 14 Tage, dementsprechend können Sie in diesem Eingabefeld -14 hinterlegen.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 7

Außerdem sollte bedacht werden, dass nur bestimmte Verkaufsbelegarten widerrufen werden können. Beispielsweise kann ein Kunde nicht so einfach eine Rechnung widerrufen, möglich ist das jedoch z. B. für die der Rechnung zugrunde liegenden Auftragsbestätigung. Somit können Sie die Belegausgabe für Ihre Widerrufsseite beispielsweise auf diese Verkaufsbelegart einschränken.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 8

Zum Anfang

2.1.1 Verkaufsbelege widerrufen

Nach diesen initialen Eingrenzungen für die Formularliste kann die für das Szenario „Bekannter Besucher“ maßgebliche Formularliste selbst eingebaut werden.

Die Elementstruktur für den Widerruf von Verkaufsbelegen sieht wie folgt aus:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 9

Da in unserem Portalbeispiel zunächst der Button für den Widerruf der Verkaufsbelege integriert werden soll, sind nach dem Einbau des Formularliste-Elements noch essentielle Einstellungen in den Elementoptionen zu treffen.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 10

Damit das Widerrufsformular-Element später „weiß“, in welchem Kontext es sich befindet und automatisch seine Datenquelle bestimmen kann, ist es wichtig, in dem Eingabefeld „Datenauswahl“ „Verkaufsbeleg“ auszuwählen.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 11

Im darunter liegenden Eingabefeld „Einschränkungstyp“ schränken Sie die soeben ausgewählte Datenquelle bitte noch auf die „Belege des angemeldeten Kunden“ ein.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 12

Bauen Sie darunter als Nächstes das Element „Datenformular“ ein. Unter diesem folgt dann das Element „Formularfeld Anzeige“. Dieses wiederum erhält als Parameter das Datenfeld „Belegnummer“ in dessen Elementoptionen, um die Bestell- bzw. Belegnummer auf der „Bestellung widerrufen“-Seite auszugeben.

Im nächsten Schritt bauen Sie erstmalig das neue Portalelement „Widerrufsformular“ ein.
Eine erste Orientierung zu den Funktionen des Elements bietet die ausführliche Elementbeschreibung:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 13

Nach dem Einbau des Widerrufsformulars gibt es für dieses noch einige Einstellungen in den Elementoptionen vorzunehmen:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 14

Im ersten Schritt vergeben Sie in dem Eingabefeld „Text Absenden“ bitte zunächst eine sinnige Bezeichnung für den Widerrufsbutton.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 15

In unserem Beispiel ist das schlicht „Bestellung widerrufen“.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 16

Im Eingabefeld „Text Absenden (bereits gesendet)“ können Sie optional noch einen Text für den Fall hinterlegen, dass der Widerrufsbutton bereits angeklickt wurde („Widerruf bereits gesendet“). Weiterhin können Sie eine „Zielseite bei Erfolg“ festlegen, damit der Kunde entsprechendes Feedback erhält (siehe auch Kapitel „Szenario 1 in der Praxis“). Empfehlenswert ist außerdem das Aktivieren der Checkbox „SSL-Verschlüsselung“ (in unserem Portalbeispiel nur aufgrund der Testumgebung deaktiviert).

Entscheidend ist anschließend, dass die korrekte Datenquelle für den Widerruf innerhalb eines allgemeinen Verkaufsbelegkontextes eingestellt ist.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 17

Da diese im Normalfall durch die übergeordnete Formularliste zur Verfügung gestellt wird, ändern Sie diese Datenquelle bitte nur dann, wenn dort NICHT „Verkaufsbeleg“ ausgewählt ist. Der Formularmodus ist in diesem Kontext nicht notwendig und kann deaktiviert bleiben.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 18

Die nachfolgenden Elementeinstellungen beziehen sich auf die Abläufe, die nach dem Betätigen des Widerrufsbuttons erfolgen sollen.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 19

Elementar ist hier zunächst der konfigurierte „Belegstatus nach Widerruf“. Dieser erlaubt das Identifizieren eines Verkaufsbelegs als „Widerrufen“. Wir haben in unserem Portalbeispiel einen neuen Verkaufsbelegstatus namens „Bestellung widerrufen“ kreiert. Dieser wird nach dem Widerruf im unteren Bereich des Belegs angezeigt (siehe auch Kapitel „Szenario 1 in der Praxis“).

So integrieren Sie den Widerrufsbutton in Ihren Webshop 20

Nach dem Setzen des Belegstatus können noch Benachrichtigungen über den Widerruf des Kunden verschickt werden. Dies kann per E-Mail und über Aufgaben erfolgen. Konfigurieren Sie zunächst die E-Mail-Benachrichtigungen.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 21

In den korrespondierenden Elementeinstellungen lassen sich zunächst interne E-Mail-Benachrichtigungen vergeben. Unter „E-Mail Vorlage (Shopbetreiber)“ kann zunächst eine E-Mail-Vorlage zur internen Benachrichtigung eingerichtet werden. Im Feld darunter („Empfänger intern“) kann händisch die E-Mail-Adresse des Shop-Betreibers vermerkt werden.

Die E-Mail-Vorlage dazu kann z. B. wie folgt aussehen:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 22

Die Informationen in Betreff und Mail-Text können dynamisch über Platzhalter eingefügt werden (siehe Screenshots und Tooltips im Layoutdesigner).

Das im Feld „E-Mail Vorlage (Kunde)“ einzutragende Template, welches per E-Mail an den Kunden gesendet wird, kann z. B. folgendermaßen gestaltet sein:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 23

Darüber hinaus kann die interne Benachrichtigung über den Widerruf des Kunden auch über Aufgaben übermittelt werden. Hierzu lassen sich die Aufgaben sowohl an einen Benutzer als auch an ein Team kommunizieren. In unserem Beispiel wurde für den Benutzer „Demo SysAdmin“ eine Aufgabe angelegt. In den darauffolgenden Feldern „Aufgabentitel“ und „Aufgabeninhalt“ können dieselben Platzhalter wie für die E-Mail-Vorlagen verwendet werden (siehe oben).

So integrieren Sie den Widerrufsbutton in Ihren Webshop 24

Zum Anfang

2.1.2 Verkaufsbelegpositionen widerrufen

Damit auch einzelne Verkaufsbelegpositionen widerrufen werden können, bauen wir im nächsten Schritt eine weitere Formularliste ein. Diese verorten wir auf derselben Ebene wie das erste Widerrufsformular-Element. Dafür können Sie z. B. die folgende Elementstruktur verwenden:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 25

Wie im allgemeinen Verkaufsbelegkontext ist es auch im spezifischen Verkaufsbelegpositionskontext elementar, dass die dem Widerrufsformular-Element übergeordnete Formularliste die korrekte Datenquelle zur Verfügung stellt.

Hinterlegen Sie daher auch für dieses Formularliste-Element passende Einstellungen in den Elementoptionen hinsichtlich „Datenauswahl“ und „Einschränkungstyp“.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 26

Im Eingabefeld „Datenauswahl“ sind die „Verkaufsbeleg-Positionen“ als Datenherkunft zu selektieren.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 27

Damit für diese Verkaufsbelegpositionen nicht versehentlich z. B. Textpositionen herangezogen werden, ist es wichtig als „Einschränkungstyp“ für diese Formularliste „Nur Artikel-Positionen“ anzugeben.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 28

So integrieren Sie den Widerrufsbutton in Ihren Webshop 29

Nachdem diese Einstellungen für die Formularliste vorgenommen wurden, können Sie im nächsten Schritt wieder ein „Datenformular“-Element einfügen. Darunter folgt erneut ein „Formularfeld Anzeige“-Element, welches als Information eine Positionsnummer darstellen soll. Daher erhält dieses Element in den Elementoptionen als Datenfeld den Parameter „Artikelnummer“. Bauen Sie unterhalb dieses Datenformulars nun wieder ein Widerrufsformular-Element ein.

In dessen Elementoptionen ändern Sie nun den Namen des Widerrufsbuttons im Feld „Text Absenden“ in „Position widerrufen“.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 30

So integrieren Sie den Widerrufsbutton in Ihren Webshop 31

Wenden Sie sich anschließend der Datenquelle für dieses Widerrufsformular-Element zu, um sicherzustellen, dass die korrekte Datenquelle für den Widerruf innerhalb eines spezifischen Verkaufsbelegpositionskontextes konfiguriert ist.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 32

Da diese im Normalfall durch die übergeordnete Formularliste zur Verfügung gestellt wird, ändern Sie diese Datenquelle bitte nur dann, wenn dort NICHT „Verkaufsbeleg-Positionen“ ausgewählt ist.

Alle anderen Einstellungen hinsichtlich des Belegstatus nach Widerruf sowie bezüglich der E-Mail-Vorlagen und Aufgaben können wie für den ersten Widerrufsbutton (im allgemeinen Verkaufsbelegkontext) gewählt werden.

Zum Anfang

2.2 Szenario 2: Benutzer nicht angemeldet und unbekannt (Formularmodus)

In diesem Szenario zieht das Widerrufsformular-Element NICHT automatisch Datenquellen aus einem allgemeinen Verkaufsbelegkontext oder einem spezifischen Verkaufsbelegpositionskontext heran.

Stattdessen findet seine Verwendung bspw. in einem öffentlichen Dialog statt, in welchem keine Login-Informationen vorliegen, der Benutzer also nicht angemeldet und somit unbekannt ist.

Hintergrund ist, dass der Widerruf einer Bestellung in einem Online-Shop gemäß dem neuen Gesetz auch ohne Anmeldung oder registriertes Kundenkonto funktionieren muss.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 33

Um dieses Szenario abzubilden, kann z. B. die folgende Elementstruktur verwendet werden:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 34

Wichtig hierbei ist, dass nach einem (beispielhaften) einleitenden Textabsatz-Element und dem obligatorischen Positionsfeld-Element direkt das Widerrufsformular-Element eingefügt wird.

In den Elementoptionen wird Ihnen schließlich auffallen, dass dort die Checkbox „Formularmodus“ gesetzt ist.

Diese Option wird dort automatisch aktiviert, wenn das Widerrufsformular-Element außerhalb einer Belegliste eingesetzt wird. Sie kann bei Bedarf natürlich auch manuell gesetzt werden.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 35

Nach dem nunmehr dritten Widerrufsformular-Element integrieren Sie bitte eine Reihe an Formularfeld Eingabe-Elementen, um den Formularmodus abbilden zu können. Stellen Sie dabei sicher, dass Sie innerhalb des Widerrufsformular-Elements folgende „Formularfeld Eingabe“-Felder zur Identifikation des Vorgangs anlegen:

Belegnummer, Kundennummer, Belegdatum und ein Formularfeld für die E-Mail-Adresse, an welche die Bestätigung des Widerrufs geschickt werden soll.

Zusätzlich können Sie optional noch ein Feld für einen Benutzerkommentar einbauen. Dies sollte im besten Fall ein „Formularfeld Eingabe Lang“ sein. Wählen Sie bitte zu jedem eingebauten Formular-Eingabe-Feld das entsprechend passende Datenfeld mit zugehöriger Beschriftung aus.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 36

Anhand dieser Eingabefelder wird versucht, den Vorgang automatisch zu identifizieren. Die eingegebenen Daten können zudem als Platzhalter in den nach dem Widerruf versendeten Aufgaben und E-Mails ausgegeben werden (siehe oben).

Zum Anfang

3. Szenarien in der Praxis

3.1 Szenario 1 in der Praxis (Benutzer angemeldet und bekannt)

Nachdem alle Elementstrukturen für die verschiedenen Widerrufsszenarien aufgebaut sind, können Sie im nächsten Schritt zunächst das erste Szenario testen.
In unserem Fall melden wir uns als Kunde Marco Müller in unserem Highrise-Shop an, um dort eine Bestellung bzw. eine Belegposition aus unserer Bestellung zu widerrufen:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 37

Hierzu wechselt er im Bereich „Mein Konto“ in den Menüeintrag „Bestellung widerrufen“.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 38

Hier findet er nun alle seine Bestellungen sowie die darin enthaltenen Einzelpositionen der vergangenen 14 Tage, und zwar einschließlich der Möglichkeit diese Bestellungen und/ oder Positionen per Widerrufsbutton zu widerrufen.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 39

Nun möchte er einen ganz bestimmten Auftrag widerrufen, nämlich den zuletzt erstellten mit der Belegnummer AB2600010.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 40

Dieser findet sich auch in der Belegliste der „Bestellung widerrufen“-Seite:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 41

Anschließend klickt der Kunde Müller auf „Bestellung widerrufen“…

So integrieren Sie den Widerrufsbutton in Ihren Webshop 42

… und er wird daraufhin zunächst auf eine optional hinterlegte „Zielseite bei Erfolg“ weitergeleitet.

So integrieren Sie den Widerrufsbutton in Ihren Webshop 43

Im Hintergrund passiert dabei Folgendes:

Der Belegstatus des Auftrags ändert sich in „Bestellung widerrufen“:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 44

Der Kunde erhält außerdem auf Grundlage der hinterlegten Mail-Vorlage eine E-Mail mit der Bestätigung seines Widerrufs. In diesem Beispiel wurden zuvor alle verfügbaren Platzhalter in die Vorlage eingetragen. Aufgelöst bzw. befüllt wurden korrekterweise jedoch nur die für den Widerruf einer Bestellung notwendigen Variablen:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 45

Auch intern wird bei Eintrag einer entsprechenden Mail-Vorlage eine E-Mail an den Shopbetreiber gesendet.

Falls entsprechend hinterlegt, ging außerdem eine Aufgabe an den bei dem Widerrufsformular eingetragenen Benutzer oder ein entsprechendes Aufgabenteam:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 46

Klickt der verantwortliche Benutzer auf die jeweilige Aufgabe, so gelangt er in den vom Kunden widerrufenen Verkaufsbeleg.

Ganz ähnlich verhält es sich mit dem Widerruf von Positionen in einem Verkaufsbeleg. Hierauf wird daher nicht näher eingegangen.

Zum Anfang

3.2 Szenario 2 in der Praxis (Benutzer nicht angemeldet und unbekannt)

Ist ein Benutzer nicht angemeldet, so sieht die Seite „Bestellung widerrufen“ im Highrise-Portal für ihn so aus:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 47

In diesem Fall hat der Kunde Heimwerker Jürgen Schulze eine Bestellung mit folgendem Auftrag im System ausgelöst:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 48

Diesen Auftrag möchte der Kunde nun widerrufen. Da er nicht angemeldet ist, gibt er die zugehörigen Informationen nun händisch in das dargestellte Widerrufsformular ein und klickt anschließend auf den „Widerrufsbutton“:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 49

Auch in diesem Fall ändert sich der Belegstatus des widerrufenen Auftrags:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 50

Und auch in diesem Fall geht eine E-Mail mit der Widerrufsbestätigung an die von dem Kunden manuell hinterlegte E-Mail-Adresse:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 51

Wie man sieht, sind auch hier bereits die betreffenden Platzhalter mit den passenden Informationen befüllt worden. Zusätzlich zu den Informationen für den Verkaufsbeleg selbst sind nun auch die weiteren für den Formularmodus vorgesehenen Platzhalter ordnungsgemäß befüllt worden.

Darüber hinaus wurde auch hier erfolgreich eine Aufgabe an den betreffenden Mitarbeiter zur weiteren Bearbeitung weitergeleitet:

So integrieren Sie den Widerrufsbutton in Ihren Webshop 52

Zurück zum Anfang

Weitere Informationen zu diesem Thema:
E-Commerce: So integrieren Sie das neue Widerrufsformular in Ihren Webshop