Das Buchungs-Widget auf Ihrer Website einbinden

In allen Tarifen enthaltenBuchungs-WidgetFür Manager

Erfordert: Inhaber oder Admin (zum Öffnen der Einstellungsseite); jeder mit Zugang zur Website kann den Code einfügen

Sie bringen das Buchungs-Widget auf Ihre eigene Website, indem Sie ein kurzes Stück Code einfügen. Es gibt zwei Darstellungsarten: als schwebender Bubble-Button oder eingebettet in eine Seite. Sie können auch eine gehostete Buchungsseite teilen, ohne Ihre Website anzufassen.

Wo Sie es finden

Backoffice › Einstellungen › Widget-Verwaltung › Integration › Widget-Einbettungscode

Was es bewirkt

  • Bubble-Modus – „Schwebende Schaltfläche in der unteren rechten Ecke“. Der Button öffnet das Buchungsfenster über Ihrer Seite. Ideal, wenn die Buchung auf jeder Seite verfügbar sein soll.
  • Eingebetteter Modus – „Inline-Widget im Seiteninhalt“. Das Widget erscheint dort, wo Sie den Code einfügen, zum Beispiel auf einer Seite „Reservierungen“.
  • Gehostete Seite – die Schaltfläche In neuem Tab öffnen über der Vorschau öffnet Ihr Widget auf einer eigenen 10Seat-Seite. Die Adresse dieser Seite können Sie als direkten Buchungslink nutzen (für Social Media oder ein Link-in-Bio). Standort-Widget-Seite öffnet ein Vollseiten-Layout desselben Widgets.

Farben und Button-Text werden aus Ihren gespeicherten Widget-Einstellungen geladen. Wenn Sie Ihr Branding später ändern, müssen Sie den Code nicht ersetzen.

So richten Sie es ein

  1. Achten Sie darauf, dass in der Kopfzeile der richtige Standort ausgewählt ist.
  2. Gehen Sie zu Einstellungen › Widget-Verwaltung und öffnen Sie die Gruppe Integration.
  3. Kopieren Sie unter Widget-Einbettungscode den Code für Bubble-Modus oder Eingebetteter Modus (oder Alles kopieren).
  4. Fügen Sie ihn in Ihre Website ein:
    • Bubble: einmal, auf jeder Seite (die meisten Website-Baukästen haben eine Einstellung „Eigener Code / Footer-Code“).
    • Eingebettet: in einem HTML- oder Einbettungsblock auf der Seite, auf der das Widget erscheinen soll.
  5. Behalten Sie den noscript-Block „Bereitgestellt von 10Seat“ bei, der mit dem Code mitkommt. Er ist für Suchmaschinen gedacht.
  6. Veröffentlichen Sie Ihre Website und testen Sie eine Buchung.

So öffnen Sie die Bubble über Ihren eigenen Button

Unter Über deinen eigenen Button öffnen (optional) erhalten Sie ein Snippet, mit dem ein vorhandener „Buchen“-Button auf Ihrer Website die Bubble öffnet. Fügen Sie dem Button das Attribut data-tenseat-open hinzu, oder lassen Sie Ihren Webentwickler die dort angezeigten Funktionen zum Öffnen/Schließen aufrufen. Der Bubble-Code muss ebenfalls auf der Seite sein.

So verlinken Sie auf eine vorausgefüllte Buchung

Sie können diese Parameter an die Adresse einer Seite anhängen, die das Widget enthält:

  • ?10seat_code=your-code – öffnet ein bestimmtes Erlebnis (verwenden Sie den Marketingcode des Erlebnisses).
  • 10seat_date=2026-12-24, 10seat_guests=4, 10seat_time=19:30 – wählen Datum (Jahr-Monat-Tag), Gruppengröße und Uhrzeit vor.

Gut zu wissen

  • Ein Code gilt für einen Standort. Jeder Standort hat seinen eigenen Code.
  • Für mehrere Standorte auf einer Website nutzen Sie das Multi-Standort-Widget (siehe verwandter Artikel).
  • Der Code enthält Einstellungen, die verhindern, dass Page-Speed-Plugins ihn verändern. Entfernen Sie sie nicht.

Fehlerbehebung

Das Widget erscheint nicht auf meiner Website Der Code wurde in einen Textblock statt in einen HTML-/Codeblock eingefügt, oder ein Caching- oder „JavaScript optimieren“-Plugin hat ihn verändert. Fügen Sie ihn erneut in einen Codeblock ein und nehmen Sie ihn von der Skriptoptimierung aus. Leeren Sie den Cache der Website.

Die Bubble erscheint doppelt oder die Seite lädt das Widget zweimal Der Bubble-Code ist an zwei Stellen eingefügt (zum Beispiel im Theme und auf der Seite). Behalten Sie ihn nur an einer Stelle.

Mein eigener „Buchen“-Button tut nichts Der Bubble-Code fehlt auf dieser Seite, oder das Attribut wurde einem Element hinzugefügt, das nicht der Button ist. Prüfen Sie beides.

Das Widget zeigt das falsche Restaurant Der Code gehört zu einem anderen Standort. Wählen Sie in der Kopfzeile den richtigen Standort aus und kopieren Sie den Code erneut.

Die Farben auf meiner Website stimmen nicht mit dem überein, was ich gespeichert habe Speichern Sie Ihre Änderungen zuerst mit Theme speichern und laden Sie dann Ihre Website neu. Browser zeigen aus dem Cache kurzzeitig noch die alten Farben an.