> ## Documentation Index
> Fetch the complete documentation index at: https://hilfe.123hundeschule.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Webseitenintegration

> Lerne, wie du deine Webseite mit dem Buchungsportal verbindest - von einfachen Verlinkungen bis hin zur Einbettung von Buchungsfunktionen direkt auf deiner Seite.

Die Integration deines Buchungsportals in deine Webseite bietet dir zwei flexible Möglichkeiten: die direkte Verlinkung und die Einbettung via iFrame. Beide Methoden ermöglichen es deinen Kunden, bequem Termine zu buchen - entweder durch Weiterleitung zum Buchungsportal oder direkt auf deiner Webseite.

<Note>
  Die Wahl der Integrationsmethode hängt von deinen spezifischen Anforderungen ab. Eine direkte Verlinkung ist einfacher umzusetzen, während ein iFrame mehr Funktionalität direkt auf deiner Seite bietet.
</Note>

## Direkte Verlinkung

Die Verlinkung ist die einfachste Methode, um deine Webseite mit dem Buchungsportal zu verbinden. Hier ist eine Schritt-für-Schritt-Anleitung:

1. **Beschreibe deine Angebote**: Stelle sicher, dass deine Kurse und Gruppen auf deiner Webseite ausführlich beschrieben sind. Je mehr Informationen du bereitstellst, desto besser können sich Interessierte ein Bild machen.

2. **Füge einen Call-to-Action ein**: Integriere einen auffälligen Button oder Link mit der Bezeichnung "Jetzt Termine buchen".

3. **Wähle die passende Verlinkung**: Du hast zwei Möglichkeiten:
   * Verlinkung zur Detailansicht einer spezifischen Gruppe
   * Verlinkung zur Listenansicht (z.B. alle Junghundekurse)

<Card title="Beispiel für Listenansicht">
  Wenn du verschiedene Junghundegruppen über [Tags](/docs/allgemein/tags) kategorisiert hast, kannst du:

  1. Die Listenansicht mit dem Tag "Junghunde" öffnen
  2. Die URL aus deinem Browser kopieren
  3. Diese URL als Link auf deiner Webseite verwenden
</Card>

## iFrame-Integration

Die iFrame-Integration ermöglicht es dir, Buchungsfunktionen direkt in deine Webseite einzubetten. Deine Kunden können dann Termine buchen, ohne deine Seite zu verlassen.

<Warning>
  Stelle sicher, dass dein Webseiten-System iFrames unterstützt. Bei Unsicherheit kontaktiere deinen Webseiten-Administrator.
</Warning>

### Einrichtung des iFrames

1. Navigiere zu **Einstellungen** > 🌐 **Externe Einbindung**
2. Wähle den gewünschten Ansichtstyp:
   * Gruppen
   * Kurse
   * Kalender
   * Anfragen
3. Konfiguriere die Darstellungsoptionen
4. Kopiere den generierten HTML-Code
5. Füge den Code in deine Webseite ein

<Info>
  Ein iFrame ist ein HTML-Element, das eine andere Webseite in deine Seite einbettet. Es funktioniert wie ein Fenster in einem Fenster und ermöglicht die nahtlose Integration von externen Inhalten.
</Info>

### Höhenanpassung

Du hast zwei Möglichkeiten, die Höhe des iFrames zu steuern:

#### Automatische Höhenanpassung (empfohlen)

Aktiviere die Checkbox `Automatische Höhenanpassung` in den Einstellungen. Der iFrame passt seine Höhe dann dynamisch an den angezeigten Inhalt an — ganz ohne manuelles Eingreifen. So entstehen weder Scrollbalken noch unnötiger Leerraum auf deiner Seite.

**So funktioniert es:**

Der Einbettungscode besteht in diesem Modus aus zwei Teilen:

1. **Der iFrame selbst** — zeigt die Inhalte deines Buchungsportals an.
2. **Ein kurzes Script** — empfängt Größeninformationen vom iFrame und passt dessen Höhe automatisch an.

Im Hintergrund meldet der iFrame-Inhalt seine aktuelle Höhe an deine Webseite. Das passiert automatisch, wenn:

* Die Seite zum ersten Mal geladen wird
* Inhalte sich ändern (z. B. ein Akkordeon wird aufgeklappt oder ein Bild wird nachgeladen)
* Innerhalb des iFrames auf eine andere Seite navigiert wird (z. B. von der Kursliste zur Kursdetailansicht)

<Tip>
  Die `Anfangshöhe`, die du in den Einstellungen festlegst, wird als Startwert verwendet. Sobald der iFrame geladen ist, wird die Höhe automatisch an den tatsächlichen Inhalt angepasst. Wähle die Anfangshöhe so, dass sie ungefähr zu deinem Inhalt passt — das vermeidet ein sichtbares "Springen" beim Laden.
</Tip>

**Was du beachten solltest:**

* **Neuen Code verwenden:** Falls du bereits einen iFrame auf deiner Webseite eingebunden hast, kopiere den neuen Code aus **Einstellungen** > 🌐 **Externe Einbindung** und ersetze den alten Code auf deiner Webseite.
* **Mehrere iFrames auf einer Seite:** Du kannst mehrere iFrames auf derselben Seite einbetten (z. B. Kursliste und Kalender). Jeder iFrame erhält eine eigene ID, sodass die Höhenanpassung für jeden iFrame unabhängig funktioniert.

