Shortcodes & Widgets

Wie Sie JetBookIn auf Ihre Website bringen: jeder Shortcode und jedes Elementor-Widget mit allen Optionen, auf welche Seite was gehört, wie Sie Ihre Markenfarben übernehmen, wie mehrsprachige Websites funktionieren und – für Entwickler – REST-API, Hooks und WP-CLI-Befehle.

Die Seiten, die Sie brauchen

Eine typische JetBookIn-Website hat diese Seiten. Jeder Block lässt sich mit einem Shortcode (jedes Theme, jeder Editor) oder mit dem passenden Elementor-Widget einfügen.

Für eine kleine Villa mit drei Wohnungen kann das ganz einfach sein: die Startseite mit dem Such-Hero und dem Zimmer-Raster, eine Seite pro Wohnung (automatisch erstellt) und die Bestätigungsseite. Ein Hotel mit 20 Zimmern ergänzt meist eine Seite Buchen mit den Ergebnissen, zu der die Suche auf jeder Seite führt.

Buchungsbestätigungs- und Checkout-Seite

Zwei Einstellungen unter JetBookIn → Einstellungen → Allgemein legen fest, wohin Gäste geleitet werden:

Die Bestätigungsseite zeigt je nachdem, wie sie geöffnet wird: den Checkout für einen in einer Buchungsbox gewählten Aufenthalt, die Buchung des Gastes (über einen Link mit Buchungsnummer und Schlüssel) oder das Formular Ihre Buchung finden. Mehr als eine solche Seite pro Sprache brauchen Sie nie. Was Gäste dort tun können, steht unter Die Buchungsseite des Gastes.

Die ID einer Seite finden Sie, indem Sie sie unter Seiten öffnen; die Zahl nach post= in der Adressleiste ist die ID.

Themes können die Seite rund um die Buchung mit zwei Body-Klassen anpassen: jbi-is-checkout, solange der Gast noch bucht, und jbi-is-booking, sobald es eine Buchung anzuzeigen gibt – zum Beispiel, um während des Checkouts eine Überschrift „Vielen Dank“ auszublenden.

Buchungs-Shortcodes

Diese Blöcke sind interaktiv: Sie laden Verfügbarkeit und Preise live und brauchen JavaScript (Besucher ohne JavaScript sehen Bitte aktivieren Sie JavaScript, um online zu buchen.). Bei yes/no-Attributen gilt alles außer no als ja.

[jetbookin_search] – Suchformular

Daten und Gäste, dann eine Suchschaltfläche. Ohne Ergebnisseite öffnen sich die Ergebnisse unter dem Formular.

[jetbookin_search results_url="/book/" button="Check availability"]

[jetbookin_results] – Suchergebnisse und Checkout

Listet die für die gewählten Daten freien Zimmerkategorien mit ihren Tarifen auf, lässt den Gast ein oder mehrere Zimmer wählen und führt den Checkout durch. Ist nichts frei, schlägt er andere Daten vor.

[jetbookin_booking] – Buchungsbox für ein Zimmer

Kalender, Gäste, Tarife und Preis für eine Zimmerkategorie. Reservieren führt mit dem ausgefüllten Aufenthalt zur Checkout-Seite weiter.

[jetbookin_booking room="42" months="2"]

[jetbookin_calendar] – Verfügbarkeitskalender

[jetbookin_confirmation] – Buchungsbestätigung / Buchung verwalten

Keine Attribute. [jetbookin_manage] macht genau dasselbe. Setzen Sie ihn nur auf eine Seite (pro Sprache) und legen Sie diese Seite als ID der Buchungsbestätigungsseite fest.

[jetbookin_search_hero] – Hero über die volle Breite mit Suche

[jetbookin_search_hero image="https://example.com/wp-content/uploads/pool.jpg" heading="Three stone houses above Elounda" subheading="Book direct for the best price" results_url="/book/"]

Shortcodes für Zimmer und Unterkunft

Diese werden auf dem Server erzeugt (gut für Geschwindigkeit und Suchmaschinen). Wo ein Attribut eine Zimmerkategorie erwartet, wird ohne Angabe die Zimmerkategorie verwendet, deren Seite gerade angezeigt wird; Attribute für die Unterkunft greifen auf die aktuelle Unterkunft, die Unterkunft des aktuellen Zimmers oder Ihre erste Unterkunft zurück.

