Aussehen von Online-Terminbuchungskalender in online Terminsoftware ändern

Das Aussehen von Deinem Online-Terminbuchungskalender und der gesamten Benutzeroberfläche (UI) kann separat konfiguriert werden. Damit kannst Du das Erscheinungsbild in der Terminsoftware anpassen, sodass der Online-Terminbuchungskalender besser zu Deinen Anforderungen passt. In der online Terminsoftware von SuperSaaS kannst Du die Farbpalette Deines Online-Terminbuchungskalenders ändern, indem Du ein anderes Farbschema auswählst, oder Du kannst für jedes der verschiedenen Kalenderelemente eine eigene Farbe auswählen. Auch auf der Ebene des SuperSaaS-Kontos kannst Du etwas Ähnliches bei der Wahl der Farben für die Benutzeroberfläche tun. Die entsprechenden Anleitungen dazu findest Du hier:

• Passe die Farben des Online-Terminbuchungskalenders an
• Ändere die Farben der Eingabefelder im Online-Terminbuchungskalender
• Passe den Ressourcen-Indikator an (Nur Ressourcenplan)
• Passe den Indikator der Dienstleistung an (Nur Serviceplan)
• Passe den Indikator der Zeitfenster an (Nur Kapazitätsplan)
• Zeige die Zugehörigkeit von Buchungen
• Lege die Farbe von leeren Zeiteinheiten fest

• Ändere die Basis Schriftgröße
• Wechsle die Farben für Dashboard, Texte und Steuerungselemente
• Logo ändern
• Setze Dein Favicon ein
• Benutze Deine eigene Corporate Identity

Wie sich das Aussehen von Deinem Online-Terminbuchungssystem ändert, kannst Du am besten mit einem Test-Benutzer mit einer anderen E-Mail-Adresse in einem anderen Browser (oder privaten Fenster) testen. Sieh Dir dabei auch das Aussehen der mobile Version von Deinem Online-Terminbuchungssystem auf einem Smartphone und Tablet-PC an.

Aussehen des Kalenders individuell anpassen

Unter Konfigurieren > Layout > Farben des Layouts klickst Du und kannst so das visuelle Erscheinungsbild Deines Kalenders bearbeiten. Die verfügbaren Möglichkeiten variieren abhängig vom Typen des Online-Terminbuchungskalenders – Kapazitätsplan Kalender, Ressourcenplan Kalender oder Serviceplan Kalender.

Kalender Farben

Du kannst die Farben ändern, indem Du eine der sieben Farbthemen wählen, die auf Sicht- und Lesbarkeit optimiert sind. Oder Du kannst die Farbe von einem oder mehreren Kalenderelementen per Hand ändern und anpassen. Wenn Du die quadratischen Farbfelder rechts neben der Elementbeschreibung (z.B. Rahmen primär) unter Konfigurieren > Layout anklickst, dann poppt ein Farbwahlfeld auf. Dort kannst Du durch Schieben des runden Suchers mit der Maus oder durch die Eingabe der Hexadezimalzahl (HEX-Zahl) der RGB-Farbe nach # eine bestimmte Farbe für dieses Layout Element auswählen. Jede Änderung wird sofort in der Miniaturdarstellung des Kalenders rechts sichtbar. Die Änderungen der Farben werden jedoch erst auf den jeweiligen Kalender übertragen, wenn diese Einstellungen auch tatsächlich durch das Klicken auf ‚Änderungen speichern‘ gesichert werden.

Farben für die Eingabe von einem Termin im online Buchungskalender ändern

Die Farbe für die Eingabe von einem Termin im online Buchungskalender kann individuell angepasst werden. Diese können unabhängig vom Farbthema des Kalenders eingestellt werden. Das kann beispielsweise die Reservierung in einem Ressourcenplan oder Serviceplan sein oder das Terminangebot in einem Kapazitätsplan.

Du kannst die Farben für Termine ändern unter der Überschrift „Farben von Reservierungen“ in der Ansicht, wo Du die „Farben des Layout bearbeiten“ kannst. Dabei stehen Dir mehrere Farben zur Auswahl. Oder Du kannst ganz rechts in dieser Reihe eine individuelle Farbe in dem 🌈 Farbwähler auswählen. Wenn ein Kalender auf verschiedene Ressourcen oder Serviceangebote – also andere Kalender – zurückgreift, kann jede einzelne Ressource oder auch jeder Service eine eigene Farbe erhalten.

