Buchungs-Widget zur Website hinzufügen

Was das Widget macht

Mit dem Buchungs-Widget können Gäste den Reslify-Reservierungsablauf von der Restaurant-Website aus starten. Je nach Installationsmodus kann es modal, als Drawer oder inline innerhalb eines Seitenabschnitts geöffnet werden.

Die kopierbaren Links und Snippets befinden sich unter Einstellungen / Portal / Portaleinstellungen / Installieren.

Vor dem Kopieren eines Snippets

Bestätigen Sie diese Punkte, bevor Sie Code an das Website-Team senden:

• Portalzugriffsmodus ist Öffentlich. Die Kopierschaltflächen auf der Registerkarte Installation sind deaktiviert, während der Zugriff Eingeschränkt oder Deaktiviert ist.
• Wenn die Seite noch überprüft wird, behalten Sie den Zugriff Eingeschränkt bei und verwenden Sie Portal öffnen oder Einbettungsvorschau öffnen für Personalüberprüfungen. Öffentliche Website-Installationen funktionieren für Gäste erst, wenn der Zugriff Öffentlich ist.
• Die öffentliche Buchungsseite wird erfolgreich über Portal öffnen geöffnet.
• Die Einbettungsroute lässt sich über Einbettungsvorschau öffnen aufrufen.
• Erlaubte Origins unter Portaleinstellungen / Allgemein ist entweder bewusst leer oder enthält alle Produktions-, www-, Staging- und Vorschau-Origins, auf denen das Widget ausgeführt wird.
• Die modusspezifischen Einstellungen wurden vor dem Kopieren gespeichert: Button-Text, Offset, Z-Index, Modalbreite, Drawer-Seite, Launcher-Platzierung, Drawer-Breite oder Inline-Mindesthöhe.
• Ein Entwickler oder Website-Redakteur kann Skript-Tags in die Website oder das CMS einfügen, ohne dass die Plattform sie entfernt.

Nur Besitzer und Administratoren können den Portalzugriffsmodus ändern. Mitarbeiter können die Seite über Mitarbeiterstarts überprüfen, aber sie können eine eingeschränkte oder deaktivierte öffentliche Installation nicht für Gäste nutzbar machen.

Wählen Sie die Installationsausgabe

Verwenden Sie die Ausgabe, die der Website-Änderung entspricht:

• Buchungsseiten-URL ist ein direkter Link zur eigenständigen Buchungsseite. Verwenden Sie es für Website-Schaltflächen oder soziale Links, die eine neue Seite öffnen sollen.
• Rohe Embed-URL öffnet die Iframe-Route direkt. Verwenden Sie es für die Vorschau oder für Entwickler, die einen benutzerdefinierten Iframe-Host erstellen.
• Widget-Skript-URL ist die eigenständige Skriptdatei. Verwenden Sie es nur, wenn ein Entwickler ein benutzerdefiniertes Skript-Tag schreibt.
• Modal-Embed-Skript fügt eine Launcher-Schaltfläche ein und öffnet die Buchung in einem zentrierten Overlay.
• Drawer-Embed-Skript fügt eine Launcher-Schaltfläche ein und öffnet die Buchung vom Seitenrand aus.
• Inline-Embed-Skript enthält den #reslify-booking-Container und bindet den Buchungsfluss direkt in diesen Seitenabschnitt ein.

Kopieren Sie für die meisten Restaurant-Websites eines der drei Einbettungsskripte anstelle der Roh-URL. Verwenden Sie Modal oder Drawer, wenn die Buchung bei Bedarf geöffnet werden soll. Verwenden Sie Inline, wenn der Buchungsbereich als Hauptteil der Seite sichtbar sein soll.

Installieren Sie das Widget

