> ## Documentation Index > Fetch the complete documentation index at: https://docs.cloud.anex.is/llms.txt > Use this file to discover all available pages before exploring further. # BOOKED! in die Website einbetten > Wie du das BOOKED! Widget mittels Einbettungscode auf deiner Website einbindest und Formulardaten per URL-Parameter oder Data-Attribute vorausfüllst. Dieser Artikel beschreibt, wie du BOOKED! (die Online-Buchungsstrecke) auf deiner Website einbettest und wie du Formulardaten über URL-Parameter oder Data-Attribute vorausfüllen kannst. ## Voraussetzungen * [Modul BOOKED!](/de/mandants/modules/booked) ist aktiviert * Das BOOKED!-Widget muss bereits eingerichtet und erstmalig gespeichert sein (siehe [BOOKED! einrichten](./setup-booked)) * Der Einbettungscode wird erst nach dem erstmaligen Speichern angezeigt. ## Widget einbetten 1. Öffne das BOOKED! Widget in der Widget-Übersicht. 2. Scrolle zum Abschnitt **Einbettungscode**. 3. Wähle die gewünschte Sprache aus. Pro Sprache wird automatisch ein separater Widgetcode generiert. 4. Kopiere den angezeigten Code und füge ihn an der gewünschten Stelle im HTML deiner Website ein. ## Formulardaten per URL-Parameter übergeben Du kannst die Buchungsstrecke über URL-Parameter mit Vorbelegungen aufrufen. Folgende Parameter stehen zur Verfügung: ### mandant\_id Gibt die ID des vorauszuwählenden Mandanten an. Nur relevant, wenn dem Widget mehrere Mandanten zugewiesen sind. Für eine Buchung kann immer nur ein einziger Mandant ausgewählt sein. Ohne diesen Parameter muss der Gast den Betrieb selbst auswählen. ### occupancies Ein Array von Elementen, über welches die Belegung vorausgewählt wird. Jedes zusätzliche Element im Array spiegelt eine weitere Belegung wider. * `adults`: Anzahl von Erwachsenen als Ganzzahl * `children`: Ein Array mit den Altersangaben der Kinder als Ganzzahlen * `is_travelling_with_pets`: Boolean, ob mit Haustieren gereist wird (`true` = mit Haustieren, `false` = ohne Haustiere) ### period Ein Objekt mit dem Reisezeitraum. * `arrival`: Ankunftsdatum im ISO 8601 Format (z. B. `2025-12-30`) * `departure`: Abreisedatum im ISO 8601 Format (z. B. `2025-12-30`) ### room\_type\_codes Ein Array von Strings mit den Codes der Zimmerkategorien, die in der Buchungsstrecke auswählbar sein sollen. Bei mehreren Mandanten greift dieser Parameter nur zusammen mit `mandant_id`. ### room\_type\_ids Ein Array von Ganzzahlen mit den IDs der Zimmerkategorien, die in der Buchungsstrecke auswählbar sein sollen. Bei mehreren Mandanten greift dieser Parameter nur zusammen mit `mandant_id`. ### rate\_plan\_codes Ein Array von Strings mit den Preislistencodes, die in der Buchungsstrecke auswählbar sein sollen. Bei mehreren Mandanten greift dieser Parameter nur zusammen mit `mandant_id`. ### mode Bestimmt den Modus der Buchungsstrecke: * `book`: Voreinstellung. Der Gast kann buchen. Falls im Widget Anfragen erlaubt sind, ist auch Anfragen möglich. * `request`: Das Widget steht nur im Anfragemodus zur Verfügung. Die Verfügbarkeitsanzeige bleibt bestehen. ### should\_skip\_to\_room\_type\_selection Ein Boolean. Bei `true` springt die Buchungsstrecke direkt zur Auswahl der Zimmerkategorie. In diesem Fall müssen auch `occupancies`, `period` und -- bei mehreren Mandanten -- `mandant_id` angegeben werden. Bei `false` beginnt die Buchungsstrecke beim ersten Schritt. ### form\_fields Hiermit füllst du beliebige Zusatzfelder im Buchungsformular vor. Übergib ein Objekt mit Key-Value-Paaren, wobei der Key der Data-ID des Formularfeldes in Snake-Case entspricht (z. B. `FirstName` wird zu `first_name`). ### Beispiel-URLs Vollständige URL mit allen Parametern: ``` /?mandant_id=600&occupancies=[{"adults":4},{"adults":2,"children":[5,0,3]}]&period={"arrival":"2025-03-01","departure":"2025-03-05"}&room_type_codes=["DZ","SUI"]&rate_plan_codes=["OS","BB","HB"]&mode="book"&should_skip_to_room_type_selection=false&form_fields={"city":"Bruneck","first_name":"Maxime"} ``` Anfrage mehrerer Wohneinheiten gleichzeitig: ``` /?occupancies=[{"adults":2,"children":[5,2]},{"adults":3}] ``` ## Formulardaten per Data-Attribute übergeben Alle URL-Parameter können auch als Data-Attribute direkt am HTML-Element übergeben werden. Die übergebenen Daten müssen gültiges JSON enthalten (mit doppelten Anführungszeichen). ```html theme={null} ``` ## Verwandte Artikel * [BOOKED! einrichten](./setup-booked) -- Voraussetzungen und Einrichtungsschritte * [BOOKED! Widget Seitenreferenz](./booked) -- alle Felder und Einstellungen im Detail * [Bestätigung Reservierung (CONNECT! E-Mail-Inhalte)](/de/mandants/components/connect/e-mail-content/booked/reservation-confirmation) -- E-Mail-Vorlage für Buchungsbestätigungen