Wählen Sie den Modal-, Drawer- oder Inline-Widget-Modus

So funktionieren Widget-Modi

Das Buchungs-Widget kann auf einer Restaurant-Website in drei Modi angezeigt werden:

• Modal: Gäste klicken auf einen Launcher und die Buchung wird in einem zentrierten Overlay geöffnet.
• Drawer: Gäste klicken auf einen Launcher und die Buchung wird am Seitenrand geöffnet.
• Inline: Der Buchungsablauf wird direkt in einen Seitenabschnitt eingebunden.

Der Standardmodus wird unter Einstellungen / Portal / Portaleinstellungen / Allgemein konfiguriert. Dies ist der Fallback, der verwendet wird, wenn ein Website-Skript nicht explizit einen Modus festlegt. Die Snippets in Portaleinstellungen/Installieren legen ihren Modus mit data-reslify-mode fest, sodass ein bereits eingefügtes Modal-, Drawer- oder Inline-Snippet diesen Modus weiterhin verwendet, bis der Website-Code aktualisiert wird.

Wenn Sie den Modus ändern, ändert sich die Art und Weise, wie Gäste denselben Reservierungsablauf öffnen. Verfügbarkeit, Erlebnisse, Gästerichtlinien, Zahlungsregeln oder die Art und Weise, wie Mitarbeiter resultierende Buchungen verwalten, werden dadurch nicht geändert.

Bevor Sie einen Modus auswählen

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

• Der Portalzugriffsmodus muss Öffentlich sein, bevor Gäste das Widget auf der Live-Website verwenden können. Eingeschränkt gilt für den Start von Mitarbeitervorschauen und Deaktiviert blockiert Seiten-, Einbettungs- und Designerstarts.
• Erlaubte Origins in Portaleinstellungen/Allgemein sollten jeden Produktions-, www-, Staging- oder Vorschauursprung umfassen, auf dem das Widget ausgeführt wird, es sei denn, Sie lassen das Feld absichtlich leer.
• Button-Text wird im SDK-Launcher und im modalen oder Drawer-Header angezeigt.
• Z-Index beeinflusst, ob der Launcher, das Modal oder Drawer über der Website-Navigation, Cookie-Bannern, Chat-Widgets und anderen Overlays angezeigt wird.
• Der Website-Editor kann Skript-Tags einfügen. Einige CMS-Editoren entfernen Skripte, es sei denn, sie werden über einen Code-Injection-Bereich hinzugefügt.

Nur Besitzer und Administratoren können den Portalzugriffsmodus ändern. Mitarbeiter können eine Vorschau anzeigen und testen, aber sie können ein eingeschränktes oder deaktiviertes Widget nicht für öffentliche Gäste nutzbar machen.

Wann man Modal verwendet

Wählen Sie Modal, wenn die Restaurant-Website ein normales Seitenlayout hat und die Buchung als fokussiertes Overlay erscheinen soll. Dies ist in der Regel die einfachste Erstinstallation, da kein großer, spezieller Buchungsbereich erforderlich ist.

Modal eignet sich gut für:

• Buchungsschaltflächen in der Kopfzeile oder in der Navigation
• Zielseiten der Kampagne
• Websites, bei denen die Buchung den Seitenfluss deutlich unterbrechen soll
• Teams, die eine einfache Standardinstallation wünschen

Das modale Snippet fügt eine SDK-Startschaltfläche ein. Wenn ein Gast darauf klickt, öffnet sich das Widget in einem zentrierten Overlay mit der Modal-Breite (px) aus der Registerkarte Modal und verwendet den gemeinsamen Z-Index aus Allgemein. Behandeln Sie das Modal auf kleinen Bildschirmen beim Testen als Vollbild-Buchungsoberfläche.

Wann man Drawer verwenden sollte

Wählen Sie Drawer, wenn sich die Buchung mit der aktuellen Seite verbunden fühlen und dennoch vom Seiteninhalt getrennt bleiben soll. Der Drawer funktioniert gut, wenn Gäste Seiteninhalte und Buchungsdetails vergleichen können, ohne sich völlig wegzubewegen.

Drawer passt gut für:

• Restaurant-Homepages mit dauerhaften Buchungsaktionen
• Layouts mit ausreichend horizontalem Platz auf dem Desktop
• Teams, die eine leichtere Unterbrechung als eine Modalunterbrechung wünschen