Von der Farbe der Eingabe im Terminbuchungskalender abgesehen, kannst Du zusätzlich auch ein besonderes Muster darüberlegen, um zu zeigen, welche Zeitfenster oder Einheiten Deines Angebots bereits bis zur maximalen Anzahl belegt, voll bzw. ausgebucht sind.

Kennzeichne Ressourcen (nur Ressourcenplan)

In einem Online-Terminbuchungskalender hast Du mehrere Möglichkeiten die Ressourcen zu kennzeichnen. Mit einem dieser sogenannten Ressourcen-Selektoren kannst Du den Online-Terminbuchungskalender filtern und nur Reservierungen für diese bestimmte Ressource anzeigen lassen. Genauso kann der gewählte Farbton als Identifikator der jeweiligen Ressource dienen.

Drop-down-Auswahl oder farbige Buttons wählen als Ressourcen-Kennzeichnung

Du kannst die Ressourcen-Kennzeichnung neben dem Online-Terminbuchungsfenster in zwei Versionen zeigen. Alternativ können die Ressourcen entweder aus einem Drop-down-Feld gewählt werden oder aus einer Auswahl an farbigen Buttons.

Bei den farbigen Buttons kannst Du entscheiden, welche Ressource welche Farbe zeigen soll. (Siehe Abbildung unten rechts)

Die Auswahl der Ressource mit einem Drop-down-Feld zeigt keine zusätzliche Farbe und gibt dem Buchungskalender einen seriösen Look. (Siehe Abbildung unten links)

Farblegende der Ressourcen oberhalb des Kalenders

Bei einem Online-Terminbuchungskalender mit mehreren Ressourcen kannst Du oben im Buchungskalender eine Farblegende zeigen.

Diese Farblegende oberhalb des Kalenders kann kombiniert werden mit den beiden oben stehenden Kennzeichnungen. So gibt es eine Farblegende oberhalb des Kalenders mit einer Drop-down-Auswahl oder eine Farblegende oberhalb des Kalenders mit einer Auswahl an farbigen Buttons.

Diese Farblegende oberhalb des Kalenders kann jeweils kombiniert werden mit einem der beiden oben stehenden Kennzeichnungen. So gibt es entweder die Kombination von einer Farblegende oberhalb des Kalenders mit einer Drop-down-Auswahl der Ressourcen oder eine Farblegende oberhalb des Kalenders mit einer Auswahl an farbigen Ressourcen-Buttons.

Das untenstehende Beispiel zeigt, wie diese Farblegende oberhalb des Kalenders aussieht, wenn beide Ressourcen ausgewählt sind, Ressource 1 oder Ressource 2.

Kennzeichne Dienstleistungen (Nur Serviceplan)

Bei einem Online-Terminbuchungskalender vom Typ Dienstleistung mit verschiedenen Serviceangebot, kannst Du jedem Dienst, also jedem Buchungsangebot, eine eigene Farbe geben.

Den Farbton für die jeweilige Dienstleistung kannst Du an zwei Stellen zuordnen.

• Im Bearbeitungsfenster: Klicke im Bearbeitungsfenster (während Du einen Dienst erstellst oder bearbeitest)in das kleine farbige Quadrat oben rechts und wähle eine der 15 Farben.
• Bei Farben des Layouts: Ordne jedem einzelnen Dienst (Buchungsangebot) einer bestimmten Farbe in der Übersicht der Farbauswahl zu. Dort kannst Du auch neue eigene Farben auswählen und festlegen, ob diese unterschiedlichen Farben gezeigt werden.

Als Standard ist die unterschiedlich farbige Kennzeichnung der Dienste (Serviceangebote) deaktiviert.

Auch, wenn Du die Farbe nicht zeigst, kann der jeweils andere Farbton als Identifikator der entsprechenden Dienstleistung dienen.

Kennzeichne Gruppenangebote (Nur Kapazitätsplan)

Bei einem Online-Terminbuchungskalender vom Typ Kapazitätsplan mit Angeboten für Gruppenangeboten ermöglicht es das System die unterschiedlichen Angebote in jeweils anderen Farben zu zeigen. Dabei kannst Du jedem Buchungsangebot für eine Gruppe, beispielsweise einem Kurs, eine eigene Farbe geben.

