Einmalige Anmeldung für Wix-Websites und den online Terminbuchungskalender

Auf dieser Seite erfährst Du, wie man einen online Terminbuchungskalender von SuperSaaS in eine Wix-basierte Website integrieren kann, sodass sich Deine Nutzer nur einmal anmelden müssen, um sowohl auf Deine Website als auch auf den online Terminbuchungskalender von SuperSaaS zuzugreifen. Das Wix-Widget meldet Deine Benutzer automatisch mit ihren Wix-Anmeldedaten bei Deinem Benutzerkonto in SuperSaaS an.

Vorbereitungen für die Installation von Widgets auf Wix

Bevor Du das Widget installierst, gehst Du zu Wix und öffnest den Wix Website Editor, um Deine Website für die Integration des Widgets vorzubereiten.

1. Aktiviere den Entwicklermodus für Deine Website. Dies ist wichtig, um die weiteren Schritte in dieser Anleitung ausführen zu können.
   
2. Füge einen Wix-Login-Button in Deine Website ein. Du kannst dies über das Menü Elemente hinzufügen tun, wenn es noch keinen Button gibt. Wähle die Option Login Leiste, um eine Schaltfläche für das Anmelden zu Deiner Wix-Website hinzuzufügen. (Möglicherweise musst Du in der Suchleiste danach suchen.)

Installation des Widgets auf Wix

Die folgenden Schritte beschreiben, wie Du das Wix-Widget auf Deiner Wix-Website installierst. Dies ist der technisch anspruchsvollste Teil des gesamten Einrichtungsprozesses, daher empfehlen wir Dir, diese Anweisungen sorgfältig durchzulesen, bevor Du beginnst.

1. Beginne mit der Integration des Widgets in Deine Wix-Website durch Anklicken des Links zum Widget Link zum Widget. Wenn der Link nicht mehr funktioniert, bitte um einen neuen Link zu erstellen. Der Link sollte die folgende Ansicht auf Deinem Bildschirm öffnen:
   
   Klicke auf „App installieren“, um fortzufahren.
2. Wähle die Wix-Seite aus, auf der das Widget installiert werden soll. Wenn Du mehrere Websites hast, wird das Widget nur auf der von Dir ausgewählten Website installiert.
3. Genehmigungen akzeptieren, um sicherzustellen, dass das Widget auf Deiner Wix-Website installiert werden kann.
4. Das Widget wird nun zu Deiner Website hinzugefügt. Nachdem das Widget auf der Seite eingefügt wurde, solltest Du einen verschwommenen Rahmen mit dem Umriss eines Buchungskalenders sehen.
   
   Du kannst die Größe des Widget-Rahmens bereits ändern, aber das kannst Du auch später anpassen, wenn Du den Installationsprozess abgeschlossen hast.
5. Navigiere zum SuperSaaS Dashboard in Wix. Du kannst dies oft direkt von Deinem Website-Editor aus tun, indem Du auf die Schaltfläche Dashboard oben im SuperSaaS-Widget klickst. Wenn diese Schaltfläche nicht verfügbar ist, findest Du das SuperSaaS-Dashboard im Bereich Apps auf dem Dashboard der Wix-Website:
   
6. Melde Dich bei Deinem SuperSaaS-Konto im Wix-Dashboard an. Fülle alle erforderlichen Details aus. Dabei musst Du den API-Schlüssel von SuperSaaS kopieren und bei Wix einfügen, um das Single Sign-On zu aktivieren.
   Sie können einen API-Schlüssel für Ihr SuperSaaS-Konto generieren, indem Du auf die Schaltfläche „Generieren“ am unteren Rand der Seite Konto-Infos in SuperSaaS klickst.
7. Klicke auf „Anmelden“, um Deine Anmeldedaten zu überprüfen. Wenn Du Deinen Kontonamen, Dein Passwort und Deinen API-Schlüssel korrekt eingegeben hast, wird eine Bestätigungsmeldung mit einigen zusätzlichen Informationen angezeigt. Du musst die Anmeldung am Dashboard über Wix nur einmal durchführen.

Konfigurieren des Widgets auf Wix

Nachdem Du Deine Anmeldedaten hinzugefügt hast, kannst Du zum Widget im Editor zurückkehren und auf „Kalender konfigurieren“ klicken. Wenn alles gut gegangen ist, kannst Du das Widget einrichten. Es sind zwei Optionen verfügbar, Basis und Erweitert.

• Die Option Basis holt direkt alle Deine online Terminbuchungskalender von SuperSaaS ab. Du kannst den gewünschten Buchungskalender auswählen und er wird automatisch geladen. Wenn Du fertig bist, klicke oben in Deinem Wix-Editor auf „Änderungen speichern“ oder Wix-Seite „Veröffentlichen“ oben in Deinem Wix-Editor.
• In der Option Erweitert kannst Du unseren Widget-Generator verwenden, um ein Code-Element zu generieren. Kopiere den Code und füge ihn in der Ansicht „Widget-Konfiguration“ ein. Wenn Du fertig bist, klicke oben in Deinem Wix-Editor auf „Speichern“ oder „Veröffentlichen“ Deiner Wix-Seite.

Wenn Du die Basisoption gewählt hast oder einen Rahmen in der erweiterten Option hinzugefügt hast, wird dieser wahrscheinlich so aussehen wie der unten stehende Terminbuchungsplan. Wenn Du die Größe des Rahmens ändern möchtest, kannst Du das direkt im Editor anpassen.

Wix-Seite automatisch neu laden, wenn sich ein Benutzer anmeldet

Wenn Deine Wix-Seite neu geladen werden soll, nachdem sich der Benutzer angemeldet hat, damit er auch automatisch bei SuperSaaS eingeloggt ist, kopiere den folgenden Code auf die Seite, auf der Du das Widget platzieren.

import { authentication } from 'wix-members';	
import wixLocation from 'wix-location';

$w.onReady(function () {
    authentication.onLogin(() => {
    wixLocation.to(wixLocation.url)
    });
});

Füge den Code oberhalb eines bereits vorhandenen Codes in den Code-Bereich am unteren Rand Deiner Wix-Editor-Seite ein. Es sollte in etwa so aussehen wie auf dem Screenshot unten:

Nachdem Du nun die Einmalanmeldung als Single Sign-On hinzugefügt hast, enthält der Rahmen des Buchungskalenders eine Menüleiste, die anzeigt, dass der Benutzer angemeldet ist. Sie sollte in etwa so aussehen:

Aktualisiere Deine Anmeldedaten oder den API-Schlüssel in der Datenbank

Wenn Du Deine Anmeldedaten in Zukunft ändern möchtest, kannst Du dies direkt im Wix Website Editor tun. Dies ist zum Beispiel nützlich, wenn Du den Namen Deines online Terminbuchungssystems im SuperSaaS-Konto änderst.

Wenn Du Dich zum ersten Mal auf dem SuperSaaS-Dashboard in Wix anmelden, wird eine eindeutige Sammlung mit einer eindeutigen ID für die Anmeldeinformationen erstellt. Um diese Anmeldedaten später zu ändern, musst Du den Abschnitt Datenbank im Wix-Editor finden.

Du kannst Deine Anmeldedaten in der Sammlung @SuperSaaS bearbeiten. Wenn Du Deinen API-Schlüssel zuvor hinzugefügt hast, findest Du diese auch hier gespeichert. Wenn Du sie noch nicht hinzugefügt hast, kannst Du sie jederzeit hier hinzufügen.