Das Drawer-Snippet fügt eine SDK-Startschaltfläche ein und öffnet das Widget von der konfigurierten Drawer-Seite aus. Verwenden Sie Launcher-Platzierung, Versatz (px) und Drawer-Breite (px) auf der Registerkarte Drawer, um den Launcher und das Panel frei von überlagerter Navigation, Cookie-Bannern und Chat-Widgets zu halten.

Überprüfen Sie das mobile Verhalten sorgfältig. Der Drawer-Breite wird durch das Ansichtsfenster begrenzt, sodass sie auf kleinen Geräten fast wie ein Vollbild wirkt.

Wann Inline verwendet werden sollte

Wählen Sie Inline, wenn die Buchung Teil des Seitentexts sein soll. Inline eignet sich am besten für Seiten, bei denen die Reservierungsumwandlung der Hauptzweck der Seite ist.

Inline eignet sich gut für:

• eine spezielle Reservierungsseite
• Event- oder Erlebnisseiten
• Kampagnenseiten, auf denen das Buchungsformular sofort sichtbar sein soll

Das Inline-Snippet enthält <div id="reslify-booking"></div> und bindet den Iframe mit data-reslify-target="#reslify-booking" in dieses Ziel ein. Behalten Sie div und das Skript bei, es sei denn, ein Entwickler ändert absichtlich sowohl die Ziel-ID als auch das Skriptattribut.

Inline-Installationen benötigen ausreichend vertikalen Platz. Bestätigen Sie, dass Inline-Mindesthöhe (px) zum Website-Layout passt. Der Iframe kann wachsen, wenn sich die Höhe des Buchungsflusses ändert, er wird jedoch nicht unter das konfigurierte Minimum schrumpfen.

Ändern Sie den Standardmodus

1. Öffnen Sie Einstellungen / Portal.
2. Lassen Sie in den Portaleinstellungen die Registerkarte Allgemein ausgewählt.
3. Suchen Sie nach Standardmodus.
4. Wählen Sie Modal, Drawer oder Inline.
5. Passen Sie bei Bedarf Button-Text, Z-Index, Erlaubte Origins und Inline-Mindesthöhe (px) an.
6. Wählen Sie Portaleinstellungen speichern.
7. Öffnen Sie Portaleinstellungen / Installieren.
8. Kopieren Sie das passende Modal-Embed-Skript, Drawer-Embed-Skript oder Inline-Embed-Skript, wenn der Website-Code geändert werden muss.
9. Öffnen Sie die Website oder Einbettungsvorschau öffnen und testen Sie das Ergebnis.

Wenn die Website bereits über ein älteres Snippet verfügt, kann es sein, dass die Änderung des Standardmodus allein die Live-Website möglicherweise nicht aktualisiert. Die generierten Installations-Snippets enthalten modusspezifische data-reslify-*-Attribute wie modale Breite, Drawer-Seite, Drawer-Breite oder Inline-Mindesthöhe. Speichern Sie zuerst die Einstellungen und kopieren Sie dann ein neues Snippet, wenn sich diese Werte ändern.

Überprüfen Sie den Modus

Bevor die Website-Änderung live geht:

1. Bestätigen Sie mit Portal öffnen, dass die eigenständige Buchungsseite weiterhin geladen wird.
2. Verwenden Sie Einbettungsvorschau öffnen, um zu bestätigen, dass die Einbettungsroute geladen wird.
3. Testen Sie die tatsächliche Website-Seite als Gast, vorzugsweise in einem Inkognito-Fenster.
4. Vergewissern Sie sich für Modal und Drawer, dass der Launcher mit dem erwarteten Button-Text angezeigt wird, über der Website geöffnet und sauber geschlossen wird.
5. Bestätigen Sie bei Inline-Buchungen, dass der Buchungsbereich im vorgesehenen Seitenbereich angezeigt wird und auf Mobilgeräten und Desktops genügend vertikaler Platz vorhanden ist.
6. Starten Sie eine Buchung und bestätigen Sie, dass Gäste zu den gewünschten Details, Richtlinien oder Zahlungsschritten gelangen können.

Durch die Auswahl eines Slots kann eine vorübergehende Sperrung erfolgen. Stoppen Sie vor der endgültigen Bestätigung, es sei denn, Sie möchten absichtlich eine Testreservierung. Wenn Sie eine ausfüllen, sollten die Mitarbeiter diese in Buchungen überprüfen und sie gemäß dem Testbuchungsprozess des Restaurants stornieren oder bereinigen.