> ## 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.

# REQUEST! in die Website einbetten

> Anleitung zum Einbetten des REQUEST! Widgets auf deiner Website, inklusive URL-Parameter, Data-Attribute und mehrfacher Einbindung.

Diese Anleitung beschreibt, wie du REQUEST! (das Online-Anfrageformular) auf deiner Website einbettest und Formulardaten per URL-Parameter oder Data-Attribute vorausfüllst.

## Voraussetzungen

* [Modul REQUEST!](/de/mandants/modules/request) ist aktiviert
* Das REQUEST!-Widget ist eingerichtet und gespeichert (siehe [REQUEST! einrichten](/de/mandants/widgets/setup-request))
* Der Einbettungscode ist im Widget unter **Einbettungscode** pro Sprache verfügbar

## Schritte

1. Öffne das REQUEST! Widget im Mandant-Dashboard unter **Widgets**.
2. Scrolle zum Abschnitt **Einbettungscode**.
3. Kopiere den Widgetcode für die gewünschte Sprache.
4. Füge den kopierten Code in den HTML-Quellcode deiner Website ein.

## URL-Parameter

Du kannst Formularfelder über die Query-Parameter `mandant_ids`, `occupancies`, `period` und `form_fields` vorauswählen.

### mandant\_ids

Ein Array von Zahlen mit den vorauszuwählenden Mandanten. Nur relevant, wenn einem Widget mehrere Mandanten zugewiesen sind. Einige Elemente aus `occupancies` können nur vorausgewählt werden, wenn genau ein Mandant vorausgewählt ist. Ohne diesen Parameter werden standardmäßig alle Mandanten vorausgewählt.

### occupancies

Ein Array von Elementen, über das Wohneinheiten und Belegung vorausgewählt werden. Jedes zusätzliche Element entspricht einer weiteren Wohneinheit.

* `adults`: Anzahl Erwachsene als Ganzzahl
* `children`: Array mit dem Alter der Kinder als Ganzzahlen
* `room_type_code`: Zimmercode der gewünschten Zimmerkategorie
* `is_travelling_with_pets`: `true` = mit Haustieren, `false` = ohne Haustiere
* `meal_plan_id`: ID der Verpflegungsart (`0` = Nur Übernachtung, `1` = Übernachtung mit Frühstück, `2` = Halbpension, `3` = Vollpension, `4` = All-Inclusive)

### 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`)

### form\_fields

Ein Objekt mit Key-Value-Paaren zum Vorausfüllen von Zusatzfeldern. Der Key muss der Data-ID des Formularfeldes in Snake-Case entsprechen (z. B. FirstName wird zu `first_name`).

### Beispiel-URLs

Vollständige URL mit mehreren Parametern:

```
/?mandant_ids=[100,600]&occupancies=[{"adults":4,"room_type_code":"DZ","meal_plan_id":0},{"adults":2,"children":[5,0,3]}]&period={"arrival":"2025-03-01","departure":"2025-03-05"}&form_fields={"city":"Bruneck","first_name":"Maxime"}
```

Anfrage mehrerer Wohneinheiten gleichzeitig:

```
/?occupancies=[{"adults":2,"children":[5,2]},{"adults":3}]
```

Für Verlinkungen müssen Anführungszeichen innerhalb eines href-Attributs URL-codiert werden:

```html theme={null}
<a
  class="button secondary"
  title="Anfragen"
  href="/anfragen/?occupancies=[{%22room_type_code%22:%22DZ%22}]"
  >Anfragen</a
>
```

## Data-Attribute

Alle Parameter, die per URL-Query-String übergeben werden können, lassen sich auch als Data-Attribut setzen. Die übergebenen Daten müssen stets gültiges JSON enthalten (mit doppelten Anführungszeichen).

```html theme={null}
<anexis-cloud-request
  data-mandant_ids="[123]"
  data-period='{"arrival":"2025-07-07","departure":"2025-07-10"}'
  [...]
></anexis-cloud-request>
```

Sollen keine Mandanten vorausgewählt sein:

```html theme={null}
<anexis-cloud-request
  data-mandant_ids="[]"
  data-period='{"arrival":"2025-07-07","departure":"2025-07-10"}'
  [...]
></anexis-cloud-request>
```

## Mehrfaches Einbinden des Widgets

Wenn du REQUEST! mehrmals auf einer Webseite einbindest, vergib für jedes Widget im Snippetcode eine unterschiedliche ID.

```html theme={null}
<anexis-cloud-request
  id="widget-1"
  data-mandant_ids="[123]"
  data-period='{"arrival":"2025-07-07","departure":"2025-07-10"}'
  [...]
></anexis-cloud-request>

<anexis-cloud-request
  id="widget-2"
  data-mandant_ids="[123]"
  data-period='{"arrival":"2025-07-07","departure":"2025-07-10"}'
  [...]
></anexis-cloud-request>
```

## Verwandte Artikel

* [REQUEST! einrichten](/de/mandants/widgets/setup-request) -- Ersteinrichtung des Widgets
* [REQUEST! Widget Seitenreferenz](/de/mandants/widgets/request) -- alle Einstellungen und Felder im Detail