Hat ein Block nichts anzuzeigen (keine Fotos, keine Ausstattung …), sehen Gäste nichts; angemeldete Mitarbeiter und der Elementor-Editor sehen einen Hinweis, was auszufüllen ist.

[jetbookin_rooms] – Zimmer als Raster oder Karussell

[jetbookin_rooms layout="carousel" columns="3" orderby="price" amenities="0"]

[jetbookin_room_gallery]

[jetbookin_room_amenities]

[jetbookin_room_specs]

[jetbookin_room_price]

Der niedrigste Nachtpreis aus Ihren Preisen, z. B. ab €95 / Nacht.

[jetbookin_room_policies]

[jetbookin_property_info]

Shortcodes für Bewertungen Pro

Beide brauchen das Modul Gästebewertungen; ist es aus, zeigen sie nichts an.

[jetbookin_reviews] – veröffentlichte Bewertungen

Die Durchschnittsnote mit ihrer Bezeichnung (z. B. Ausgezeichnet), Bewertungskarten mit Ihren Antworten, eine Schaltfläche Weitere Bewertungen anzeigen und schema.org-Bewertungsdaten für Suchmaschinen.

[jetbookin_reviews limit="3" bars="yes" empty="Be the first to review your stay."]

[jetbookin_review] – Bewertungsformular

Keine Attribute. Nur nötig, wenn Gäste auf einer eigenen Seite bewerten sollen: Setzen Sie den Shortcode dort ein und tragen Sie die ID der Seite unter Buchungen → Bewertungen als ID der Bewertungsseite ein. Andernfalls bewerten Gäste auf der Buchungsbestätigungsseite. Das Formular öffnet sich über den signierten Link in der Bewertungs-E-Mail.

Seiten für Housekeeping und Eigentümer Pro

• [jetbookin_housekeeping] (Modul Housekeeping): die tägliche Reinigungsliste auf dem Handy, für angemeldete Benutzer mit der Rolle Housekeeping-Mitarbeiter und Buchungsmanager. Andere werden zur Anmeldung aufgefordert oder erfahren, dass sie keinen Zugriff haben. Housekeeping-Mitarbeiter werden nach der Anmeldung auf diese Seite geleitet.
• [jetbookin_owner] (Modul Eigentümer & Abrechnungen): die monatlichen Abrechnungen und der Belegungskalender eines Eigentümers, für angemeldete Benutzer mit der Rolle Eigentümer der Unterkunft, die mit einer Unterkunft verknüpft sind. Eigentümer werden nach der Anmeldung hierher geleitet statt in wp-admin.

Keine der beiden hat Attribute. Beide Seiten werden automatisch vom Seiten-Cache ausgenommen. Legen Sie jede als normale, veröffentlichte WordPress-Seite an.

Zimmerseiten ohne Page Builder

Jede Zimmerkategorie hat eine eigene Seite auf Ihrer Website. Ist sie nicht mit Elementor gebaut, macht JetBookIn selbst eine vollständige Zimmerseite daraus: die Fotogalerie (ab fünf Fotos ein Mosaik), Gäste / Betten / Größe, der „Ab“-Preis, Ihre Beschreibung, Ausstattung, Richtlinien und die Buchungsbox – auf breiten Bildschirmen neben den Details, auf Handys darunter.

Enthält der Inhalt des Zimmers bereits einen Shortcode [jetbookin_room_…], wird nur die Buchungsbox am Ende angefügt; enthält er [jetbookin_booking], wird nichts hinzugefügt. Mit Elementor gestalten Sie im Theme Builder eine Einzelvorlage für Zimmerkategorien und verwenden die Zimmer-Widgets mit — Aktuelle Zimmerkategorie —.

Elementor-Widgets

Suchen Sie im Elementor-Editor nach JetBookIn oder öffnen Sie im Widget-Panel die Kategorie JetBookIn. Jedes Widget erzeugt genau denselben Block wie sein Shortcode.

Inhaltseinstellungen

Spalten sind responsiv: standardmäßig 3 auf dem Desktop, 2 auf dem Tablet und 1 auf dem Handy, und Sie können jedes Gerät einzeln einstellen.

Stileinstellungen

Jedes JetBookIn-Widget hat im Tab Stil einen Abschnitt Farben & Form:

• Primärfarbe (Buttons, Auswahl), Button-Text, Hintergrund, Text, Rahmen – Farben;
• Eckenradius – 0 bis 24 px;
• Typografie – Schriftart, Größe, Stärke usw. für das ganze Widget.