1. Öffnen Sie Einstellungen / Portal.
2. Öffnen Sie in den Portaleinstellungen die Registerkarte Installation.
3. Überprüfen Sie den Installationshinweis. Es sollte heißen, dass die Links und Snippets für öffentliche Installationen bereit sind.
4. Kopieren Sie das Modal-Embed-Skript, Drawer-Embed-Skript oder Inline-Embed-Skript.
5. Fügen Sie das Snippet in die Restaurant-Website oder das CMS ein.
6. Platzieren Sie für Modal das Skript dort, wo die Standard-Launcher-Schaltfläche gerendert werden soll.
7. Fügen Sie für Drawer das Skript einmal auf der Seite ein; Die Launcher-Position ergibt sich aus Launcher-Platzierung und Offset.
8. Fügen Sie für Inline das bereitgestellte div und das Skript dort ein, wo der Reservierungsabschnitt erscheinen soll. Behalten Sie id="reslify-booking" und data-reslify-target="#reslify-booking" bei, es sei denn, ein Entwickler ändert absichtlich beide Werte.
9. Veröffentlichen Sie die Website-Seite oder zeigen Sie eine Vorschau an.

Wenn die Website über separate Staging- und Produktionsumgebungen verfügt, testen Sie das Snippet zunächst im Staging und stellen Sie sicher, dass beide Ursprünge in Portaleinstellungen/Allgemein zulässig sind.

Überprüfen Sie die Installation

Bevor die Website-Änderung live geht:

1. Verwenden Sie im Panel Portal öffnen, um das Laden der eigenständigen Seite zu bestätigen.
2. Verwenden Sie Einbettungsvorschau öffnen, um zu bestätigen, dass die Einbettungsroute geladen wird.
3. Öffnen Sie die Website-Seite als Gast, vorzugsweise in einem Inkognito-Fenster.
4. Vergewissern Sie sich, dass der modale oder Drawer-Starter mit dem erwarteten Button-Text angezeigt wird oder dass der Inline-Buchungsabschnitt im vorgesehenen Seitenabschnitt angezeigt wird.
5. Starten Sie eine Buchung und wählen Sie Gruppengröße, Datum, Erlebnis und Uhrzeit aus.
6. Stellen Sie sicher, dass das Widget auf Mobilgeräten verwendbar bleibt und nicht hinter der Website-Navigation, Cookie-Bannern oder Chat-Widgets versteckt ist.
7. Schließen Sie bei Modal- und Drawer-Installationen das Widget und bestätigen Sie, dass der Gast sauber zur Website-Seite zurückkehrt.

Die Auswahl einer Uhrzeit und eines Erlebnisses kann die Uhrzeit vorübergehend reservieren. Beenden Sie den Test vor der letzten Bestätigung, sofern Sie nicht bewusst eine Testreservierung erstellen möchten. Wenn Sie eine Testbuchung abschließen, prüfen Sie, ob sie unter Buchungen erscheint und ob E-Mail-Adresse, Richtlinien und Zahlungsablauf wie erwartet funktionieren.

Wenn das Widget nicht angezeigt wird, überprüfen Sie Folgendes:

• Portalzugriffsmodus ist Öffentlich.
• Die Website hat das script-Tag nicht entfernt.
• Das Snippet enthält weiterhin data-reslify-merchant.
• Erlaubte Origins umfassen den genauen Website-Ursprung, oder das Feld ist absichtlich leer.
• Die Browserkonsole zeigt keinen Origin-, Iframe- oder Reslify embed-Fehler an.
• Der Z-Index der Website verbirgt das Modal, der Drawer oder den Launcher nicht hinter einem anderen Element.

Wann der Website-Code aktualisiert werden soll

Speichern Sie zuerst Portaleinstellungen und kopieren Sie dann ein neues Snippet, wenn Sie zwischen Modal, Drawer und Inline wechseln oder wenn Sie Einstellungen ändern, die in das Snippet geschrieben werden:

• Button-Text
• Versatz
• Z-Index
• Modalbreite
• Drawer-Seite
• Launcher-Platzierung
• Drawer-Breite
• Inline-Mindesthöhe

Viele gespeicherte Portaleinstellungen werden vom Skript abgerufen, wenn die Seite geladen wird, data-reslify-*-Attribute sind jedoch Teil des Website-Codes. Durch das Aktualisieren des Snippets bleibt der Website-Code am Panel ausgerichtet.