Terminplan für Ihre Website - So ändern Sie das Layout

Dieser Teil ist logisch in zwei Bereiche unterteilt: Einstellungen, die für Ihr ganzes Konto relevant sind, beispielsweise Zeitzone und Datumsformat, und Einstellungen, die das Aussehen eines einzelnen Plans bestimmen, beispielsweise die Farbe eines Termins.

Layouteinstellungen

Kontoweite Layouteinstellungen

Die Seite zum Ändern kontoweiter Layouteinstellungen finden Sie, wenn Sie auf der Dashboard-Seite im rechten Menü auf den Punkt "Layouteinstellungen" klicken.

Im ersten Abschnitt können Sie einen Begriff wählen, der anstelle von "Benutzer" verwendet werden soll. Wenn Sie zum Beispiel im Feld für "sonstige" den Begriff "Student" eingeben, dann werden Ihre Teilnehmer in allen Dialogfeldern, Hilfeseiten, E-Mails und Fehlermeldungen als Studenten bezeichnet. Wenn Sie die benutzerdefinierte Option wählen, geben Sie einen Begriff in der Singularform ein. Dieser wird ggf. in die Pluralform umgewandelt. Das SuperSaaS Buchungssystem kennt die meisten englischen Pluralformen, aber es ist nicht perfekt und wird bei ausländischen Wörtern wahrscheinlich Fehler machen. Sie können daher die Standard-Pluralisierung überschreiben, indem Sie den Begriff als "Singular,Plural" eingeben.

Zeitzone auf GMT einstellen, um Sommerzeit zu vermeiden

Der Bereich "Regionale Optionen" ist zum Großteil selbsterklärend. Es ist wichtig, die Zeitzone richtig einzustellen, weil sie darüber entscheidet, wann Erinnerungsmails verschickt werden. Sie wird auch verwendet, wenn Sie eine Konfigurationsoption wie "nicht weniger als 2 Tage im Voraus buchen" im Prozessablauf festlegen. Die Standardeinstellung basiert auf Ihrem Land, was aber für Länder mit mehreren Zeitzonen ungenau sein kann. Das Buchungssystem berechnet automatisch die Sommerzeit für Ihre Region. Sie können Ihre Besucher auch selbst ihre eigene Zeitzone auswählen lassen. In diesem Fall werden auf dem Bildschirm und in Bestätigungsmails sowohl Ihre Zeitzone als auch die Ihrer Besucher angezeigt. Bei der Berechnung der Zeitzonendifferenz berücksichtigt das Buchungssystem automatisch Unterschiede, die durch Sommerzeit an Ihrem Ort und dem Ihres Kunden verursacht werden.

Im Bereich "Aussehen" können Sie die Schriftgröße und die Farben verändern, die für Text, Überschriften, Hintergrund und verschiedene andere Dinge verwendet werden. Die normale Schriftgröße auf der Site ist 11 Punkte. SuperSaaS (Super Software as a Service) ist für die Normalgröße optimiert, aber manche Textteile können für Ihren Geschmack dennoch zu klein sein, besonders dann, wenn Sie ältere oder behinderte Teilnehmer haben. Das Buchungssystem richtet die meisten visuellen Elemente auf die Grundschriftgröße aus, die Sie wählen, aber in älteren Browsern ist dies - besonders bei stärkeren Vergrößerungen - nicht immer pixelgenau. Deshalb behalten einige Elemente eine feste Größe, um nicht unschön auszusehen. Wenn Sie auf die farbigen Rechtecke klicken, erscheint eine Farbauswahl, in der Sie unter den vorhandenen Farben wählen oder einen sechsstelligen HTML-Farbcode eingeben können.

In der Kopf- und Fußzeile können Sie ein Logo hochladen, um das Standardlogo von SuperSaaS zu ersetzen, das auf jeder Online Seite erscheint. Dieses kann das Format "gif", "jpg" oder "png" und eine Maximalgröße von 70 KB besitzen. Es wird 12 Pixel vom oberen Rand platziert, der linke Rand beträgt dabei 15 % der Bildschirmbreite und die Transparenz bleibt erhalten. Sie können auch eine Webadresse angeben, zu der die Teilnehmer gelangen, wenn sie auf Ihr Logo klicken. Die Teilnehmer werden auch dann zu dieser Adresse weitergeleitet, wenn sie auf den Logout-Link klicken, während sie bei Ihrem Online Terminplan eingeloggt sind. Sie können Logo und Fußzeile auch komplett ausblenden, indem Sie die entsprechende Option wählen. Dies ist besonders dann praktisch, wenn Sie SuperSaaS in einem iFrame auf einer anderen Website ausführen möchten. Weitere Informationen hierzu finden Sie im Kapitel zum ‘Integrieren eines Plans in Ihre Website’.

