Das Buchungs-Widget wird nicht angezeigt

Verwenden Sie diese Anleitung, wenn das Reslify-Widget zur Restaurant-Website hinzugefügt wurde, der Launcher, der Drawer, das Modal- oder Inline-Buchungsablauf jedoch fehlt oder unbrauchbar ist.

Beginnen Sie mit einem Kontrolltest

Bevor Sie den Website-Code ändern, überprüfen Sie dasselbe Restaurant an drei Stellen:

1. Wählen Sie in Einstellungen / Portal die Option Portal öffnen. Wenn die eigenständige Buchungsseite nicht geöffnet wird, reparieren Sie zuerst den Portalzugriff oder die Buchungsseite.
2. Wählen Sie unter Einstellungen / Portal / Portaleinstellungen / Installieren die Option Einbettungsvorschau öffnen. Wenn die eigenständige Seite geöffnet wird, die Einbettungsvorschau jedoch nicht, konzentrieren Sie sich auf den Portalzugriff, die Einbettungskonfiguration oder das ausgewählte Restaurant.
3. Öffnen Sie die Website des Restaurants als Gast, am besten in einem Inkognito-Fenster. Wenn die ersten beiden Prüfungen funktionieren, die Website jedoch nicht, konzentrieren Sie sich auf die Website-Installation, zulässige Ursprünge, Skriptblocker oder das Seitenlayout.

Wenn das Widget geöffnet wird und die Restaurantmarke, Suchsteuerungen oder Meldungen wie Keine verfügbaren Zeitfenster gefunden. oder Keine verfügbaren Plätze an diesem Datum anzeigt, ist das Widget installiert. Das ist ein Verfügbarkeitsproblem, kein Problem mit fehlenden Widgets.

Bestätigen Sie den Portalzugriff

Öffnen Sie Einstellungen / Portal und aktivieren Sie Portalzugriff.

• Der Portalzugriffsmodus muss Öffentlich sein, bevor Gäste das Widget auf der Live-Website verwenden können.
• Eingeschränkt gilt für Starts nur für Mitarbeiter über das Panel. Öffentliche Besucher, die direkte Links oder Einbettungen öffnen, werden als „Nicht gefunden“ angezeigt und Aktionen zum Kopieren öffentlicher Installationen bleiben deaktiviert.
• Deaktiviert blockiert Portal öffnen, Portal-Designer öffnen, Einbettungsvorschau öffnen und öffentliche Installationsaktionen.

Nur Besitzer und Administratoren können den Portalzugriffsmodus ändern. Mitarbeiter können Mitarbeitervorschauen nutzen, wenn der Zugriff dies zulässt, aber sie können ein eingeschränktes oder deaktiviertes Widget nicht für öffentliche Gäste nutzbar machen.

Bestätigen Sie das Installations-Snippet

Öffnen Sie Einstellungen / Portal / Portaleinstellungen / Installieren und kopieren Sie das aktuelle Widget-Snippet aus dem aktiven Restaurant. Der Installationshinweis sollte besagen, dass Links und Snippets für öffentliche Installationen bereit sind.

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

• Modal-Embed-Skript fügt eine Launcher-Schaltfläche hinzu und öffnet die Buchung in einem zentrierten Overlay.
• Drawer-Embed-Skript fügt eine Launcher-Schaltfläche hinzu und öffnet die Buchung vom Seitenrand aus.
• Inline-Embed-Skript enthält den #reslify-booking-Container und stellt den Buchungsablauf direkt in diesem Seitenabschnitt bereit.
• Die unverarbeitete Einbettungs-URL dient hauptsächlich als Vorschau oder benutzerdefiniertes Iframe-Ziel, nicht für die übliche Website-Installation per Kopieren und Einfügen.
• Widget-Skript-URL ist für Entwickler gedacht, die ihr eigenes Skript-Tag schreiben.

Die generierten Modal-, Drawer- und Inline-Skripte sollten den aktuellen data-reslify-merchant-Wert und einen data-reslify-mode-Wert enthalten. Wenn der Website-Code auf einen anderen Restaurantbetreiber, einen alten Portal-Host oder ein Staging-Skript auf der Produktionsseite verweist, ersetzen Sie ihn durch ein neues Snippet aus der richtigen Panel-Umgebung.