Die Farbe von einem Buchungsfenster im Kapazitätsplan Kalender kannst Du an zwei Orten festlegen.

• Im Bearbeitungsfenster: Klicke im Bearbeitungsfenster (während Du ein Zeitfenster erstellst oder bearbeitest) in das kleine farbige Quadrat unten rechts und wähle eine der Farben.
• Bei Farben des Layouts: Hier legst Du die Standardfarbe fest, in der Du die meisten Deiner Zeitfenster anlegen willst. Dann brauchst Du diese nicht mehr farblich anzupassen. Dort kannst Du auch ganz rechts in der Farbauswahl-Leiste im 🌈 Farbwähler eine eigene Farbe erstellen, die Dir anschließend bei dem Erstellen und Bearbeiten der Zeitfenster dann zusätzlich in der Auswahl der Farben zur Verfügung steht.

Dabei erhalten wiederkehrende gleichartige Angebote für Gruppenbuchungen idealerweise dieselbe Farbe.

Die Farbe dient als Identifikator für unterschiedliche Buchungsangebote bei den Gruppenangeboten.

Kennzeichne die Zugehörigkeit von Buchungen

In einem Ressourcenplan und Serviceplan Kalender werden alle aktuellen Reservierungen von einem angemeldeten (eingeloggtem) Benutzer mit einem eindeutigen Muster gekennzeichnet. Durch das „Zeichen des Besitzers“ können Deine Benutzer, Anwender und Kunden ihre eigenen Reservierungen zwischen all den anderen Buchungen auf einen Blick erkennen. Bei dem Kapazitätsplan Kalender wird stattdessen ein Markierungszeichen für den Hinweis der Zugehörigkeit genutzt. Dabei kannst Du auswählen, welches Muster und welches Markierungszeichen dafür genutzt werden soll.

Farbe von leeren Zeiteinheiten

Ein Ressourcenplan Kalender, der mit festen Anfangszeiten und vorgegebenen Zeiteinheiten arbeitet, wird auch leere Zeiteinheiten darstellen. Du kannst die Farbe dieser leeren Zeiteinheiten festlegen oder sie stattdessen verstecken.

Erscheinungsbild vom SuperSaaS-Konto einstellen

Unter Layouteinstellungen kannst Du Veränderungen des Aussehens für das gesamte SuperSaaS-Konto bearbeiten. Das umfasst die Einstellung der Schriftgröße, die Farbe einiger Schnittstellenelemente und das Erscheinungsbild (und das Verhalten) von Kopf- und Fußzeile. Diese Einstellungen betreffen das gesamte Konto von SuperSaaS und nehmen Einfluss auf alle Kalender innerhalb dieses Kontos. Falls Du das nicht möchtest, solltest Du darüber nachdenken, stattdessen verschiedene Konten zu erstellen.

Basis Schriftgröße

Die vorgegebenen Einstellungen sind auf gute Sicht- und Lesbarkeit optimiert. Das kannst Du das aber auch ändern, falls Du das möchtest. Das System wird die meisten visuellen Elemente in Relation zu der eingestellten Schriftgröße anpassen. Bei älteren Browsern kann es jedoch vorkommen, dass das Ergebnis nicht immer auf das Pixel perfekt ist, besonders wenn nahe herangezoomt wird. Um ein unsauberes Aussehen zu vermeiden, bleiben deswegen bestimmte Elemente unveränderlich auf eine feste Größe eingestellt.

Farben

Du kannst die Farben für Text, Links, Überschriften, Tabellen und verschiedene andere UI-Elemente ändern. Dies kann nützlich sein, wenn Du Deinen Online-Terminbuchungskalender über ein Widget in Deine eigene Website integrieren und die Farbschemata anpassen möchten. Wenn Du auf eines der farbigen Rechtecke klickst, erscheint ein Farbwähler, mit dem Du eine Farbe auswählen oder einen sechsstelligen Hex-Farbcode zur Eingabe der RGB-Farbe eingeben kannst. Du kannst jederzeit zu den Standardfarben zurückkehren, indem Du auf den Link „Zurücksetzen“ in der Kopfzeile klickst.

Logo