<Warning>
  Manche Website-Baukästen (z. B. Wix, Jimdo) schränken die Ausführung von Scripts innerhalb von HTML-Blöcken ein. Falls die automatische Höhenanpassung bei dir nicht funktioniert, prüfe, ob dein Baukasten das Einfügen von `<script>`-Tags erlaubt. Im Zweifel funktioniert der iFrame trotzdem — nur mit fester Höhe.
</Warning>

#### Feste Höhe

Wenn du die automatische Höhenanpassung nicht benötigst, deaktiviere die Checkbox `Automatische Höhenanpassung`. Der iFrame wird dann mit der von dir eingestellten `Höhe` angezeigt — ohne Script, ohne dynamische Anpassung. Das kann sinnvoll sein, wenn:

* Dein Website-Baukasten keine `<script>`-Tags erlaubt
* Du eine bewusst einheitliche Darstellungsgröße auf deiner Seite haben möchtest
* Du den Einbettungscode möglichst einfach halten willst

<Note>
  Bestehende Einbettungen ohne das neue Script funktionieren weiterhin mit fester Höhe. Du musst den Code nur ersetzen, wenn du die automatische Höhenanpassung nutzen möchtest.
</Note>

## Kalender-Integration

Der Kalender kann besonders nützlich sein, um deinen Kunden einen Überblick über verfügbare Termine zu geben. Die Integration erfolgt über einen speziellen iFrame-Code.

### Grundlegende Integration

```html theme={null}
https://tenant.123hundeschule.test/kalender?embed=1
```

### Anpassungsmöglichkeiten

Du kannst die Darstellung des Kalenders durch verschiedene Parameter anpassen:

<Card title="Verfügbare Ansichten">
  * `dayGridWeek`: Wochenansicht
  * `timeGridDay`: Tagesansicht mit Stundenaufteilung
  * `listWeek`: Listenansicht
  * `dayGridMonth`: Monatsansicht
</Card>

### Responsive Anpassung

Du kannst unterschiedliche Ansichten für Desktop und mobile Geräte definieren:

```html theme={null}
https://tenant.123hundeschule.test/kalender?embed=1&initialView=dayGridWeek&initialViewMobile=listWeek
```

<Tip>
  Die Kombination von `initialView` und `initialViewMobile` ermöglicht dir eine optimale Darstellung auf allen Geräten. Wähle für mobile Geräte am besten die Listenansicht, da diese am benutzerfreundlichsten ist.
</Tip>

<Check>
  Empfohlene Kombinationen:

  * Desktop: Wochenansicht, Mobil: Listenansicht
  * Desktop: Monatsansicht, Mobil: Tagesansicht
</Check>

## Custom Domain

Möchtest du dein Buchungsportal unter einer eigenen Domain wie `buchen.musterfirma.de` anbieten? Dieses Feature ist exklusiv im größten Abo der 123Hundeschule verfügbar. Bitte kontaktiere den Support, um die Einrichtung zu starten.

<Note>
  Die Nutzung einer eigenen Domain ist nur im größten Abo der 123Hundeschule möglich. Wende dich an den Support, um die Funktion freizuschalten.
</Note>

Damit deine Kund:innen z. B. `buchen.musterfirma.de` aufrufen können und dabei automatisch auf deine Buchungsseite `musterfirma.123hundeschule.de` weitergeleitet werden, musst du einen sogenannten CNAME-Eintrag in den DNS-Einstellungen deiner Domain setzen.

### Voraussetzungen

* Du hast Zugang zur DNS-Verwaltung deiner Domain `musterfirma.de` (z. B. bei deinem Domain-Anbieter wie IONOS, Strato, All-Inkl, Cloudflare, etc.)

### Schritt-für-Schritt-Anleitung

1. Melde dich bei deinem Domain-Anbieter an (z. B. IONOS, Strato, All-Inkl, etc.)
2. Gehe in den Bereich "DNS-Verwaltung" oder "DNS-Einstellungen"
3. Füge einen neuen DNS-Eintrag hinzu mit folgenden Werten:
   * **Typ:** CNAME
   * **Name / Host / Subdomain:** `buchen`
   * **Ziel / Wert / zeigt auf:** `musterfirma.123hundeschule.de.`
     *(Achte auf den Punkt am Ende – bei manchen Anbietern erforderlich)*
   * **TTL (falls gefragt):** Standardwert (z. B. 60 Sekunden) beibehalten
4. Speichere die Einstellungen

<Info>
  Die Änderung wird in der Regel innerhalb weniger Minuten bis zu mehreren Stunden aktiv. Sobald die Weiterleitung funktioniert, erscheint beim Aufruf von `buchen.musterfirma.de` deine gewohnte Buchungsseite.
</Info>

## Verwandte Themen

<CardGroup cols={2}>
  <Card title="Formulare" icon="clipboard-list" href="/allgemein/formulare">
    Formulare für Anfragen und Feedback erstellen
  </Card>

  <Card title="Anfragen" icon="mailbox" href="/allgemein/anfragen">
    Eingehende Kundenanfragen verwalten und bearbeiten
  </Card>

  <Card title="Datenschutz" icon="shield-halved" href="/integrationen/datenschutz">
    Datenschutzeinstellungen für die Webseite konfigurieren
  </Card>
</CardGroup>