Speichern Sie Portaleinstellungen, bevor Sie ein neues Snippet kopieren, wenn Sie Button-Text, Versatz, Z-Index, Modalbreite, Drawer-Seite, Launcher-Platzierung, Drawer-Breite oder Inline-Mindesthöhe geändert haben. Diese Werte werden in die generierten Skriptattribute geschrieben.

Überprüfen Sie die zulässigen Ursprünge

Öffnen Sie Einstellungen / Portal / Portaleinstellungen / Allgemein / Laufzeit und überprüfen Sie Erlaubte Origins.

Wenn zulässige Ursprünge konfiguriert sind, muss der Browser-Ursprung genau übereinstimmen. Verwenden Sie den Wert aus window.location.origin der Website: Protokoll, Hostname und optionaler Port. Geben Sie keine Seitenpfade an.

Überprüfen Sie jeden Host, auf dem das Widget ausgeführt werden soll:

• die Produktionsdomäne
• die Version www, wenn die Site sie separat verwendet – der vom Website-Team verwendete Staging-, Vorschau- oder CMS-Host
• alle nicht standardmäßigen Ports, die beim Testen verwendet werden

Wenn das Feld leer ist, lässt das SDK jeden Host zu und verwendet den aktuellen Website-Ursprung für postMessage. Bei einer Live-Website sind explizite Ursprünge einfacher zu prüfen. Aktualisieren Sie nach dem Speichern der Ursprünge die Website-Seite, bevor Sie den Test erneut durchführen.

Wenn das Widget in der Produktion, aber nicht im Staging funktioniert, oder im Staging, aber nicht in der Produktion, vergleichen Sie den endgültigen Browserursprung nach den Weiterleitungen. Eine Umleitung zwischen https://restaurant.example und https://www.restaurant.example ändert den Ursprung, den das SDK validiert.

In Browser-Entwicklertools kann ein Ursprungsproblem als Konsolenwarnung ähnlich wie Reslify embed: current origin is not allowlisted for postMessage erscheinen.

Überprüfen Sie die Layout- und Launcher-Einstellungen

Öffnen Sie Einstellungen / Portal / Portaleinstellungen / Allgemein und bestätigen Sie den Widget-Modus und das Launcher-Verhalten.

• Standardmodus ist der Fallback, wenn ein Website-Skript keinen Modus festlegt. Generierte Snippets legen ihren eigenen Modus fest, sodass ein älteres Skript weiterhin Modal, Drawer oder Inline verwenden kann, bis der Website-Code aktualisiert wird.
• Button-Text steuert den SDK-Launchertext und den Modal- oder Drawer-Kopfzeile.
• Z-Index steuert, ob der Launcher, das Modal oder Drawer über der Sticky-Navigation, Cookie-Bannern, Chat-Widgets und anderen Overlays angezeigt wird.
• Inline-Mindesthöhe steuert die Mindesthöhe von Inline-Installationen.

Bei Modal erscheint der Standard-Launcher dort, wo das Skript auf der Seite platziert wird. Wenn es in einen ausgeblendeten Vorlagenbereich, einen Fußzeilenblock oder eine minimierte CMS-Komponente eingefügt wurde, sehen Gäste die Schaltfläche möglicherweise nicht.

Für Drawer ist der Standard-Launcher auf die konfigurierte Launcher-Platzierung und Offset festgelegt. Erhöhen Sie den Z-Index oder passen Sie die Platzierung an, wenn ein anderes Website-Element ihn verdeckt.

Behalten Sie für Inline das bereitgestellte div und das Skript bei, es sei denn, ein Entwickler ändert absichtlich sowohl das Zielelement als auch data-reslify-target. Wenn der #reslify-booking-Container entfernt, dupliziert, durch CSS ausgeblendet oder in einer Registerkarte platziert wird, die beim Laden der Seite nicht gerendert wird, wird der Buchungsablauf möglicherweise nicht an der erwarteten Stelle angezeigt.