Die "Von:"-Adresse in ausgehenden E-Mail-Nachrichten können Sie in Ihre eigene Adresse ändern. Um Internetstandards zu erfüllen, die auf eine Verhinderung von Spam abzielen, wird dennoch eine Kopfzeile mit dem Text "Weitergeleitet-Von: SuperSaaS" hinzugefügt, die aber normalerweise für den Benutzer nicht sichtbar ist. In E-Mail-Nachrichten genannte Links enthalten weiterhin "supersaas.de", wenn Sie nicht eine benutzerdefinierte Domäne einrichten und diese mit Ihrem Konto verknüpfen. Der erweiterte Abschnitt bietet einen Link zu einer Seite, auf der Sie eine benutzerdefinierte Webadresse einrichten können, und eine Option zum Ändern der kleinen Grafik in der Browserleiste einiger Browser, des sogenannten Favicon. Weitere Informationen hierzu finden Sie im Tutorial zum Thema benutzerdefinierte Domäne.

Wenn jemand auf den "Hilfe"-Link in der oberen rechten Ecke des Bildschirms klickt, zeigt die Seite Hilfeinformationen zu der entsprechenden Seite an. Wenn Sie etwas in "Kontaktinformationen" eingeben, wird dies oben auf jeder Hilfe-Seite angezeigt. Sie können in dieses Feld eine HTML-Formatierung einsetzen, beispielsweise zum Einfügen eines Bildes mit einem über das Internet zugänglichen Link. Der Text wird analysiert, um sicherzustellen, dass es sich um gültiges HTML handelt, und falsche Tags werden entfernt.

Wenn Sie automatisch eine Nachricht an neue Benutzer versenden lassen wollen, ermöglicht es Ihnen das Textfeld unten auf der Seite, diese E-Mail-Nachricht anzupassen. Diese wird in normalem Textformat versendet, verwenden Sie also kein HTML. Auf der Seite "Zugangskontrolle" können Sie wählen, ob neue Teilnehmer eine Anmeldungsmail bekommen sollen oder nicht, wie hier erklärt wird.

Registerkarte "Layout konfigurieren"

Spezifische Layouteinstellungen planen

Durch Klicken auf die blaue Schaltfläche "Konfigurieren" auf Ihrem Terminplan und anschließende Wahl der Registerkarte "Layout" können Sie das planspezifische Layout verändern. Das Aussehen dieser Seite ist je nachdem, ob Sie einen Terminplan vom Typ "Ressource" oder einen Terminplan vom Typ "Kapazität" verwenden, leicht unterschiedlich.

Zunächst können Sie die Größe des Plans festlegen. Der Online Buchungskalender wird automatisch horizontal auf die verfügbare Größe angepasst. Sie können dies ausprobieren, indem Sie an der unteren rechten Ecke ziehen, um die Größe Ihres Browserfensters zu verändern; die Kalenderansicht wird dann entsprechend aktualisiert (falls Sie SuperSaaS innerhalb eines iFrames auf einer anderen Website ausführen, erfolgt die Anpassung an diesen iFrame).

Die vertikale Größe wird nicht automatisch an das Browserfenster angepasst, sondern kann so hoch sein, wie Sie möchten. Es erscheint eine Bildlaufleiste, falls die Seite nicht in das Fenster passt. Bei der "Wochenansicht" oder "Tagesansicht" wird die Höhe von zwei Komponenten bestimmt: wie viele Stunden sichtbar sind und welche Größe eine Stunde hat. Wenn Sie eine Vielzahl von kurzen Terminen haben, beispielsweise von jeweils 15 Minuten, kann eine Erhöhung der vertikalen Größe des Online Buchungskalenders dazu führen, dass dieser sehr viel übersichtlicher wird. Wenn Sie andererseits nur einen Termin am Tag haben, sieht ein größerer Maßstab besser aus.

Termin außerhalb der sichtbaren Stunden

