Dokumentation

Aussehen von Kalender in online Terminsoftware ändern

Das visuelle Erscheinungsbild eines Kalender und die gesamte Schnittstelle (Interface) zum Benutzer können getrennt bearbeitet werden. Damit kannst Du das Aussehen und Layout in der Terminsoftware anpassen, damit der online Terminbuchungskalender zu Deinen Anwendungen passt. Du kannst die Farbpalette Deines Kalenders ändern, indem Du ein anderes Farbthema wählst oder für jedes Kalenderelement Deine eigene Farbwahl triffst. Auch auf der Ebene des SuperSaaS-Kontos kannst Du etwas Ähnliches bei der Wahl der Farben für die Benutzerschnittstelle tun. Das Aussehen von Kopf- (header) und Fußzeile (footer) kannst Du auf der Ebene des SuperSaaS-Kontos einstellen.

Einstellungen für das Erscheinungsbild des online Terminbuchungskalender

  1. Passe die Farben des Terminbuchungskalenders an
  2. Ändere die Farben für die Kalendereingabefelder
  3. Kennzeichne Ressourcen und Dienstleistungen mit einer Farbauswahl
  4. Zeige die Zugehörigkeit von Buchungen
  5. Lege die Farbe von leeren Zeiteinheiten fest

Konto übergreifende Einstellungen für das Erscheinungsbild des gesamten online Terminbuchungssystems

  1. Ändere die Basis Schriftgröße
  2. Wechsle die Farben für Dashboard, Texte und Steuerungselemente
  3. Füge Deinen eigenen Header und Footer ein
  4. Setze Dein Favicon ein
  5. Benutze Deine eigene Corporate Identity

Aussehen des Kalenders individuell anpassen

Unter KONFIGURIEREN > Layout > Farben des Layout klickst Du und kannst so das visuelle Erscheinungsbild Deines Kalenders bearbeiten. Die verfügbaren Möglichkeiten können abhängig vom Kalender- oder Plantypen – Kapazitätsplan, Ressourcenplan oder Serviceplan – ein wenig abweichen.

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 Kalendereingabefelder und Angebotseinheiten

Die Farben der Kalendereingabefelder, beispielsweise das Zeitfenster oder Aktivitätsfeld in einem Kapazitätsplan oder die Reservierung in einem Ressourcenplan, werden unabhängig vom Farbthema des Kalenders eingestellt. Wenn ein Kalender auf verschiedene Ressourcen oder Serviceangebote – also andere Kalender – zurückgreift, kann jede einzelne Ressource oder auch jedes dahinterstehende Servicemodul eine eigene zugehörige Farbe erhalten. Von der Farbe des Kalendereingabefensters abgesehen, kannst Du auch ein besonderes Muster darüberlegen, um anzuzeigen, welche Zeitfenster oder Einheiten Deines Angebots bereits bis zur Höchstbelegung 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 spezielle 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 Ressourcen- und Serviceplan Kalender werden alle laufenden Reservierungen von angemeldeten Benutzern mit einem Schleier mit einem ausgesuchtem Muster belegt. So 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 statt dessen ein Markierungszeichen genutzt. kannst Du dabei 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. kannst Du die Farbe dieser leeren Zeiteinheiten festlegen oder sie statt dessen 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, statt dessen verschiedene Konten zu erstellen.

Layouteinstellungen im Terminbuchungssystem

Basis Schriftgröße

Die vorgegebenen Einstellung 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 heran gezoomt wird. Um eine unsauberes Aussehen zu vermeiden, bleiben deswegen bestimmte Elemente unveränderlich auf eine feste Größe eingestellt.

Farben

Du kannst die Farbe für Text, Links, Überschriften, Tabellen und verschiedene andere Elemente ändern. Das ist dann besonders sinnvoll, wenn Du Deinen Kalender in Deine eigene Webseite mit einem iFrame als Fenster integrierst und die Umgebung farblich anpassen willst. Dementsprechend ist die Anpassung der Farben ebenso sinnvoll, wenn Du Deinen Kalender mit der alternativen Form, einem Buchungswidget als Pop-up-Fenster oder via Button integrierst. Wenn Du auf eines der Farbquadrate klickst, erscheint ein Farbauswahlfenster, wo Du eine Farbe anklicken oder den Farbkode als Hexadezimalzahl (HEX-Zahl) für die online verwendete RGB-Farbauswahl eingeben kannst. Dabei kannst Du auch immer zurückgehen zu den Standardeinstellungen in den Farben, indem Du auf den Link “Zurücksetzen” in der Kopfzeile klickst.

Kopf- und Fußzeile

Standardmäßig werden die Kalender mit einer Kopf- und Fußzeile von SuperSaaS gezeigt. Du kannst entscheiden, ob Du das verbergen möchtest und lieber Dein eigenes Logo einsetzen willst. Dafür solltest Du zuerst Dein Logo als .gif, .jpg oder .png Datei mit einer maximalen Größe von 70 KB hochladen. Das Bild von Deinem Logo wird dann 12 Pixel von oben (top) positioniert, mit einer Entfernung von 15% vom linken Rand der Bildschirmbreite (width) angelegt und mit durchsichtigem Hintergrund unterlegt. 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 Kalender abmelden. Du kannst dagegen auch entscheiden Logo, Fußzeile und/oder die Brotkrümelnavigation (breadcrumb bar) komplett zu verbergen. Das ist dann besonders interessant, wenn Du SuperSaaS in einem Fenster auf Deiner eigenen Webseite integrieren willst.

Video Logo einsetzen Vorschau
Klicke zum Vergrößern und Abspielen des Video
Logo neuer Stil im Terminbuchungssystem
Logo mit Fußzeile im Terminbuchungssystem
Benutzerdefiniertes Logo mit eigenem Bild im Terminbuchungssystem hochladen

Favicon

Das Favicon, oder auch die Miniaturausgabe Deines Logos als Icon im Browser-Eingabefeld, ist die kleine Grafik, die vor Deiner URL (Webadresse) oder im Reiter oben, je nach Browser, erscheint. Es wird normalerweise auch im Verlauf und den Lesezeichen des Browsers gezeigt. Um einem Besucher eindeutig klar zu machen, dass er sich auf einer Webseite befindet, die zu Dir gehört, kannst Du für die Kalenderseiten Dein eigenes Favicon einstellen.

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.

Offiziell soll das Favicon nicht in einem.gif oder .jpg Dateiformat sein, sondern in dem spezifischen .ico Dateiformat, auch wenn viele Browser mit einem nicht korrekten Dateityp funktionieren. Um eine .ico Datei zu erstellen brauchst Du einen speziellen Editor oder Konverter, um ein .gif 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 Layout ist so ausgelegt, dass Du die Corporate Identity Deines Unternehmens im Terminbuchungssystem weitestgehend anwenden kannst.

Noch weitere Anpassungen an das Design und Layout sind im System mit Hilfe von Webentwicklern zu erreichen, die das Layout per Javascript 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 Terminkalenders erhalten bleiben soll, damit 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, so dass 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, so dass alle Buchungskalender in Deinem Konto unter einer von Dir gewünschten URL erreichbar sind, erfährst Du unter benutzerdefinierte Domain im online Buchungssystem verwenden unter der Überschrift “Erstellen der Absenderadresse”.

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, so dass 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 Benachrichtigungen und Erinnerungen anpassen.