> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/buchungen-und-aufgaben/buchungskalender/buchungskalender-auf-einer-externen-website-einbetten.md).

# Buchungskalender auf einer externen Website einbetten

## Worum es geht

Mit einer Einbettung erscheint dein Buchungskalender direkt auf einer externen Website, zum Beispiel auf einer Kontakt-, Angebots- oder Terminseite. Besucher:innen bleiben auf dieser Seite, wählen einen freien Zeitpunkt aus und schließen die Buchung dort ab.

Die Einbettung ist sinnvoll, wenn der Termin ein fester Teil einer bestehenden Website sein soll. Sie ersetzt nicht die Kalendereinstellungen: Verfügbarkeiten, Dauer, Fragen im Buchungsformular und Bestätigungen kommen weiterhin aus dem ausgewählten Buchungskalender.

## Erst entscheiden: Link oder Einbettung?

| Ziel                                                                          | Passende Lösung                                                                                       |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| Du möchtest einen Termin per Nachricht, E-Mail oder Schaltfläche weitergeben. | Verwende einen Buchungslink.                                                                          |
| Der Kalender soll sichtbar in einer externen Website stehen.                  | Verwende den **Einbettungscode**.                                                                     |
| Du baust die Seite direkt in ONE LOOP.                                        | Verwende im Seiteneditor das Kalender-Element. Dort wählst du den Kalender aus, ohne Code einzufügen. |

> **Wichtig:** Ein Buchungslink ist nicht dasselbe wie ein Einbettungscode. Kopiere für eine externe Website ausschließlich den Code aus dem Register **Einbettungscode**.

## Voraussetzungen

Bevor du den Code einfügst, sollten diese Punkte erfüllt sein:

* Der richtige Buchungskalender ist vollständig eingerichtet und über seinen Buchungslink testbar.
* Du darfst die externe Website bearbeiten oder arbeitest mit der Person zusammen, die das darf.
* Der Website-Editor bietet ein Element wie **HTML**, **benutzerdefinierter Code**, **Code einbetten** oder **Embed**.
* Du weißt, auf welcher Seite und an welcher Stelle der Kalender erscheinen soll.
* Der Kalender ist für echte Buchungen bereit; insbesondere Verfügbarkeiten, Zeitzone, Formular und Bestätigung sind geprüft.

Wenn du keinen passenden Code-Bereich im Website-Editor findest, füge den Kalender nicht in ein normales Textfeld ein. Bitte stattdessen die zuständige Person für die Website um einen Einbettungsbereich.

## Einbettungscode im Buchungskalender öffnen

Die Quellenansicht zeigt den gesamten Weg bis zum Kopieren. Gehe so vor:

1. Öffne **Kalender**.
2. Wechsle zu **Kalendereinstellungen**.
3. Suche in der Liste den Kalender, der auf der Website erscheinen soll.
4. Öffne in seiner Zeile das **Drei-Punkte-Menü**.
5. Wähle **Teilen**.
6. Im geöffneten Fenster siehst du mehrere Register. Wähle **Einbettungscode**.
7. Klicke auf **Kopieren**.

Im Fenster können daneben auch Optionen für Links sichtbar sein. Für die Einbettung brauchst du nur das Register **Einbettungscode**.

## Was der kopierte Code enthält

Der Code wird automatisch für genau diesen Buchungskalender erzeugt. In der Quellenansicht besteht er aus einem eingebetteten Kalenderbereich und einem ergänzenden Skript. Beide Teile gehören zusammen.

Deshalb gilt:

* Kopiere den Code immer über die Schaltfläche **Kopieren**.
* Füge ihn vollständig und unverändert ein.
* Lösche keine Zeilen und ergänze keine Zeichen.
* Kopiere nicht nur die Adresse aus einem Link-Feld; das reicht für eine Einbettung nicht aus.
* Erstelle den Code erneut, falls du nicht mehr sicher bist, ob du ihn vollständig übernommen hast.

Du musst den Code nicht verstehen oder selbst schreiben. Seine Aufgabe ist nur, den ausgewählten Kalender an der gewünschten Stelle der externen Website zu laden.

## Code auf der externen Website einfügen

Die Bezeichnungen unterscheiden sich je nach Website-System. Der Ablauf bleibt gleich:

1. Öffne den Editor der externen Website.
2. Öffne die Seite, auf der Termine buchbar sein sollen.
3. Füge an der gewünschten Stelle ein **HTML-**, **Code-** oder **Einbettungs-Element** ein.
4. Öffne die Einstellungen dieses Elements.
5. Füge den zuvor kopierten Einbettungscode in das dafür vorgesehene Feld ein.
6. Speichere die Änderung.
7. Veröffentliche die Website, falls dein Website-System zwischen Speichern und Veröffentlichen unterscheidet.

> **Tipp zur Platzierung:** Setze oberhalb des Kalenders eine klare Überschrift, etwa „Termin auswählen“. Lass unter dem Kalender genügend Platz. Auf schmalen Bildschirmen sollte der Terminbereich nicht zwischen langen Textblöcken oder mehreren Schaltflächen verschwinden.

## Vor der Veröffentlichung prüfen

Die Vorschau des Website-Editors ist nur ein erster Eindruck. Prüfe den Kalender immer auf der veröffentlichten Seite.

