Aussehen der Buchungsseite anpassen (mit CSS)
Du möchtest, dass deine Buchungsseite genauso aussieht wie deine Marke? In diesem Artikel zeigen wir dir, wie du das Design mit deinen Markenfarben oder per CSS anpassen kannst. Wenn deine meetergo-Buchungsseite perfekt zu deinem Stil passen soll, bist du hier genau richtig.
Du kannst deine Unternehmensfarben (Corporate Identity) ganz einfach in den Einstellungen festlegen. Zusätzlich hast du die Möglichkeit, das Design und die Formatierung der Buchungsseite mithilfe von CSS-Klassen individuell anzupassen.
So änderst du das Aussehen deiner Buchungsseite
Für einfache Anpassungen bieten wir einige Einstellungen, um die Brand-colors anzupassen. Fortgeschrittene Nutzer können die gesamte Buchungsseite mithilfe von CSS individuell gestalten!
- Gehe auf deine Unternehmenseinstellungen
- In der mittleren Spalte unter "Branding" kannst du Design-Änderungen vornehmen
- Lade dein Unternehmenslogo hoch (optional - nur für Visitenkarten/Round-Robin-Terminarten)
- Setze den Haken bei "Markenfarbe auf der Terminseite verwenden". Klicke auf den Kreis neben "Primärfarbe", um im Farbpicker deine Farbe auszuwählen
- Klicke auf "CSS der Terminseite bearbeiten", um CSS einzufügen. Lies diesen Artikel, um mehr darüber zu erfahren, wie das funktioniert.
Custom CSS für Buchungslinks
Hier sind die CSS-Klassen, die du verwenden kannst:
bookingContainer: Dies ist der Hauptcontainer der Buchungsseite, der alle anderen Elemente enthält.bookingTopContainer: Der Container, der den oberen Teil der Buchungsseite umfasst.bookingTopBar: Die obere Leiste, in der z. B. das Logo oder der Seitentitel platziert werden kann.bookingLanguageSwitcher: Schalter, um die Sprache der Buchungsseite zu ändern.bookingCallbackContainer: Der Container für den Rückrufbereich, falls dieser angezeigt wird.bookingTypeSelect: Das Dropdown-Menü oder die Schaltflächen zur Auswahl des Buchungstyps.bookingTypeMeetingButton: Button für die Auswahl eines Meeting-Typs.bookingTypeInstantCallButton: Button für die Auswahl eines Sofortanrufs.bookingTypeRequestCallbackButton: Button für die Auswahl einer Rückrufanfrage.bookingTypeEmailButton: Button für die Auswahl einer E-Mail-Anfrage.bookingInstantVideoContainer: Der Container für den Bereich der Sofortvideoanrufe, falls dieser angezeigt wird.bookingTimeContainer: Der Container für den Zeitbereich der Buchungsseite.bookingTimePicker: Das Zeitwahl-Element, das den Benutzern ermöglicht, einen Termin auszuwählen.bookingTimezoneSelect: Das Dropdown-Menü zur Auswahl der Zeitzone.bookingTimeOption: Eine einzelne Option im Zeitwahl-Element.bookingFormContainer: Der Container für das Buchungsformular.bookingFormTitle: Der Titel oder die Überschrift des Buchungsformulars.bookingFormMeetingInfo: Informationen zum Meeting, die angezeigt werden können.bookingForm: Das eigentliche Buchungsformular, das Felder wie Name, E-Mail, etc. enthält.bookingFormDataPolicyContainer: Der Container für die Datenschutzrichtlinien im Buchungsformular.bookingFormSubmitButton: Button zum Absenden des Buchungsformulars.customPageContent: Inhalt einer Custom-Page-Route eines Routing-Formulars
Zum Beispiel könntest du mit CSS die Hintergrundfarbe ändern, Schriftarten anpassen, Abstände festlegen oder andere CSS-Eigenschaften anpassen, um das gewünschte Erscheinungsbild zu erzielen.
Hier ist ein Beispiel, wie du die Hintergrundfarbe des Hauptcontainers ändern kannst:
.bookingContainer {
background-color: #f2f2f2;
}
Du kannst weitere CSS-Regeln hinzufügen, um die anderen Elemente der Buchungsseite anzupassen, indem du die entsprechenden CSS-Klassen verwendest.
FAQ
Was kann ich mit CSS anpassen?
Fast alles. Du kannst Schriftarten, Farben, Größen, Layouts ändern und sogar Elemente verstecken oder neu anordnen. Wenn es auf der Buchungsseite ist, kann CSS es wahrscheinlich anpassen.
Muss ich programmieren können?
Nur wenn du CSS verwenden möchtest. Für einfaches Branding ist kein Programmieren nötig — wähle einfach deine Markenfarbe und dein Logo aus.
Wirken sich Änderungen auf bestehende Termine aus?
Nein. Die Anpassung deiner Buchungsseite ändert nur das Aussehen der Seite — sie beeinflusst nicht deine Terminarten oder Verfügbarkeit.
Aktualisiert am: 21/08/2025
Danke!