Zum Hauptinhalt springen

Kunden-Login: Buchungen stornieren

Möchtest du wissen, wie deine Kunden auf ihr eigenes Portal zugreifen können, um Buchungen selbst zu stornieren, und wie du diese Option auf deiner Webseite einbaust? Hier wird alles Schritt fĂŒr Schritt erklĂ€rt.

Verfasst von Yerkin Kuanyshev

Teil 1: So sieht der Kunden-Login fĂŒr deine Kunden aus

​Der Kunde kann sich auf drei Wegen einloggen:

1. Du schickst dem Kunden den direkten Link zum Login einfach zu (oben in der URL-Leiste zu sehen mit „.../user“).

2. Du verlinkst den Login-Bereich mit einem Button auf deiner Webseite (du kannst dafĂŒr denselben Link verwenden).

3. Die eleganteste Lösung: Wenn du das Skript (wie in Teil 2 beschrieben) in den Footer deiner Webseite eingebunden hast, wird unten rechts auf deiner Seite durchgehend ein „Anmelden“-Button angezeigt.
​
❗Hinweis: Mit "Kunde" ist in diesem Fall der RechnungsempfĂ€nger gemeint. Teilnehmer können diese Option nur dann nutzen, wenn sie gleichzeitig der RechnungsempfĂ€nger sind.

Über diesen Button kann sich der Kunde ganz einfach einloggen. Auf der Anmeldeseite gibt er dann lediglich seine E-Mail-Adresse ein und klickt auf den Button „Anmelden“. Ein Passwort wird nicht benötigt.


​Das System verschickt daraufhin einen Link. Auf dem Bildschirm erscheint die BestĂ€tigung: „Ein Link wurde an die angegebene E-Mail gesendet.“ Falls die E-Mail nicht ankommt, kann der Kunde hier einfach auf „Erneut senden“ klicken.


Klickt der Kunde auf den Link in seiner E-Mail, loggt er sich automatisch ein und landet direkt im Bereich „Buchungen“. Hier hat er sofort eine Übersicht ĂŒber seinen nĂ€chsten Termin und den gesamten fĂ€lligen Betrag.
In dieser Übersicht sieht er alle Details zu seinen Kursen (z. B. Buchungs-ID, vollstĂ€ndiger Name, Kurs usw.). Möchte der Kunde eine Buchung stornieren, klickt er einfach auf den kleinen blauen Stornieren-Button (den durchgestrichenen Kreis) ganz rechts in der Zeile:
​


❗Hinweis: Der Stornieren-Button funktioniert nur, wenn du im Angebot unter "Einstellungen" die Stornierungsbedingungen festgelegt hast. Wenn die Frist abgelaufen ist, kann die Buchung nicht mehr storniert werden. Der Button verschwindet aus der Übersicht.
​

Wechselt der Kunde im linken MenĂŒ in den Bereich „Rechnungen“, sieht er eine genaue Auflistung seiner Rechnungs-IDs, den Preis und den aktuell fĂ€lligen Betrag. Über den blauen Text-Link „Rechnung herunterladen“ kann er sich das Dokument ganz einfach als PDF abspeichern. Die Rechnung kann er auch im Buchungsbereich unter der Spalte "Rechnungen" ĂŒber das Wolkensymbol herunterladen.
​


​📌 Info: Sobald eine Rechnung vollstĂ€ndig bezahlt wurde, aktualisiert sich die Ansicht unter „Rechnungen“ und „Buchungen“ automatisch und der fĂ€llige Betrag springt auf „0,00€“.
​


Um zu prĂŒfen, ob Zahlungen angekommen sind, klickt der Kunde links auf den Reiter „Zahlungen“. Wenn er bisher noch keine Zahlungen getĂ€tigt hat, erscheint dort lediglich der Hinweis: „Leider wurden keine EintrĂ€ge gefunden.“


Sind hingegen Zahlungen im System verbucht, werden diese hier detailliert aufgelistet. Der Kunde sieht die Rechnungs-ID, die Zahlungsart (z. B. Überweisung), das Abschlussdatum sowie den Zahlungsbetrag:
​


​Im Bereich „Nachrichten“ befindet sich das Kommunikations-Archiv. Hier findet der Kunde alle E-Mails und Systemnachrichten, die ihm zugesendet wurden. Mit einem Klick auf den Pfeil auf der rechten Seite lassen sich die einzelnen Nachrichten aufklappen und lesen:


Die verschickten DateianhÀnge werden auch (wie z. B. PDFs mit Anfahrtsskizzen oder wichtigen Informationen) direkt am Ende der Nachricht angezeigt. Der Kunde kann diese Dateien ganz bequem anklicken, um sie sich anzuschauen und bei Bedarf herunterzuladen.
​


​
Teil 2: Einbindung des Kunden-Logins auf deiner Webseite

Damit deine Kunden diesen Service nutzen können, muss der Login-Bereich auf deiner eigenen Homepage integriert werden. Verwende dafĂŒr den folgenden Code:
​

<wsroot data-user-bookings-columns="bookingid,fullname,course,timespan,place,appointments,dueamount,cancellink" auth-entities="bookings,messages"></wsroot> <script src="https://namederinstallation.butlerapp2.de/bee-react-form/bee-form.min.js"></script> <script>websail.init({ apiBaseUrl: 'https://namederinstallation.butlerapp2.de' });</script>


​So gehst du bei der Einbindung vor:

  • Unterseite erstellen: Erstelle in deinem Webseiten-Baukasten oder CMS eine neue, leere Unterseite (z. B. mit dem Namen "Kunden-Login"). FĂŒge den kompletten oben stehenden Code dort als HTML-Element ein. Bei "namederinstallation" trage den Namen deiner Butlerapp-Installation. Diese Seite soll von dem Kunden versteckt werden.

  • Anmelden-Button auf allen Seiten anzeigen: Damit der Button zur Anmeldung global auf deiner gesamten Webseite (auf jeder Unterseite) sichtbar ist, musst du den <script>-Teil des Codes zusĂ€tzlich in den Footer deiner Webseite einfĂŒgen.

    • Achtung: Bei manchen CMS-Systemen (Homepage-BaukĂ€sten) ist der Footer in den kostenlosen Standard-Paketen gesperrt und nur mit einem Pro-Paket bearbeitbar. Bitte prĂŒfe dies in deinem System.

  • Ansicht individuell anpassen: Du kannst selbst steuern, welche Spalten und welche Bereiche dem Kunden im Login angezeigt werden. Wenn du bestimmte Bereiche (wie z. B. "Rechnungen" oder "Zahlungen") ausblenden möchtest, kannst du die entsprechenden Begriffe in dem Code-Schnipsel einfach entfernen (unter auth-entities). ZusĂ€tzlich kann noch eine info-Spalte eingefĂŒgt werden.
    ​

Hilfe bei der Einrichtung
​
Solltest du bei der Einbindung des Codes in dein CMS-System auf Probleme stoßen oder unsicher sein, wie du die Anpassungen vornimmst, wende dich gerne direkt an deinen Kundenbetreuer von Butlerapp.
​

✅ Fertig! So einfach behalten deine Kunden den Überblick ĂŒber ihre Buchungen.
​

Hat dies deine Frage beantwortet?