1. Öffne die Seitenadresse in einem privaten Browserfenster.
2. Kontrolliere, ob der Kalender vollständig lädt und nicht abgeschnitten ist.
3. Wähle ein Datum und eine freie Uhrzeit.
4. Fülle die sichtbaren Buchungsfelder mit Testdaten aus.
5. Schließe eine Testbuchung ab.
6. Prüfe im Kalender, ob der Termin im richtigen Kalender und zur erwarteten Uhrzeit gespeichert wurde.
7. Prüfe die Bestätigungsseite oder -nachricht, falls diese für den Kalender eingerichtet ist.
8. Entferne den Testtermin wieder, wenn er nicht bestehen bleiben soll.

## Was die Einbettung übernimmt — und was nicht

| Bestandteil                                            | Kommt aus dem Buchungskalender? | Was du auf der Website prüfst                                      |
| ------------------------------------------------------ | ------------------------------- | ------------------------------------------------------------------ |
| Freie Termine                                          | Ja                              | Ob die erwarteten Zeiten sichtbar sind.                            |
| Dauer und Buchungsregeln                               | Ja                              | Ob die angebotenen Zeitfenster plausibel sind.                     |
| Zeitzonen-Verhalten                                    | Ja                              | Ob Uhrzeiten für deine Zielgruppe verständlich dargestellt werden. |
| Buchungsformular                                       | Ja                              | Ob die richtigen Fragen und Pflichtfelder erscheinen.              |
| Bestätigung und Erinnerungen                           | Ja                              | Ob Testbuchung und Kommunikation zum richtigen Termin passen.      |
| Überschrift, Text und Platzierung rund um den Kalender | Nein                            | Diese Inhalte gestaltest du im Editor der externen Website.        |

## Häufige Probleme lösen

### Der Kalender bleibt leer oder lädt gar nicht

Prüfe zuerst den Buchungslink des gleichen Kalenders direkt. Lädt der Link ebenfalls nicht, liegt die Ursache beim Kalender oder seinen Einstellungen, nicht bei der Einbettung.

Lädt der Link, kontrolliere anschließend:

1. Wurde der vollständige Code in ein echtes HTML- oder Einbettungs-Element eingefügt?
2. Hat der Website-Editor eigenen Code möglicherweise blockiert?
3. Wurde die externe Seite nach dem Speichern auch veröffentlicht?
4. Tritt das Problem auch in einem privaten Browserfenster auf?

### Der Kalender ist im Editor sichtbar, aber nicht auf der veröffentlichten Seite

Manche Website-Editoren zeigen eingebetteten Code in der Bearbeitungsansicht anders als auf der veröffentlichten Seite. Öffne deshalb immer die echte Seitenadresse in einem privaten Fenster. Prüfe auch, ob du die richtige Version der Seite veröffentlicht hast.

### Der Kalender ist abgeschnitten oder zu schmal

Prüfe die Darstellung auf einem Computer und einem Smartphone. Liegt der Kalender in einer schmalen Spalte, einem mehrspaltigen Abschnitt oder in einem Element mit fester Höhe, wähle einen breiteren Bereich. Änderungen am Seitenlayout machst du in der externen Website, nicht im Einbettungscode.

### Die falschen Zeiten oder Felder erscheinen

Die Einbettung zeigt die Einstellungen des ausgewählten Buchungskalenders. Prüfe deshalb Kalendername, Verfügbarkeiten, Buchungsregeln, Zeitzone und Formular direkt im Kalender. Erstelle danach bei Bedarf den Einbettungscode neu und teste die veröffentlichte Seite erneut.

### Neben dem Kalender erscheint unerwarteter Text

Der Einbettungscode fügt normalerweise nur den Kalender ein. Suche im Website-Editor in den umliegenden Abschnitten, Vorlagenblöcken oder ausgeblendeten Elementen nach dem auffälligen Text. Veröffentliche anschließend erneut und prüfe die echte Seitenadresse.

## Praxisbeispiel: Termin auf einer Kontaktseite anbieten

Eine Praxis möchte Erstgespräche direkt auf ihrer Kontaktseite anbieten.

1. Das Team richtet einen eigenen Buchungskalender für Erstgespräche ein und prüft ihn über den Buchungslink.
2. Im Bereich **Kalendereinstellungen** öffnet es beim richtigen Kalender das Drei-Punkte-Menü, wählt **Teilen** und kopiert den **Einbettungscode**.
3. Im Website-Editor fügt das Team unter der Überschrift „Erstgespräch vereinbaren“ ein HTML-Element ein und setzt den Code dort ein.
4. Nach der Veröffentlichung öffnet eine Person die Kontaktseite im privaten Browserfenster und bucht einen Testtermin.
5. Das Team kontrolliert Termin, Uhrzeit, Formularangaben und Bestätigung.
6. Erst wenn alles stimmt, wird die Einbettung für Besucher:innen als regulärer Terminweg genutzt.

So bleibt die Website der vertraute Einstiegspunkt, während der Buchungskalender die eigentliche Terminlogik zuverlässig übernimmt.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/buchungen-und-aufgaben/buchungskalender/buchungskalender-auf-einer-externen-website-einbetten.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.