# Einführung: Technisches Dokument

### Einführung

Diese Dokumentation richtet sich an Entwickler und Webmaster, die das Buchungsmodul Yoplanning.pro in ihre Website integrieren möchten. Ziel ist es, die Benutzerfreundlichkeit durch eine barrierefreie und responsive Buchungsoberfläche zu verbessern und gleichzeitig die Modulanpassung zu ermöglichen.

### Funktionsprinzip

Das Buchungsmodul von Yoplanning.pro lässt sich nahtlos in Ihre Website integrieren und bietet ein nahtloses Benutzererlebnis ohne Weiterleitungen. Das Modul wird als Popup-Fenster angezeigt, das über eine Schaltfläche oder einen Link aktiviert wird und es Benutzern ermöglicht, Buchungen direkt auf Ihrer Website vorzunehmen.

#### Vorteile

* **Optimale Anzeige**: Passt sich allen Bildschirmtypen an, einschließlich Mobilgeräten.
* **Einfache Integration**: Kann mit einem einfachen JavaScript-Code zu Ihrer Site hinzugefügt werden.
* **Personalisierung**: Generierung spezifischer Links für verschiedene Aktionen oder Kategorien.

#### Einbindung per Iframe

Obwohl möglich, wird die Einbettung über Iframe aufgrund von Einschränkungen der mobilen Kompatibilität nicht empfohlen. Bei Bedarf kann das Modul in einem neuen Tab geöffnet werden, um die Vollbildanzeige zu ermöglichen.

#### Integration per Iframe: Scrollverhalten

Im Iframe-Modus nimmt das Reservierungsmodul standardmäßig die gesamte mögliche Höhe ein und das Scrollen erfolgt auf Ihrer Site, siehe Screenshot unten:

<figure><img src="/files/JuhN7G0gIlALbgOxohNf" alt="" width="563"><figcaption><p>Comportement par défaut</p></figcaption></figure>

Dieses Verhalten lässt sich durch Hinzufügen des Parameters „bescroll=inside“ in der Integrations-URL des Buchungsmoduls ändern. Das Modul nimmt dann die Bildschirmhöhe ein und der Bildlauf erfolgt im Modul und nicht auf Ihrer Website (siehe Screenshot unten):

<figure><img src="/files/pEuMQCYuW3fwSx4e9ieb" alt="" width="563"><figcaption><p>Avec le paramètre "bescroll=inside"</p></figcaption></figure>

### Integrationscode

Um das Modul einzubetten, fügen Sie den folgenden JavaScript-Code in den „

“ Ihrer Site ein. Dadurch ist das Modul auf allen Seiten zugänglich, ohne dass mehrere Einfügungen erforderlich sind.

```html
<script type="text/javascript" src="https://booking.yoplanning.pro/integration/script.js" async></script>
```

### Generierung von Buchungsmodul-Links

Über das Yoplanning-Backoffice können spezifische Links zum Buchungsmodul generiert werden:

1. Gehen Sie zu **Einstellungen > Buchungsmodul > Integrationsmenü**.
2. Verwenden Sie den URL-Modus, um eine URL zu erstellen, die Ihren Anforderungen entspricht.

#### Beispiele für generierte Links

* **Allgemeiner Link**: `https://booking.yoplanning.pro/<ID_UNIQUE>/`
* **Spezifische Kategorie**: `https://booking.yoplanning.pro/<UNIQUE_ID>/?tag=<CATEGORY_ID>`
* **Produktblatt**: `https://booking.yoplanning.pro/<ID_UNIQUE>/product/<ID_PRODUIT>`
* **Direkter Zugriff auf den Warenkorb**: `https://booking.yoplanning.pro/<ID_UNIQUE>/cart/`
* **Direktshop**: `https://booking.yoplanning.pro/<ID_UNIQUE>/shop/`

#### Integrationsoptionen

Yoplanning bietet verschiedene Integrationsmodi:

* **Button**: Für den direkten Zugriff über einen anklickbaren Button.
* **Floating Icon**: Ein Symbol, auf das auf der Seite jederzeit zugegriffen werden kann.
* **Hyperlink**: Zum Einbetten in Text oder Bilder.
* **Iframe**: Wird als letztes Mittel verwendet, wenn JavaScript eingeschränkt ist.
* **Einfache URL**: Zur direkten Einbindung als Link.

### Mehrsprachiges Management

Das Modul erkennt automatisch die Browsersprache des Benutzers mithilfe des externen Dienstes <https://gtranslate.io/detect-browser-language> und bietet so eine lokalisierte und intuitive Benutzererfahrung. *(In den meisten Fällen empfohlene Methode.)*

#### Standardmäßig erzwungene Sprache.

Wenn Sie eine mehrsprachige Website haben oder Probleme mit der Spracherkennung haben oder das Modul zur Anzeige in einer bestimmten Sprache zwingen möchten, können Sie ein spezielles Buchungsmodul erstellen, indem Sie die Sprache in seiner Konfiguration erzwingen.

### Abschluss

Die Integration des Buchungsmoduls Yoplanning.pro verbessert das Buchungserlebnis auf Ihrer Website deutlich dank optimierter Benutzeroberfläche, erweiterten Anpassungsmöglichkeiten und mehrsprachiger Unterstützung. Befolgen Sie die Anweisungen für eine erfolgreiche Integration und bieten Sie Ihren Nutzern ein nahtloses Buchungserlebnis.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.yoplanning.support/de/yoplanning-academy/yoplanning-parametrage/module-de-reservation/integration-du-module-de-reservation/doc-technique-agence-web/introduction-doc-technique.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.