Beachten Sie bitte, dass die sichtbaren Anfangs- und Endzeiten so eingestellt werden können, dass sie außerhalb der Öffnungszeiten liegen. Im Normalfall werden Sie die sichtbaren Stunden so festlegen, dass die gesamten Öffnungszeiten verfügbar sind, aber Sie können das auch anders regeln. Wenn zum Beispiel Besprechungsräume normalerweise von 9 bis 17 Uhr benutzt werden, aber manchmal auch sehr früh oder sehr spät, möchten Sie auf dem Bildschirm sicher keinen Platz mit all diesen meistens freien Zeiten verschwenden. Zeigen Sie einfach den Plan von 9 bis 17 Uhr an und wenn ein Termin außerhalb dieser Zeiten vereinbart wird, ändern die sichtbaren Stunden sich für diese eine Woche automatisch, damit alle eingegebenen Buchungen angezeigt werden können. In der "Monatsansicht" wird die vertikale Größe nicht skaliert, wenn Termine außerhalb der sichtbaren Stunden gebucht werden, da dies ziemlich unordentlich aussehen würde. Sie werden aber über die Anzeige "1 nicht sichtbar" über Termine informiert, die außerhalb der sichtbaren Zeiten gelegt wurden.

Der Bereich "Farben" enthält einen Link zu einer Seite, auf der Sie das für den Online Buchungskalender verwendete Farbschema verändern können. Die Farboptionen auf der Seite hängen von der Art des Plans ab. Bei einem Kapazitätsplan gibt es eine Standardfarbe für Zeitfenster. Sie können diese für jedes einzelne Fenster verändern, indem Sie während der Anlage oder der Bearbeitung eines Fensters auf das farbige Quadrat unten rechts klicken. Die Farbe "Volles Zeitfenster" ist eine Grafik, die auf Zeitfenster gelegt wird, in denen es keine Kapazität mehr gibt. Die "Besitzeranzeige" ist eine Grafik, die auf den Fenstern erscheint und den Benutzern anzeigt, für welche Fenster sie sich angemeldet haben.

Bei einem Ressourcenplan zeigt die Farbe eines Termins an, zu welcher Ressource er gehört. Hier können Sie auch die "Besitzeranzeige" festlegen, also die Grafik, die über Termine gelegt wird und den Benutzern anzeigt, welche Termine ihnen gehören. Wenn Ihre Termine eine feste Länge und feste Größe haben, kann das SuperSaaS Buchungssystem "Geisterfelder" in den Online Buchungskalender zeichnen, um die Auswahl zu erleichtern. Sie können wählen, wie diese leeren Felder aussehen sollen. Einen Eindruck vom Aussehen dieser "Geisterfelder" bekommen Sie in dieser Demo. Wenn Sie mehrere Ressourcen besitzen, können Sie auf der Farbauswahlseite auch entscheiden, welches Widget Sie verwenden möchten, um eine bestimmte Farbe, ein Drop-down-Menü oder eine Farblegende zu vergrößern.

Im dritten Bereich wird bestimmt, welche Felder in Listen wie beispielsweise der Agendaansicht erscheinen. Nur die Felder, die tatsächlich ausgefüllt werden können, werden hier aufgeführt. Über die Registerkarte "Prozess" können Sie zusätzliche Felder hinzufügen.

Der nächste Abschnitt bestimmt die Standardansicht, also die Ansicht für Personen, die zum ersten Mal Ihren Terminplan besuchen. Die verfügbaren Ansichten entsprechen den hellblauen Registerkarten auf Ihrem Terminplan. Sie können nacheinander auf die verschiedenen Registerkarten klicken und diejenige aussuchen, die Ihnen am besten gefällt. Einige der Ansichten eignen sich möglicherweise nicht für Ihren Terminplan. Wenn Sie den Terminplan zum Beispiel benutzen möchten, um Ferienwohnungen wochenweise zu vermieten, ist eine "Tagesansicht" nicht sehr sinnvoll. Sie können diese also entfernen, indem Sie die Markierung des Feldes daneben löschen. Es gibt auch ein Kontrollkästchen zum Ausblenden des "Monatsnavigators", das ist die kleine Übersicht oben rechts.

Benutzerdefinierte Meldungen

Der Rest der Layout-Seite ist mit Textfeldern gefüllt, die Ihnen die Anpassung der Meldungen in verschiedenen Seiten und E-Mails ermöglichen. Sie können HTML und auch Grafiken in diesen Feldern hinzufügen. Beachten Sie aber bitte, dass dies nur funktioniert, wenn die Grafiken über eine URL erreichbar sind, es sich also nicht um Bilder handelt, die lokal auf Ihrem Computer gespeichert sind. (Wenn Sie möchten, können Sie - wie im vorherigen Abschnitt dargestellt - ein Logo auf unseren Server hochladen und dann die URL zu dem Bild benutzen.) Beachten Sie bitte, dass E-Mails im normalen Textformat gesendet werden, geben Sie hier also bitte keinen HTML-Code ein.