Standardmäßig erscheinen die Online-Terminbuchungskalender mit einem Logo von SuperSaaS. Du kannst entscheiden, ob Du das verbergen möchtest und lieber Dein eigenes Logo einsetzen willst. Dafür solltest Du zuerst Dein Logo als .jpg, .gif, .png, .svg oder .webp Datei mit einer maximalen Größe von 70 KB hochladen. Du kannst auch eine Webadresse als Link für das Logo hinterlegen, auf die Leute geleitet werden, wenn sie auf Dein Logo klicken. Die Benutzer werden auch zu dieser Webadresse weitergeleitet, wenn sie sich von einem Online-Terminbuchungskalender ausloggen. Alternativ kannst Du dagegen auch entscheiden Logo, Fußzeile und/oder die Brotkrümelnavigation (breadcrumb bar) komplett zu verbergen.

Klicke, um das Video abzuspielen

Favicon

Das Favicon ist eine Miniaturausgabe Deines Logos als Icon im Browser-Eingabefeld in Form einer kleinen Grafik, die vor Deiner URL (Webadresse) im Browser erscheint. Es wird normalerweise auch im Verlauf und den Lesezeichen des Browsers gezeigt. Um einem Besucher eindeutig klarzumachen, dass er sich auf einer Webseite befindet, die zu Dir gehört, kannst Du für die Seiten von Deinem Online-Terminbuchungskalender Dein eigenes Favicon einsetzen.

Um das Favicon Deiner eigenen Webseite statt des Favicon von SuperSaaS zu zeigen, gehe zu Layouteinstellungen und klicke auf Erweiterte Einstellungen unter der Rubrik ‚Aussehen‘ und ‚Erweiterte Optionen: Domainname und Favicon‘. Am Ende dieser Seite kannst Du eine URL eingeben, die auf das Favicon verweist.

Wenn Du möchtest, dass das Favicon in älteren Browsern funktioniert, sollte es in einem speziellen .ico Dateiformat vorliegen. Moderne Browser akzeptieren Favicons im .png oder .svg Format. Um eine .ico Datei zu erstellen brauchst Du einen speziellen Editor oder Konverter, um ein .png Format in ein .ico Format zu verwandeln. Diese Konverter für Bilddateien findest Du als kostenlose Internetangebote, die über Google gefunden werden können. Wenn Du bisher noch nicht mit Favicons gearbeitet hast, willst Du vielleicht hier einen Beitrag über das Favicon von Wikipedia lesen.

Corporate Identity im Terminbuchungssystem anwenden

Das Design des Layouts ist so ausgelegt, dass Du die Corporate Identity Deines Unternehmens im Online-Terminbuchungssystem weitestgehend anwenden kannst.

Weitere Anpassungen an das Design und Layout sind im System mithilfe von Webentwicklern zu erreichen, die das Layout per Javascript und Code anpassen können. Diese erweiterten Design-Anpassungen für die Corporate Identity sollte den Profis überlassen werden, da die gute Lesbarkeit aller Bereiche in allen Browsern, auf allen Geräten und bei jeder Größe der Darstellung des Online-Terminbuchungskalenders erhalten bleiben soll, sodass die Abläufe der Buchungen ideal ineinandergreifen können.

Ein komplettes Whitelabeling, sodass der Benutzer keinen Bezug mehr zu SuperSaaS herstellen kann, ist auch möglich. Wie Du dabei eine benutzerdefinierte Domain mit Deiner Wunsch-Web-Adresse, beispielsweise auch als Subdomain, in das Buchungssystem einbinden kannst, sodass alle Buchungskalender in Deinem Konto unter einer von Dir gewünschten URL erreichbar sind, erfährst Du unter benutzerdefinierte Domain im online Buchungssystem verwenden.

Wie Du das Online-Terminbuchungssystem anpassen willst, wird am besten an die Vorlieben Deiner Kunden und Deiner Branche angepasst. Wenn alle Layout Änderungen zu Deiner Zufriedenheit abgeschlossen sind, sodass Du die Corporate Identity für Dein Unternehmen anwenden kannst und Du eine benutzerdefinierte Domain eingerichtet hast, dann willst Du vielleicht auch, dass alle vom Terminbuchungssystem ausgehenden Nachrichten, wie SMS oder E-Mail von Deinem Unternehmen kommen. Wie Du das einrichten kannst, erfährst Du unter anderen Mail Server nutzen.