Alle Kollektionen
Anwendungsfälle
Aussehen der Buchungsseite anpassen (mit CSS)
Aussehen der Buchungsseite anpassen (mit CSS)

So änderst du das Design deiner Buchungsseite und passt es den individuellen Bedürfnissen deiner CI an.

Richard Gödel avatar
Verfasst von Richard Gödel
Vor über einer Woche aktualisiert

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!

  1. Gehe auf deine Unternehmenseinstellungen.

  2. In der mittleren Spalte unter "Branding" kannst du Design-Änderungen vornehmen.

  3. Lade dein Unternehmenslogo hoch (optional - nur für Visitenkarten/Round-Robin-Terminarten)

  4. Setze den Haken bei "Markenfarben verwenden". Klicke auf den Kreis neben "Primärfarbe", um im Farbpicker deine Farbe auszuwählen.

  5. 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.

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.

Hat dies Ihre Frage beantwortet?