Zum Hauptinhalt springen

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.

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

​
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)

Beispiel für Listenansicht

Wenn du verschiedene Junghundegruppen über 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

​
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.
Stelle sicher, dass dein Webseiten-System iFrames unterstützt. Bei Unsicherheit kontaktiere deinen Webseiten-Administrator.

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

​
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)
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.
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.
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.

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

​
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

https://tenant.123hundeschule.test/kalender?embed=1

​
Anpassungsmöglichkeiten

Du kannst die Darstellung des Kalenders durch verschiedene Parameter anpassen:

Verfügbare Ansichten

  • dayGridWeek: Wochenansicht
  • timeGridDay: Tagesansicht mit Stundenaufteilung
  • listWeek: Listenansicht
  • dayGridMonth: Monatsansicht

​
Responsive Anpassung

Du kannst unterschiedliche Ansichten für Desktop und mobile Geräte definieren: 
https://tenant.123hundeschule.test/kalender?embed=1&initialView=dayGridWeek&initialViewMobile=listWeek
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.
Empfohlene Kombinationen:
  • Desktop: Wochenansicht, Mobil: Listenansicht
  • Desktop: Monatsansicht, Mobil: Tagesansicht

​
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.
Die Nutzung einer eigenen Domain ist nur im größten Abo der 123Hundeschule möglich. Wende dich an den Support, um die Funktion freizuschalten.
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
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.

​
Verwandte Themen

Formulare

Formulare für Anfragen und Feedback erstellen

Anfragen

Eingehende Kundenanfragen verwalten und bearbeiten

Datenschutz

Datenschutzeinstellungen für die Webseite konfigurieren