> 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/kalender-einrichten-und-verwalten/buchungswidget-gestalten-und-prufen.md).

# Buchungswidget gestalten und prüfen

> **Kurz erklärt:** Das Buchungswidget ist die Seite, auf der Interessierte ein Datum, eine Uhrzeit und gegebenenfalls eine zuständige Person auswählen. Mit den Einstellungen bestimmst du, welche Informationen sichtbar sind und wie der Ablauf aussieht.

## Was du anpassen kannst

Du gestaltest den Buchungsablauf pro Kalender. Die Einstellungen betreffen unter anderem Farben, die Beschriftung der letzten Schaltfläche und die Informationen in der linken Inhaltsfläche. So kannst du den Ablauf einfacher und passender zu deinem Auftritt machen, ohne die eigentliche Terminlogik zu verändern.

Die beschriebenen Einstellungen stehen nur im aktuellen Buchungswidget zur Verfügung. Fehlt in deinem Kalender der Bereich **Widget-Darstellung**, ist diese Gestaltung für diesen Kalender nicht verfügbar.

## Öffne die Widget-Einstellungen

1. Öffne **Kalender**.
2. Wechsle zu **Kalender-Einstellungen**.
3. Suche den gewünschten Kalender und klicke auf **Bearbeiten**.
4. Öffne **Erweiterte Einstellungen** und suche **Widget-Darstellung**. Je nach Oberfläche kann derselbe Bereich **Anpassungen** heißen.
5. Nimm die Änderungen vor und öffne danach jedes Mal erneut die **Widget-Vorschau**.

Die Vorschau wird nicht automatisch nach jeder Änderung aktualisiert. Klicke deshalb nach einer Anpassung erneut auf **Widget-Vorschau**.

## Einstellungen verständlich erklärt

| Einstellung                   | Was sich ändert                                                                                                    | Worauf du achten solltest                                                                                    |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| Hauptfarbe                    | Färbt Schaltflächen, Datums- und Uhrzeitauswahl sowie Auswahlaktionen wie die Personenauswahl.                     | Wähle eine Farbe mit gutem Kontrast zur Schrift und zum Hintergrund.                                         |
| Hintergrundfarbe              | Gilt für die Datums- und Uhrzeitauswahl sowie für den Formularbereich.                                             | Bei einem eigenen Formular können dessen einzelne Felder eigene Farben haben. Prüfe beide Bereiche zusammen. |
| Text der Buchungsschaltfläche | Beschriftet die Schaltfläche auf dem letzten Buchungsschritt.                                                      | Formuliere klar, was nach dem Klick passiert, zum Beispiel „Termin bestätigen“.                              |
| Kalenderdetails ausblenden    | Blendet Name, Beschreibung sowie Dauer, Datum, Uhrzeit, Wiederholung und Zeitzone in der linken Inhaltsfläche aus. | Blende nur Informationen aus, die für eine sichere Buchung nicht benötigt werden.                            |
| Logo entfernen                | Entfernt das Logo aus den Termindetails.                                                                           | Erst zusammen mit ausgeblendeten Details verschwindet die linke Fläche vollständig.                          |
| Person auswählen erlauben     | Zeigt oder verbirgt die Auswahl einer zuständigen Person.                                                          | Nur ausblenden, wenn die Person nicht selbst gewählt werden soll.                                            |
| Auf Standard zurücksetzen     | Stellt die ursprüngliche blau-weiße Darstellung wieder her.                                                        | Nutze dies, wenn mehrere Änderungen unübersichtlich geworden sind.                                           |

## Die linke Inhaltsfläche gezielt reduzieren

In der Vorschau siehst du links üblicherweise den Kalendernamen, eine Beschreibung, eine mögliche Personenauswahl und Angaben wie Dauer, gewähltes Datum und Zeitzone. Rechts werden Datum und verfügbare Zeiten gewählt; die Weiter-Schaltfläche befindet sich am unteren Rand des Ablaufs.

Soll die gesamte linke Fläche verschwinden, sind alle folgenden Schritte erforderlich:

1. Deaktiviere **Kalendername**.
2. Deaktiviere **Kalenderbeschreibung**.
3. Deaktiviere **Kalenderdetails**.
4. Entferne ein vorhandenes Logo aus den Termindetails.
5. Deaktiviere in den Anpassungen die Option zur Personenauswahl.

Fehlt nur einer dieser Punkte, bleibt ein Teil der linken Fläche sichtbar.

## Besonderheiten bei Formularen und individuellen Gestaltungen

Verwendest du ein eigenes Formular, übernimmt der Formularbereich die Hintergrundfarbe des Widgets. Die Darstellung der einzelnen Formularfelder kommt jedoch aus den Einstellungen des Formulars. Teste daher, ob Beschriftungen, Eingabefelder und Schaltflächen gut lesbar bleiben.

Individuelle technische Stile, die bereits für den Buchungslink hinterlegt wurden, können die hier gewählten Einstellungen übersteuern. Wenn eine Änderung in der Vorschau nicht sichtbar wird, prüfe zuerst, ob eine solche individuelle Gestaltung aktiv ist.

Bei Buchungsabläufen mit einer Leistungsauswahl kann eine Zurück-Schaltfläche erscheinen. Außerdem wird der Kopfbereich automatisch ausgeblendet, wenn weder ein Name noch ein Logo eingerichtet ist. Die Zeitzone wird in der Zeitauswahl deutlich angezeigt. Prüfe diese Punkte besonders sorgfältig, wenn Personen aus mehreren Zeitzonen buchen.

## Sicher testen

1. Öffne die **Widget-Vorschau** nach jeder Änderung neu.
2. Prüfe die Ansicht auf Desktop und Smartphone.
3. Wähle ein Datum und eine Uhrzeit aus.
4. Kontrolliere, ob die Zeitzone verständlich sichtbar ist.
5. Teste den Text der letzten Schaltfläche und schließe eine Testbuchung ab.
6. Wiederhole den Test in einem privaten Browserfenster, damit du den Ablauf wie eine neue Person siehst.

## Typische Probleme

**Die Änderung erscheint nicht in der Vorschau.**\
Öffne die Vorschau erneut. Prüfe danach, ob eine individuelle technische Gestaltung die Widget-Einstellungen übersteuert.

**Die linke Fläche ist noch sichtbar.**\
Kontrolliere Name, Beschreibung, Details, Logo und Personenauswahl. Alle fünf Punkte müssen passend eingestellt sein.

**Der Hintergrund wirkt im Formular anders als in der Zeitauswahl.**\
Die Formularfelder können eigene Einstellungen haben. Passe die Formular-Darstellung zusätzlich an und teste den Kontrast.

## Praxisbeispiel

Ein Dienstleistungsbetrieb möchte den Buchungsablauf auf das Nötigste reduzieren. Er nutzt eine gut lesbare Hauptfarbe für die auswählbaren Zeiten, lässt Dauer und Zeitzone sichtbar und benennt die letzte Schaltfläche „Termin bestätigen“. Die Auswahl der zuständigen Person bleibt aktiv, damit Interessierte gezielt buchen können. Nach jeder Änderung prüft das Team den Ablauf auf einem Smartphone bis zum letzten Schritt.


---

# 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/kalender-einrichten-und-verwalten/buchungswidget-gestalten-und-prufen.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.