In den Nachrichtenfeldern können Sie auch JavaScript einfügen und damit der Seite eine erhöhte Funktionalität verleihen. Wenn Sie auf die Schaltfläche "HTML" klicken, erscheint ein Pop-up-Fenster, in dem Sie Ihren Code einfügen können:

<form><input onclick="window.open('//static.supersaas.net/img/demo_room.jpg','Popup','width=400,height=300')" type="button" value="Pop-up" /></form>
Ihr Terminplan erhält dann eine Schaltfläche, die zusätzliche Informationen anzeigen kann:

Damit können Sie auch einen Tracking-Code für Google Analytics hinzufügen und so umfassende Statistiken erhalten, die Ihnen anzeigen, woher Ihre Besucher kommen.

Dynamische Nachrichten mit "Auto-Text"

Dies ist ein Thema für Fortgeschrittene, das Sie einfach überspringen können

Sie können Ihre Nachrichten mit "Auto-Text" anpassen. Auto-Text-Zeichenfolgen sind "magische" Wörter, die automatisch durch etwas anderes ersetzt werden, wenn die Nachricht generiert wird. Folgende Tabelle enthält die magischen Wörter, die Sie in E-Mail-Nachrichten verwenden können.

Auto-Text-Zeichenfolgen für E-Mail-Nachrichten
Das Wort……wird ersetzt durch
$nameDer Name der Person, an die die E-Mail adressiert wird, falls verfügbar
$dearSchreibt "Liebe/r $name," wenn $name nicht unbekannt ist
$loginDer Login-Name des Erstellers (bleibt frei, wenn Administrator oder nicht eingeloggt)
$subjectDer Rest der Zeile wird als Betreffszeile der E-Mail verwendet,
er kann weitere magische Zeichen enthalten
$urlEine Web-Adresse, die den Benutzer zu dem entsprechenden Ort im Plan führt
$actionBeschreibt, welche Aktion diese E-Mail ausgelöst hat. Z. B.:
"Ihre Buchung wurde $action" → "Ihre Buchung wurde erstellt"
$detailsDetaillierte Informationen zur Buchung, beispielsweise Zeit und Ort
$idDie ID des Objekts, praktisch zum schnellen Nachschlagen in der Supervisor-Benutzeroberfläche
$slot_idDie ID des Zeitfensters, zu dem dieses Objekt gehört (nur Kapazitätsplan)
$replaceEntfernt sämtlichen vom Buchungssystem generierten Text, nur Ihr Text wird verwendet
$start
$finish
$created
Anfangszeit, Endzeit und Erstellungsdatum für diese Buchung.
Verwenden Sie $start_time oder $finish_time, um nur die Zeit anzuzeigen
$icalDie Buchung wird als iCalendar-Datei an die Benachrichtigung angehängt
$formWenn ein Formular mit diesem Objekt verbunden ist, wird es als HTML-Datei angehängt
$if "action"Der Rest des Satzes wird nur gedruckt, wenn Aktion zur aktuellen Aktion passt.
Nachfolgend finden Sie eine Liste möglicher Aktionen
$title
$location
$quantity
$description
Titel, Ort, Beschreibung und Menge der Buchung (nur bei Kapazitätsplan)
Bei Mehrfachressourcenplänen enthält $description den Ressourcennamen

Normalerweise wird Ihr benutzerdefinierter Text an die vom Buchungssystem generierte E-Mail angehängt. Wenn Sie aber irgendwo die Zeichenfolge $replace verwenden, ersetzt Ihr Text vollständig die Systemnachricht. Die Befehle können auch verkettet werden. Der nächste Codeausschnitt würde den Titel nur ersetzen, wenn ein neuer Termin angelegt wird, und ansonsten den Standardtitel stehen lassen:

$if "erstellt" $title Sie haben einen neuen Termin auf $created

Zulässige Werte nach der Aussage $if sind: "erstellt", "geändert", "gelöscht", "genehmigt", "rückerstattet", "auf_die_Warteliste_gesetzt", "auf_der_Warteliste_geändert", "von_der_Warteliste_entfernt" oder "platziert" ("platziert" bedeutet: von der Warteliste verschoben, um ein regulärer Termin zu werden). Sie können auch eine Sprachkennung wie EN oder ES verwenden, um einen Satz nur dann anzuzeigen, wenn jemand diese bestimmte Sprache auf dem Online Buchungskalender gewählt hat.

Eine weitere Verwendungsmöglichkeit von Auto-Text besteht darin, Ihren Kunden einen direkten Link zu einem Bildschirm zur Verfügung zu stellen, auf dem sie ihren Termin bearbeiten können. Sie könnten diesen Text zu E-Mail-Benachrichtigungen hinzufügen:

