Support
Dokumentation

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:

Einstellungen für das Aussehen vom Online-Terminbuchungskalender
Konto-Einstellungen für das Aussehen vom Online-Terminbuchungssystem
Beachte, dass die Art der Integration einen wesentlichen Effekt auf das Aussehen und die Darstellung von Deinem Online-Terminbuchungskalender hat. Die nachfolgenden Erklärungen sind vor allem dann interessant, wenn Du mit einem Link oder Button zu SuperSaaS verweist, um dort die Buchungen vornehmen zu lassen. Wenn Du dagegen Deinen Online-Terminbuchungskalender mit einem Buchungs-Widget direkt in Deine eigene Webseite integrierst und Buchungen auf Deiner Webseite stattfinden, dann wird der Buchungskalender entsprechend anders aussehen.

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.

Layout Farben im Terminbuchungskalender anpassen

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.

Du kannst mehr als eine benutzerdefinierte Farbe für neue Zeitfenster in einem Kapazitätsplan Kalender verwenden, indem Du die Standardfarbe änderst, dann das Zeitfenster erstellst, die Standardfarbe erneut änderst und anschließend das nächste Zeitfenster erstellst. Idealerweise notierst Du Dir die Hex-Zahl für diese neue Farbe und erstellst alle Fenster damit, die Du mit dieser Farbe erstellen willst, bevor Du eine neue Farbe auswählst.

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 und Dienstleistungen mit einer Farbauswahl

Bei einem Kalender der auf verschiedene Ressourcen und Serviceangebot aus anderen Kalendern zurückgreift, kannst Du auch denselben kennzeichnenden Farbton im Bereich über dem Kalender zeigen. Beim Anklicken derselben Farbeinheit öffnen sich dann alle entsprechenden Zeiteinheiten für den Benutzer und werden so diesem Serviceangebot zugeordnet. Dieser Farbton kann dann als Kennzeichnung der jeweiligen Ressource und Dienstleistung dienen. Gleichzeit kann die Farbkennzeichnung auch als Filter für die jeweilige Ressource eingesetzt werden. So kann der ausgewählte Farbton auch alle Reservierungen dieser speziellen Ressource anzeigt. Statt eines kennzeichnenden Farbtons kannst Du auch ein Drop-down-Menü oder schlicht keine Auswahlmöglichkeit einrichten. Wenn Du die Farbtonklassifizierung für eine spezielle Ressource zusätzlich im Kopf des Kalenders darstellst, sieht Dein Terminkalender klarer und strukturierter aus. So können sich die Benutzer und Kunden in Deinem Kalender leichter orientieren und schneller eine Auswahl treffen.

Drop-down-Menü im Terminbuchungskalender für Ressourcenauswahl
Per Farbe Ressourcen im Terminbuchungskalender kennzeichnen

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

Layouteinstellungen im Terminbuchungssystem

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.

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.

Video Vorschau
Klicke, um das Video abzuspielen
Logo neuer Stil im Terminbuchungssystem
Logo mit Fußzeile im Terminbuchungssystem
Benutzerdefiniertes Logo mit eigenem Bild im Terminbuchungssystem hochladen

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.

Eigenes Favicon zur Terminbuchung benutzen

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.

Terminbuchungssystem personalisieren
Mit Layout Anpassungen und dem Einbinden von Favicon und Logo kannst Du das Terminbuchungssystem personalisieren und der Corporate Identity anpassen.

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.