Aussehen der Buchungsseite anpassen (mit CSS)
In meetergo kannst du das Aussehen der Buchungsseite individuell anpassen, um sie perfekt auf deine Bedürfnisse abzustimmen.
Du kannst deine Unternehmensfarben (Corporate Identity) in den Einstellungen anpassen. Zusätzlich hast du die Möglichkeit, mit CSS-Klassen das Design und die Formatierung der Buchungsseite zu ändern.
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 "Markenfarben verwenden". Klicke auf den Kreis neben "Primärfarbe", um im Farbpicker deine Farbe auszuwählen.
- Klicke auf "CSS der Buchungsseite" bearbeiten, um CSS einzufügen. Lese 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.
Aktualisiert am: 04/06/2024
Danke!