Einige Widgets haben mehr:

• Zimmer-Raster / Karussell: Karte (Hintergrund, Schatten, Innenabstand), Zimmertitel und Preis (Typografie und Farbe).
• Zimmerausstattung: Symbole (Farbe, Größe).
• Zimmerpreis ab: Preis (Typografie und Farbe).
• Such-Hero: Überschrift und Unterüberschrift (Typografie und Farbe).
• Bewertungen: Titel der Bewertung und Text der Bewertung (Typografie und Farbe).

Tipp: Stellen Sie bei den Buchungs-Widgets einer Seite dieselbe Primärfarbe ein. Die Schaltfläche Buchung abschließen, die bei unbezahlten Buchungen erscheint, übernimmt Farben, Ecken und Schrift vom Buchungs-Widget der Seite.

Farben und Gestaltung

Alle JetBookIn-Blöcke beziehen ihre Farben und Formen aus CSS-Variablen, die auf dem Wrapper .jbi-widget gesetzt sind. Die Stileinstellungen von Elementor setzen genau diese Variablen. Ohne Elementor setzen Sie sie unter Design → Customizer → Zusätzliches CSS oder im Stylesheet Ihres Themes.

Die Variablen sind direkt auf .jbi-widget definiert; setzen Sie sie also mit einem mindestens ebenso starken Selektor, zum Beispiel:

/* Meerblaue Schaltflächen, eckige Ecken, überall */
body .jbi-widget {
	--jbi-primary: #0e5e6f;
	--jbi-on-primary: #ffffff;
	--jbi-radius: 4px;
}

/* Eine dunkle Buchungsbox nur in einem Abschnitt */
.booking-dark .jbi-widget {
	--jbi-surface: #1f1d1a;
	--jbi-surface-2: #2a2723;
	--jbi-text: #f4f1ea;
	--jbi-muted: #b9b4aa;
	--jbi-border: #3a3631;
}

Die Variablen nur auf body oder :root zu setzen, hat keine Wirkung, weil .jbi-widget eigene Standardwerte setzt.

Mehrsprachige Websites (Polylang, WPML)

JetBookIn funktioniert mit Polylang und WPML. Übersetzungen einer Zimmerkategorie oder Unterkunft sind dasselbe Zimmer: Sie teilen Verfügbarkeit, Preise, Buchungen, Galerie und Hauptbild. Gäste sehen alles in der Sprache der Seite, auf der sie buchen, und erhalten ihre E-Mails und ihre Buchungsseite in dieser Sprache.

Was zu übersetzen ist

• Zimmerkategorien und Unterkünfte: Übersetzen Sie sie mit Ihrem Mehrsprachigkeits-Plugin (Titel, Beschreibung, Auszug). In der Übersetzung einer Unterkunft schreiben Sie auch deren Check-in-Anleitung in dieser Sprache.
• Die Buchungsbestätigungsseite und, falls Sie eine verwenden, die Seite Buchen / Checkout: Legen Sie von jeder eine Übersetzung mit demselben Shortcode oder Widget an. In die Einstellungen kommt nur die ID des Originals; JetBookIn leitet Gäste zur Übersetzung in ihrer Sprache.
• AGB- und Datenschutzseiten sowie die Bewertungsseite: Übersetzen Sie sie auf die gleiche Weise. Der Checkout öffnet die Version in der Sprache des Gastes.
• Seiten mit Suche, Zimmern und Bewertungen: Übersetzen Sie sie als normale Seiten; Shortcodes und Widgets bleiben gleich.

Hat eine Seite keine Übersetzung, wird das Original verwendet.

Namen, die Sie im Dashboard eingeben

Namen von Tarifen, Extras (Name und Beschreibung), Aktionen, eigene Gebühren und die Bankverbindung für Überweisungen werden als Strings registriert: in Polylang unter Sprachen → Übersetzungen (Gruppe JetBookIn), in WPML unter String-Übersetzung (Domain JetBookIn). Tarife, Extras und Aktionen haben im Dashboard außerdem direkt unter ihrem Namen die Felder In anderen Sprachen; beide Stellen bleiben synchron. Eine leere Übersetzung zeigt das Original.

E-Mails

E-Mail-Texte werden pro Sprache unter Einstellungen → E-Mails bearbeitet, nicht mit dem Mehrsprachigkeits-Plugin. Siehe E-Mails → Ein Text pro Sprache.

