Shortcode & Einbindung

Buchungs-Widget mit einem Shortcode einfügen. Der Builder füllt Square-IDs aus Namen.

Basis-Shortcode

[square_booking]

Der Alias [sqb_booking] bleibt gültig.

Shortcode-Builder

Unter Einstellungen → Square Booking → Booking flow listet der Shortcode builder Services und Mitarbeiter namentlich und setzt die IDs. Theme wählen oder Site default, dann kopieren.

Shortcode-Builder: Service nach Namen wählen, Shortcode kopieren.
Shortcode-Builder: Service nach Namen wählen, Shortcode kopieren.

theme

luxury, card, flat, square-classic. Ohne Attribut gilt das Site-Preset.

[square_booking theme="square-classic"]

service_id

Catalog-Item-ID des Services, nicht die Variations-ID. Bei Vorauswahl entfällt Schritt 1; bei einer Variation öffnet sich der Kalender.

[square_booking service_id="SERVICE_ITEM_ID"]

staff_id

[square_booking staff_id="TEAM_MEMBER_ID"]

Das Widget scrollt beim Laden nicht automatisch. Mehr zu Darstellung.

Anzeigemodi

Standardmäßig steht das Widget in der Seite. mode öffnet es stattdessen per Button in einem Dialog: [square_booking mode="modal" button_label="Jetzt buchen"] für einen zentrierten Dialog, mode="drawer" für ein Seitenpanel oder mode="floating" für einen schwebenden Button. Die Square-Daten werden erst beim Öffnen geladen.

Jeder Button oder Link mit dem Attribut data-square-booking-open öffnet den Dialog, auch Elementor- und Gutenberg-Buttons (als benutzerdefiniertes Attribut). Mit data-service-id, data-staff-id oder data-location-id vorauswählen. button_label="" blendet den Plugin-Button aus.

mode="modal": Das Widget öffnet sich in einem Dialog, hier beim Standort-Schritt.
mode="modal": Das Widget öffnet sich in einem Dialog, hier beim Standort-Schritt.

Unter Booking flow → Display lassen sich außerdem ein schwebender Buchungsbutton auf allen Seiten und ein Schritt zur Wahl des Teammitglieds einschalten. Bei mehreren aktivierten Standorten (siehe Square-Einrichtung) legt location_id="…" den Standort fest und überspringt die Standortwahl.

Booking flow → Display: Schritt Teammitglied, schwebender Button, Modi.
Booking flow → Display: Schritt Teammitglied, schwebender Button, Modi.

Link zu einem Service

Hängen Sie ?sqb_service=…&sqb_staff=…&sqb_location=… an die URL der Buchungsseite, um vorauszuwählen, und sqb_open=1, um den Dialog beim Laden zu öffnen. Unbekannte IDs werden ignoriert.