Zurück zum Blog
Blog
Buchungsseite auf der Vereinswebsite einbetten: Schritt für Schritt
Dispoly Team
Beende das Buchungschaos, noch heute.
30 Tage kostenlos testen. Keine Kreditkarte erforderlich.
Auf der Vereinsseite gibt es eine Unterseite „Vereinsheim mieten“. Ganz unten steht ein Link: „Zur Buchung“. Wer draufklickt, landet auf einer fremden Adresse, und ein Teil der Leute klickt gar nicht erst.
Die Buchungsseite lässt sich stattdessen direkt in eure Website einsetzen, sodass der Belegungsplan mitten auf eurer Unterseite steht, mit eurem Menü darüber und eurem Impressum darunter.
So sieht es auf vielen Vereinsseiten aus. Der Text erklärt das Vereinsheim, die Buchung selbst findet woanders statt, meistens am Telefon.
Was der Besucher davon merkt
Eingebettet sieht die Buchungsseite etwas anders aus als beim direkten Aufruf. Die Kopfzeile mit Logo und Hell-Dunkel-Schalter fällt weg, denn euer eigener Seitenkopf steht ja schon darüber. Übrig bleibt der Inhalt: die Ressourcen mit Status, der Kalender, das Formular und eine einzeilige Fußzeile mit Impressum und Datenschutz.
Der ganze Buchungsvorgang bleibt innerhalb eures Rahmens. Wer auf „Jetzt buchen“ tippt, wählt Tag und Uhrzeit, trägt Namen und E-Mail ein und schickt ab, ohne dass sich die Adresse im Browser ändert. Für den Besucher ist das ein Teil eurer Seite.
Schritt 1: Den Code holen
- In Dispoly auf Buchungsseiten gehen.
- Bei der gewünschten Seite auf das Symbol Einbetten klicken, das mit den spitzen Klammern.
- Es öffnet sich „Auf deiner Website einbetten“ mit dem fertigen Code.
- Auf Kopieren klicken.
Der Code besteht aus zwei Teilen. Der erste ist ein iframe, also der Rahmen, in dem eure Buchungsseite läuft. Der zweite ist ein kurzer script-Block, der die Höhe des Rahmens an den Inhalt anpasst.
Falls ihr mehrere Buchungsseiten habt, etwa eine für Räume und eine für Geräte, holt euch den Code jeweils einzeln. Mehrere Rahmen auf derselben Unterseite sind kein Problem, das Skript kümmert sich um jeden einzeln.
Schritt 2: Den Code einsetzen
Das Vorgehen unterscheidet sich je nach System, das Prinzip ist immer dasselbe: Ihr braucht ein Element, das rohes HTML erlaubt.
WordPress. Seite bearbeiten, im Block-Editor auf das Plus klicken und den Block Individuelles HTML einfügen. Code hineinkopieren und die Seite aktualisieren. Beim klassischen Editor wechselt ihr stattdessen auf den Reiter Text und fügt ihn dort ein, nicht im visuellen Modus.
Bei Seiten, die bei wordpress.com gehostet sind, entfernen die kleineren Tarife iframe und script aus eigenem HTML. Dort bleibt nur der Link. Eine selbst gehostete WordPress-Installation hat diese Einschränkung nicht.
Jimdo. Im Bearbeitungsmodus an der gewünschten Stelle ein neues Element hinzufügen und Widget / HTML wählen. Code einfügen, speichern.
Wix. Links auf Elemente hinzufügen, dann Einbetten und HTML einbetten. Im erscheinenden Kasten Code auswählen und einfügen. Wix legt den Rahmen als eigenes Element mit fester Größe an, deshalb zieht ihr ihn dort einmal auf die gewünschte Höhe.
Typo3, Joomla, Contao und andere. Sucht das Element für freien HTML-Inhalt, oft „HTML“, „Quelltext“ oder „Rohtext“ genannt, und fügt den Code dort ein.
Danach die Seite ansehen, einmal am Rechner und einmal am Handy. Der Rahmen sollte den Belegungsplan zeigen und ungefähr so hoch sein wie dessen Inhalt.
Warum das Skript dabei ist
Ein iframe weiß von sich aus nicht, wie hoch sein Inhalt ist. Ohne Hilfe bekommt ihr entweder einen zu kurzen Rahmen mit eigener Scrollleiste darin oder einen zu hohen mit viel Leerraum darunter.
Deshalb der kleine Skriptblock: Die Buchungsseite meldet dem Rahmen bei jeder Größenänderung ihre tatsächliche Höhe, und das Skript stellt den Rahmen darauf ein. Öffnet jemand das Buchungsformular, wächst der Rahmen mit, klappt etwas zu, schrumpft er wieder. Das Skript nimmt diese Meldungen nur von der Dispoly-Adresse an, andere Seiten können eurem Rahmen nichts unterschieben.
Am Handy zahlt sich das aus, weil eine zweite Scrollleiste mitten auf der Seite dort besonders stört. Der Rahmen nimmt die volle Breite des Inhaltsbereichs und wächst mit dem Formular.
Wenn euer System keine Skripte erlaubt, lasst den script-Block weg und behaltet nur den iframe. Dann müsst ihr die Höhe selbst festlegen, über das height-Attribut im Code. Der Dialog gibt 700 Pixel vor. Setzt den Wert großzügiger, etwa auf 1000 oder 1200, sonst bekommt der Rahmen beim Buchen eine eigene Scrollleiste. Einen Hinweis darauf zeigt auch der Einbetten-Dialog.
Kein zweiter Cookie-Banner
Die eingebettete Buchungsseite zeigt keinen eigenen Einwilligungsdialog. In diesem Modus lädt sie keine Analysewerkzeuge und zeichnet keine Sitzungen auf, verarbeitet wird nur, was für die Buchung nötig ist. Eure Besucher bekommen also nicht mitten auf eurer Seite ein zweites Banner vorgesetzt. Was an Daten anfällt, steht in DSGVO bei Buchungsdaten.
Die Buchungsseite bleibt daneben unter ihrer eigenen Adresse erreichbar. Ihr könnt sie weiterhin im Gruppenchat, im Mitgliederrundschreiben oder als QR-Code an der Tür teilen. Beides zeigt denselben Belegungsplan.
Wenn es nicht funktioniert
Der Rahmen bleibt leer oder weiß. Meistens blockiert etwas auf eurer eigenen Seite den Rahmen, typischerweise ein Datenschutz-Plugin, das fremde Inhalte pauschal sperrt, bis jemand zustimmt. Schaut in den Einstellungen der Erweiterung nach einer Freigabeliste und tragt dort dispoly.net ein.
Der Code erscheint als Text auf der Seite. Dann steckt er im visuellen Editor statt im HTML-Element. In WordPress ist das der Unterschied zwischen dem Absatz-Block und dem Block „Individuelles HTML“.
Der Rahmen ist zu kurz und hat eine eigene Scrollleiste. Der Skriptblock fehlt oder wurde vom System entfernt. Setzt entweder das Skript wieder ein oder erhöht das height-Attribut.
Auf dem Handy passt es nicht. Prüft, ob euer Design den Inhaltsbereich schmaler macht, als er sein müsste. Der Rahmen ist auf width:100% gestellt und nimmt die Breite, die ihr ihm gebt.
Zwei Klicks und ein HTML-Element
Mehr braucht es nicht. Danach beantwortet eure eigene Website die Frage, die sonst per Telefon gestellt wird, und niemand muss dafür eure Seite verlassen.
Wie das für Vereine insgesamt aussieht, steht auf der Lösungsseite für Vereine, für Verwaltungen auf der Seite für Kommunen. Ihr könnt Dispoly 30 Tage kostenlos testen, ohne Vertrag und ohne Zahlungsdaten.