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 Markenfarben 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.
Die vollständige Klassen-Referenz findest du auch direkt im Designer der Buchungsseite. Öffne den CSS-Editor und klappe "CSS Class Reference" auf, um alle Klassen zu durchsuchen. Ein Klick auf eine Klasse kopiert sie in deine Zwischenablage.
Praktische Beispiele
Jedes Element auf der Buchungsseite trägt eine stabile CSS-Klasse. Füge deine Regeln im CSS-Editor hinzu und sie gelten für alle deine Buchungsseiten.
Den Umschalter für das 12/24-Stunden-Format ausblenden:
.booking-time-format-tabs {
display: none;
}
Die Hintergrundfarbe des Hauptcontainers ändern:
#bookingContainer {
background-color: #f2f2f2;
}
Die Zeitslot-Buttons abrunden und den ausgewählten hervorheben:
.booking-time-slot-button {
border-radius: 9999px;
}
.booking-time-slot-button-selected {
font-weight: 700;
}
Falls eine Regel nicht greift, füge !important zum Wert hinzu, zum Beispiel color: white !important;. Damit überschreibst du die Standard-Styles der Seite.
CSS-Klassen-Referenz
Diese Klassen kannst du ansprechen, gruppiert nach Bereich der Buchungsseite.
Layout & Struktur
#bookingContainer.booking-left-panel-wrapper.booking-left-panel.booking-left-panel-inner.booking-right-panel-wrapper.booking-right-panel.booking-right-panel-tabs
Funnel / Routing-Formulare
.booking-funnel.booking-funnel-card.booking-funnel-header.booking-funnel-footer.booking-funnel-steps-wrapper.booking-funnel-steps.booking-funnel-step-dot.booking-funnel-step-dot--active.booking-funnel-steps-count.booking-funnel-back-button.booking-funnel-next-button.booking-funnel-submit-button.booking-funnel-button-loading.booking-funnel-slide.booking-funnel-slide-header.booking-funnel-slide-title.booking-funnel-slide-description.booking-funnel-slide-back.booking-funnel-slide-content.booking-funnel-infobox-wrapper.booking-funnel-infobox.booking-funnel-options.booking-funnel-option.booking-funnel-option-selected.booking-funnel-option-card.booking-funnel-option-row.booking-funnel-option-image.booking-funnel-option-icon.booking-funnel-option-label.booking-funnel-option-content.booking-funnel-option-indicator.booking-funnel-option-text.booking-funnel-checkbox.booking-funnel-radio.booking-funnel-radio-selected.booking-funnel-form-wrapper.booking-funnel-form
Meeting-Informationen
.booking-title.booking-description-content.booking-company-logo-wrapper.booking-host-avatar.booking-host-name.booking-host-info-wrapper.booking-duration-info.booking-location-text.booking-location-info.booking-legal-details
Kalender & Zeitauswahl
.booking-calendar.booking-calendar-month.booking-month-text.booking-calendar-weekday.booking-calendar-date-cell.booking-calendar-disabled-overlay.booking-calendar-disabled-tooltip.booking-calendar-disabled-text.booking-time-format-tabs.booking-time-scroll-inner.booking-time-tab-content.booking-time-slot-button.booking-time-slot-button-selected.booking-day-header.booking-timezone-picker.booking-pagination-buttons
Dauer- & Kanalauswahl
.booking-duration-selection.booking-duration-button.booking-duration-scroll-area.booking-channel-selection.booking-channel-button.booking-channel-scroll-area
Host-Auswahl
.booking-host-item.booking-host-item-text.booking-host-search.booking-fastest-option.booking-fastest-text.booking-specific-host-header
Formularfelder
.booking-form.booking-form-field.booking-form-label.booking-input.booking-input-text.booking-input-email.booking-input-url.booking-input-number.booking-input-error.booking-textarea.booking-textarea-error.booking-phone-input.booking-form-error
Select & Dropdown
.booking-select-trigger.booking-select-content.booking-select-item
Checkboxen
.booking-checkbox.booking-checkbox-label.booking-checkbox-group.booking-checkbox-wrapper.booking-form-field-checkbox
Radio-Buttons
.booking-radio.booking-radio-label.booking-radio-group.booking-radio-wrapper
Buttons
.booking-submit-button.booking-submit-button-loading.booking-confirm-button.booking-confirm-button-loading.booking-continue-button.booking-change-host-button
Bestätigungsseite
.booking-confirmation.booking-confirmation-card.booking-confirmation-content.booking-confirmation-content-inner.booking-confirmation-status.booking-confirmation-header.booking-confirmation-title.booking-confirmation-subtitle.booking-confirmation-details.booking-confirmation-meta.booking-confirmation-what.booking-confirmation-when.booking-confirmation-who.booking-confirmation-where.booking-confirmation-manage.booking-confirmation-add-to-calendar.booking-confirmation-calendar-buttons.booking-confirmation-legal
Stornierungsseite
.cancellation-page-wrapper.cancellation-policy-violation.booking-cancellation-card.booking-cancellation-content.booking-cancellation-form.booking-cancellation-reason-group.booking-cancellation-notice.booking-cancellation-button.booking-cancellation-current-appointment.booking-cancellation-current-appointment-icon.booking-cancellation-current-appointment-date.booking-cancellation-series-info.booking-cancellation-series-list.booking-cancellation-series-list-label.booking-cancellation-series-items.booking-cancellation-series-item.booking-cancellation-series-item-info.booking-cancellation-series-item-icon.booking-cancellation-series-item-date.booking-cancellation-series-item-button.booking-cancellation-series-choice.booking-cancellation-series-choice-label.booking-cancellation-radio-group.booking-cancellation-option-single.booking-cancellation-option-single-label.booking-cancellation-option-single-date.booking-cancellation-option-all.booking-cancellation-option-all-label.booking-cancellation-option-all-info
Umbuchungsseite
#reschedule.reschedule-page-wrapper.reschedule-policy-violation.booking-reschedule-series-panel.booking-reschedule-current-appointment.booking-reschedule-current-appointment-icon.booking-reschedule-current-appointment-label.booking-reschedule-current-appointment-date.booking-reschedule-series-info.booking-reschedule-series-list.booking-reschedule-series-list-label.booking-reschedule-series-items.booking-reschedule-series-item.booking-reschedule-series-item-info.booking-reschedule-series-item-icon.booking-reschedule-series-item-date.booking-reschedule-series-item-button.booking-reschedule-series-overflow
Hinweis bei Richtlinienverstoß
.policy-violation-card.policy-violation-title.policy-violation-description.policy-violation-advice-box.policy-violation-advice-title.policy-violation-advice-text.policy-violation-button
Bundle-Buchungsseite
.bundle-booking-wrapper.bundle-booking-header.bundle-booking-step-header.bundle-card.bundle-category-header.bundle-category-icon.bundle-category-icon-text.bundle-selected-count.bundle-divider.bundle-search-container.bundle-search-input.bundle-clear-search.bundle-meeting-list.bundle-meeting-item.bundle-meeting-item-selected.bundle-meeting-accent.bundle-selection-checkbox.bundle-option-button-selected.bundle-price-badge.bundle-sidebar.bundle-sidebar-header.bundle-sidebar-content.bundle-sidebar-item.bundle-sidebar-divider.bundle-continue-button.bundle-mobile-bar.bundle-footer
Ladezustände
.booking-skeleton-buttons.booking-calendar-loading-date-cell.booking-calendar-loading-weekday
Sonstiges
.booking-divider.booking-spots-left
Legacy-Selektoren
Generische Selektoren wie input[type="text"], input[type="email"], input[type="tel"], label, textarea, select und button funktionieren weiterhin, sind aber weniger präzise. Nutze bevorzugt die booking-*-Klassen von oben, um Elemente gezielt anzusprechen.
Ältere Artikel und Setups verweisen teilweise noch auf Klassennamen wie bookingTimeContainer oder bookingTimePicker. Diese gehören zur früheren Version der Buchungsseite und gelten nicht mehr. Verwende stattdessen die Klassen aus diesem Artikel.
FAQ
Was kann ich mit CSS anpassen?
Fast alles. Du kannst Schriftarten, Farben, Größen und 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.
War dieser Artikel hilfreich?
Lass uns wissen, ob dieser Artikel deine Fragen beantwortet hat.