Entwickler: REST-API

Alles, was das Dashboard tut, läuft über die REST-API im Namespace jetbookin/v1, z. B. https://example.com/wp-json/jetbookin/v1/availability/search. Endpunkte für Mitarbeiter brauchen einen angemeldeten Benutzer mit der Berechtigung manage_jetbookin (Administratoren und die Rolle Buchungsmanager) – ein Cookie mit REST-Nonce oder ein Anwendungspasswort für Apps und andere Server. Die stärker genutzten öffentlichen Endpunkte (Checkout, Preisabfragen, Gastaktionen, Bewertungen) sind pro Client in der Anfragerate begrenzt.

Die wichtigsten öffentlichen Endpunkte

Zu den Endpunkten für Mitarbeiter gehören /bookings (Liste, Anlegen, PUT /bookings/{id}, Stornieren, Zahlungen, Zahlungsanforderungen, Nachrichten), /calendar, /quote, /settings, /emails, /reviews und /ical/connections. Zahlungsanbieter rufen ihre eigenen Webhook-Routen im selben Namespace auf.

Entwickler: Hooks

Alle JetBookIn-Hooks beginnen mit jbi/. Verwenden Sie sie in einem kleinen Plugin oder in der functions.php Ihres Child-Themes.

Actions

Filter

// Zwei unbezahlte Buchungen pro E-Mail-Adresse erlauben.
add_filter( 'jbi/max_open_holds', fn() => 2 );

// Jede bestätigte Buchung an ein anderes System senden.
add_action( 'jbi/booking_confirmed', function ( array $booking ) {
	wp_remote_post( 'https://example.com/hook', [ 'body' => [ 'ref' => $booking['ref'] ] ] );
} );

// Zimmer sind für Suchmaschinen Hotelzimmer.
add_filter( 'jbi/structured_data_room_type', fn() => 'HotelRoom' );

Die fest vorgegebenen Warn-E-Mails lassen sich überschreiben, indem Sie admin-conflict.php, admin-sync-failing.php oder admin-late-payment.php nach yourtheme/jetbookin/emails/ kopieren.

Entwickler: WP-CLI

Auf Live-Websites empfiehlt sich ein echter Server-Cron statt des von Besuchern ausgelösten WordPress-Crons, zum Beispiel alle 5 Minuten:

*/5 * * * * cd /path/to/wordpress && wp jetbookin run-jobs --quiet

Zu den Hintergrundaufgaben siehe Erweiterte Einstellungen.

Häufige Fragen

Die Buchungsbox zeigt nichts an.

Außerhalb der eigenen Seite einer Zimmerkategorie braucht sie room="ID" (in Elementor: die Zimmerkategorie wählen). Prüfen Sie außerdem, ob die Zimmerkategorie veröffentlicht ist und Preise hat.

Die Suche schickt Gäste auf die falsche Seite.

Setzen Sie bei der Suche results_url (oder im Widget Ergebnisseite) auf die Seite mit [jetbookin_results]. Ohne diese Angabe öffnen sich die Ergebnisse unter dem Formular.

Meine Farben ändern sich nicht.

Setzen Sie die Variablen auf .jbi-widget (zum Beispiel body .jbi-widget { … }), nicht nur auf body oder :root. Leeren Sie danach den Cache eines CSS- oder Optimierungs-Plugins.

Kann ich die Shortcodes in Gutenberg, Divi oder Bricks verwenden?

Ja. Fügen Sie einen Shortcode-Block (oder das Shortcode-Element Ihres Builders) ein und fügen Sie den Shortcode dort ein.

Brauche ich eine eigene Checkout-Seite?

Nein. Ist ID der Checkout-Seite leer, führt die Buchungsbox zur Buchungsbestätigungsseite weiter. Eine eigene Seite Buchen mit den Ergebnissen ist nützlich, wenn Sie zusätzlich eine Suchseite möchten.

Ich habe die Seite Buchungsbestätigung versehentlich gelöscht.

Legen Sie eine Seite mit [jetbookin_confirmation] an, veröffentlichen Sie sie und tragen Sie ihre ID unter Einstellungen → Allgemein als ID der Buchungsbestätigungsseite ein. Links in bereits verschickten E-Mails zeigen noch auf die alte Adresse; schicken Sie betroffenen Gästen ihren Buchungslink bei Bedarf erneut.