Wenn das Widget vorhanden, aber schwer zu sehen ist, überprüfen Sie die Farben des Launchers, das Modal- oder Drawer-Chrom und das Website-Thema, bevor Sie die Verfügbarkeitseinstellungen ändern.

Überprüfen Sie Website- und Browserblocker

Wenn die Panel-Vorschau funktioniert, die Restaurant-Website das Widget aber immer noch nicht anzeigt, überprüfen Sie die veröffentlichte Website-Seite:

1. Bestätigen Sie, dass das Tag script nach der Veröffentlichung der Seite noch vorhanden ist. Einige CMS-Editoren entfernen Skripte, es sei denn, sie werden über eine Code-Injection oder einen benutzerdefinierten HTML-Bereich hinzugefügt.
2. Bestätigen Sie, dass das Skript weiterhin data-reslify-merchant enthält. Wenn das Attribut entfernt wird, kann die Browserkonsole warnen, dass der Restaurantbetreiber fehlt.
3. Vergewissern Sie sich auf der Registerkarte „Netzwerk“, dass der Browser booking-widget.js, die Einbettungskonfigurationsroute und den Einbettungs-Iframe laden kann.
4. Überprüfen Sie die Browserkonsole auf Reslify embed-, Ursprungs-, Iframe- oder blockierte Skriptmeldungen.
5. Testen Sie in einem Inkognito-Fenster mit deaktivierten Erweiterungen. Werbeblocker, Datenschutzerweiterungen, strenger Tracking-Schutz, Unternehmensfilter oder eine Sicherheitsrichtlinie für Website-Inhalte können Skripte oder Iframes von Drittanbietern blockieren.
6. Wenn nur ein Gast betroffen ist, bitten Sie ihn, einen anderen Browser, ein anderes Gerät oder ein anderes Netzwerk auszuprobieren. Wenn jeder Browser auf derselben Website-Seite ausfällt, behandeln Sie dies als ein Website-Installations- oder Host-Konfigurationsproblem.

Separate Installation und Verfügbarkeit

Nutzen Sie das Ergebnis, um die nächste Untersuchung auszuwählen:

| Was Sie sehen | Wahrscheinlicher Bereich | | --- | --- | | Portal öffnen schlägt fehl | Portalzugriff, ausgewähltes Restaurant, öffentliche Seite oder Support-Eskalation | | Portal öffnen funktioniert, aber Einbettungsvorschau öffnen schlägt fehl | Einbettungszugriff, Portalzugriffstoken, Restaurant-ID oder Einbettungsroute | | Beide Panel-Prüfungen funktionieren, aber die Website schlägt fehl | Website-Snippet, zulässige Ursprünge, Skriptblocker, Z-Index oder Seitenlayout | | Widget wird geladen, zeigt aber keine Zeiten an | Verfügbarkeit, Schichten, besondere Tage, Tischverfügbarkeit, Erlebnisregeln, bestehende Buchungen oder vorübergehende Sperren | | Modal oder Drawer öffnet sich hinter einem anderen Element | Z-Index, Launcher-Platzierung, Website-Overlays, Cookie-Banner oder Chat-Widget | | Der Inline-Abschnitt ist leer oder zu kurz | #reslify-booking Ziel, versteckter Container, entferntes Skript oder Inline-Mindesthöhe |

Ändern Sie das Website-Snippet nicht ständig, wenn sowohl die eigenständige Buchungsseite als auch das Widget geladen werden, aber die gleiche No-Slot-Meldung angezeigt wird. Reproduzieren Sie die Gruppengröße, das Datum, den Ort oder die Region und das Erlebnis des Gastes und prüfen Sie dann die Verfügbarkeit über Buchungen, Einstellungen/Schichten, Einstellungen/Sondertage, Einstellungen/Tischplan und Einstellungen/Erlebnisse.

Wenn Sie es an den Support oder einen Website-Entwickler weiterleiten, erfassen Sie die Website-URL, den Wert von window.location.origin, das aktive Restaurant, den Portalzugriffsmodus, das verwendete Snippet-Feld und alle Browser-Konsolen- oder Netzwerkfehler.