Dein Restaurant hat eine Website, aber deine Gäste müssen immer noch anrufen, um einen Tisch zu reservieren? Das ändern wir jetzt. Ein Buchungswidget ist ein kleines Formular, das direkt auf deiner Website erscheint und es Gästen ermöglicht, rund um die Uhr online zu reservieren — ohne die Seite zu verlassen.
Welche Funktionen das Buchungsformular mitbringt, zeigt die Seite Tischreservierung-Widget für die eigene Website.
Die Einbindung dauert weniger als fünf Minuten und erfordert keine Programmierkenntnisse. In dieser Anleitung zeigen wir dir Schritt für Schritt, wie du das TischAmigos-Widget auf verschiedenen Website-Plattformen einbindest.
Was ist ein Buchungs-Widget?
Ein Buchungswidget ist ein interaktives Formular, das du auf deiner bestehenden Website einbettest. Es zeigt deinen Gästen verfügbare Zeitfenster, lässt sie die Personenzahl auswählen und ihre Kontaktdaten eingeben. Nach der Buchung erhalten sie automatisch eine Bestätigungs-E-Mail.
Das Widget passt sich automatisch an das Design deiner Website an — du kannst Farben, Schriftarten und den Button-Stil anpassen. Es funktioniert auf Desktop, Tablet und Smartphone gleichermaßen und ist für schnelle Ladezeiten optimiert. Für dich bedeutet das: weniger Telefonanrufe, mehr Buchungen und eine professionellere Außenwirkung.
Voraussetzungen — Was brauchst du?
Um ein TischAmigos-Widget auf deiner Website einzubinden, brauchst du genau drei Dinge:
- Einen TischAmigos-Account — kostenlos auf tischamigos.de erstellen.
- Zugang zu deiner Website — du musst HTML-Code einfügen können (bei WordPress, Wix und Squarespace geht das ohne Programmierkenntnisse).
- Fünf Minuten Zeit — mehr braucht es wirklich nicht.
Den Widget-Code generieren
Nachdem du dich bei TischAmigos angemeldet und dein Restaurant eingerichtet hast, gehst du im Admin-Bereich auf den Menüpunkt „Widget einbetten". Dort findest du den fertigen Code-Schnipsel, den du auf deiner Website einfügen musst.
Vorher kannst du das Widget anpassen: Wähle deine Primär- und Sekundärfarbe, damit das Widget zu deinem Website-Design passt. Du kannst auch die Schriftart ändern und den Button-Stil (abgerundet oder eckig) auswählen. Sobald du zufrieden bist, kopierst du den generierten Code-Schnipsel in die Zwischenablage.
Widget in WordPress einbinden
WordPress ist das beliebteste Content-Management-System — über 40 Prozent aller Websites weltweit nutzen es. Die Einbindung des TischAmigos-Widgets in WordPress ist besonders einfach:
Option A: Mit Elementor
Falls du den Elementor Page Builder verwendest, ziehe einfach ein „HTML"-Element an die gewünschte Stelle auf deiner Seite. Füge den kopierten Widget-Code ein und klicke auf „Veröffentlichen". Das Widget erscheint sofort auf deiner Seite.
Option B: Mit dem Gutenberg-Editor
Im Standard-Editor von WordPress (Gutenberg) fügst du einen neuen Block hinzu und wählst „Individuelles HTML" aus. Füge den Widget-Code ein und speichere die Seite. Du kannst das Widget auf jeder Seite und in jedem Beitrag einbetten — zum Beispiel auf der Startseite, der Kontaktseite oder in einem eigenen Menüpunkt „Reservieren".
Option C: Im Theme-Footer
Wenn du das Widget auf allen Seiten deiner Website anzeigen möchtest, füge den Code im WordPress-Customizer unter „Zusätzliches CSS/JS" oder in den Theme-Einstellungen unter „Footer-Skripte" ein. So erscheint ein Reservierungsbutton auf jeder einzelnen Seite.
Widget in Wix einbinden
In Wix öffnest du den Editor deiner Website, klickst auf „Hinzufügen" (das Plus-Symbol), dann auf „Einbetten" und wählst „HTML einbetten". Es erscheint ein Bereich auf deiner Seite, in den du den Widget-Code einfügst. Positioniere das Element an der gewünschten Stelle, passe die Größe an und veröffentliche deine Seite. Fertig — deine Gäste können ab sofort online buchen.
Widget in Squarespace einbinden
In Squarespace bearbeitest du die gewünschte Seite und fügst einen neuen Inhaltsblock vom Typ „Code" hinzu. Wähle als Modus „HTML" und füge den Widget-Code ein. Speichere die Änderungen und überprüfe die Vorschau. Das Widget wird sich automatisch an das Squarespace-Layout anpassen und responsiv auf allen Geräten funktionieren.
Widget auf einer normalen HTML-Website
Falls deine Website eine einfache HTML-Seite ist (ohne CMS), fügst du den Widget-Code direkt in den Quellcode deiner Seite ein. Am besten platzierst du den Code-Schnipsel kurz vor dem schließenden </body>-Tag. Das Widget erstellt automatisch einen Buchungsbutton, den du über CSS an die gewünschte Stelle positionieren kannst.
Ein typisches Beispiel sieht so aus: Du fügst das Script-Tag ein, und der Button „Tisch reservieren" erscheint in der unteren rechten Ecke deiner Website. Gäste klicken darauf, und das Buchungsformular öffnet sich als Overlay.
Häufige Probleme und Lösungen
Das Widget erscheint nicht: Leere den Browser-Cache und den Cache deines Website-Anbieters. Bei WordPress: lösche den Cache über dein Caching-Plugin (z. B. WP Rocket oder W3 Total Cache).
Falsches Design: Die Farben des Widgets kannst du jederzeit in den TischAmigos-Einstellungen unter „Widget einbetten" ändern. Änderungen werden sofort auf deiner Website wirksam — du musst den Code nicht erneut kopieren.
Mobile Darstellung prüfen: Das TischAmigos-Widget ist vollständig responsiv. Teste trotzdem einmal auf deinem Smartphone, ob der Button gut erreichbar ist und das Formular korrekt angezeigt wird.
Fazit
Ein Buchungswidget auf deiner Restaurant-Website einzubinden ist einfacher, als du denkst. Egal ob WordPress, Wix, Squarespace oder HTML — mit TischAmigos brauchst du keine technischen Vorkenntnisse und bist in wenigen Minuten startklar. Deine Gäste werden es dir danken, und du sparst dir unzählige Telefonanrufe. Jetzt kostenlos registrieren und dein Widget in drei Minuten einrichten.
Den größeren Zusammenhang liefert unser Online-Reservierungssystem für Restaurants.