Um Ihren Termin Online zu ändern, gehen Sie zu:
http://www.supersaas.de/schedule/account_name/schedule_name?view=view&id=$id

Wenn Sie einen Plan vom Typ "Kapazität" verwenden, müssen Sie auch die Zeitfenster-ID in die URL einsetzen:

http://www.supersaas.de/schedule/account_name/schedule_name/$slot_id?view=view&id=$id

Dynamische Nachrichten können auch in Anzeigenachrichten verwendet werden, beispielsweise in der oberhalb des Plans, auf dem Hilfe-Bildschirm und auf dem Login-Bildschirm.

Auto-Text-Zeichenfolgen für Anzeigenachrichten
Das Wort……wird ersetzt durch
$if condition {message}Wenn die Bedingung wahr ist, wird die Nachricht in geschweiften Klammern angezeigt. Nachfolgend finden Sie die möglichen Bedingungen. Die Nachricht kann mehrere Zeilen umfassen und weitere magische Wörter enthalten, mit Ausnahme eines weiteren $if
$loginSchreibt den Login-Namen des aktuell eingeloggten Benutzers
$nameSchreibt den vollständigen Namen des aktuell eingeloggten Benutzers, falls verfügbar
$creditSchreibt die Höhe des Kredits, die der aktuelle Benutzer besitzt
$shopErstellt einen Link zu Ihrem Shop, beispielsweise könnten Sie schreiben: "Bitte kaufen Sie vor der Buchung Credits im $shop"
$autoNormalerweise wird der Standardtext durch Ihren ersetzt, aber $auto fügt ihn wieder ein. Dies ist für den Standardtext über dem Plan praktisch, der sich abhängig davon verändert, ob ein Benutzer buchen darf oder nicht
$suSchreibt das Supervisor-Feld für den aktuellen Benutzer, falls verfügbar. Sie können dies verwenden, um einem bestimmten Benutzer eine Nachricht anzuzeigen, wenn dieser sich einloggt
$idSchreibt die ID des aktuellen Objekts. Nur auf dem Abmeldebildschirm und dem "Danke"-Bildschirm für abgeschickte Formulare verfügbar. Damit können Sie Kunden eine einzigartige Referenznummer zuweisen

Dynamische Anzeigenachrichten werden häufig dazu verwendet, Text in verschiedenen Sprachen für verschiedene Personen zu ermöglichen. Die Bedingung in der Aussage $if kann ein zweistelliger Sprachcode wie EN, DE oder ES sein. Dieser könnte wie folgt verwendet werden:

$if EN {Good morning $login}
$if DE {Guten Morgen $login}

Die Aussage $if kann außerdem dazu verwendet werden, verschiedene Nachrichten anzuzeigen, abhängig davon, ob der Besucher sich angemeldet hat oder nicht:

$if out {Bitte melden Sie sich zunächst an oder legen Sie ein Konto an, falls Sie noch keines besitzen}
$if user {Willkommen zurück, $login!}

Sie kann außerdem dazu verwendet werden, einen Tracking-Code für ein zugehöriges Programm hinzuzufügen. Beachten Sie bitte, dass Sie zunächst durch Klicken auf die Schaltfläche "HTML" in den HTML-Modus umschalten müssen, bevor Sie JavaScript-Code hinzufügen, andernfalls wird der Code als normaler Fließtext angezeigt:

$if paid {Danke für Ihren Besuch $name.
<script type="text/javascript">
<!--
var google_conversion_id = …

</script>
}

Folgende Tabelle listet die möglichen Bedingungen auf, die mit einer Aussage $if verwendet werden können:

BedingungTrifft zu, wenn…
$if user {message}Diese Meldung wird angezeigt, wenn der Benutzer eingeloggt ist
$if out {message}Diese Meldung wird angezeigt, wenn der Benutzer nicht eingeloggt ist
$if shared {message}Diese Meldung wird angezeigt, wenn der Benutzer mit einem geteilten Passwort eingeloggt ist
$if admin {message}Diese Meldung wird angezeigt, wenn der Benutzer als Administrator oder Superbenutzer eingeloggt ist
$if XX {message}Diese Meldung wird angezeigt, wenn die aktuell gewählte Sprache einen ISO-Ländercode von XX besitzt
$if paid {message}Diese Meldung wird angezeigt, wenn der Benutzer einen Zahlungsvorgang erfolgreich abgeschlossen hat.
Sie kann nur zu der Nachricht auf dem Abmeldebildschirm hinzugefügt werden

Nächtes Kapitel: Integrieren eines Plans in Ihre Website | Zurück zu Tutorial Index