HTML einfügen

• Erfahre mehr über das Hinzufügen von HTML in Textfelder
• Ändere das Aussehen Deines Online-Terminbuchungskalenders mit CSS
• Ändere das Aussehen von Deinem Buchungs-Widget mit CSS
• Erfahre mehr über JavaScript Code-Schnipsel und wie sie funktionieren
• Lerne, wie man JavaScript einfügen und damit dynamische Funktionen in Deinen Online-Terminbuchungskalender integrieren kann
• Setze zusätzliche Optionen bei dem Verwenden von Scripten im Code ein, wie Auto-Text oder ein Code-Schnipsel für Analyse

HTML, CSS oder JavaScript in Textfelder einfügen

1. Im Nachrichtenfeld unter Layouteinstellungen
2. In den Feldern für Meldungen, die sich in jedem Online-Terminbuchungskalender auf der Seite KONFIGURIEREN > Layout befinden
3. Im HTML-Kommentarfeld in benutzerdefinierten Formularen unter KONFIGURIEREN > Design
4. In den Feldern für die E-Mail-Nachrichten auf der Seite KONFIGURIEREN > Layout, wenn HTML für E-Mail-Nachrichten unter Layouteinstellungen aktiviert worden ist

Um den Code eingeben zu können, klicke auf den Button < > oben rechts in der Symbolleiste des entsprechenden Feldes. Damit öffnet sich ein neues Fenster für den Code, wo Du Deine Anpassungen einfügen zu kannst. Du benötigst gewisse technische Grundkenntnisse, um das anzuwenden, zu können.

Ändere das Aussehen Deines Online-Terminkalenders mit CSS

Wenn Du z. B. bestimmte Seiten Deines Online-Terminbuchungskalenders im Design ändern möchtest, um diese an das Design Deiner Website (Corporate Design) anzupassen, kannst Du CSS verwenden. Genau, wie JavaScript, kann CSS zu jedem Nachrichtenfeld hinzugefügt werden, das HTML zulässt. Klicke auf den < > Button in der Symbolleiste des Nachrichtenfeldes, um das Textfeld für den Quellcode zu öffnen und Dein CSS einzufügen.

Es gibt zwei Möglichkeiten, CSS in SuperSaaS zu verwenden: Du kannst entweder Inline-CSS verwenden, oder ein externes Stylesheet verlinken.

Inline CSS

Inline CSS ist eine Methode, mit der Du Design-Anpassungen direkt auf einzelne HTML-Elemente in der Datei von Deinem Online-Terminbuchungskalender anwenden kannst. Verwende dazu das style-Element innerhalb des Anfangs-Tags, das ein HTML-Element eröffnet. Wenn Du zum Beispiel die Farbe des Textes in einem Absatz auf Grün ändern und die Schriftgröße auf 16 Pixel einstellen möchtest, könntest Du Inline-CSS wie folgt verwenden:

Der oben stehende HTML-Code mit dem CSS zusammen, sieht dann auf der angewendeten Website, wie folgt aus:

Dies ist ein Absatz mit grünem Text und einer Schriftgröße von 16 Pixeln.

Anstelle der Farbe Grün (green), kannst Du auch einen Hex-Code für jede beliebig Farbe einsetzen, wie beispielsweise: #c6c5ff

Inline-CSS eignet sich hervorragend, um den Stil eines bestimmten Elements schnell zu ändern, ohne den Rest der Seite des Online-Terminbuchungskalenders zu beeinträchtigen. Es ist jedoch weniger praktisch, wenn Du denselben Stil bei vielen Elementen anwenden willst, da Du dann jedes Mal denselben Code wiederholen müsstest.

Inline-CSS in der E-Mail

SuperSaaS bietet zwei Arten von E-Mail-Formaten: Einfachen Text (plain text) und HTML. Standardmäßig werden E-Mails im einfachen Textformat gesendet, das nur puren Text zulässt.

Wenn Du Bilder oder HTML einfügen oder ein Styling, wie CSS, in den E-Mails für den Online-Terminbuchungskalender anwenden möchtest, dann musst Du die HTML-Formatierung für E-Mail-Nachrichten auf der Seite Layouteinstellungen aktivieren.

In E-Mails kannst Du ausschließlich Inline-CSS verwenden, da E-Mails keine CSS-Stylesheets unterstützen, wie es bei Webseiten der Fall ist. Nachdem Du die HTML-Formatierung für E-Mails aktiviert hast, kannst Du Inline-CSS, wie oben beschrieben, anwenden.

Ein externes Stylesheets verwenden

Während Inline-CSS für kleine Änderungen nützlich ist, wird es unhandlich, wenn Du CSS für eine Menge von Design-Anpassungen einsetzen willst. Wenn Du Änderungen an vielen Elementen machen möchtest, ist das Verwenden von externen CSS-Stylesheets zu bevorzugen.

Um auf ein externes Stylesheet zu verlinken, ist es wichtig, dass das Stylesheet über einen anderen Server zugänglich ist, da es nicht möglich ist, CSS-Dateien direkt in SuperSaaS zu speichern. Die Grundstruktur für die Verknüpfung mit einem separaten CSS-Stylesheet sieht wie folgt aus:

Nach der Anwendung von CSS im Quellcode der Nachrichtenfelder, die HTML-Inhalte zulassen, klicke auf „Speichern“. Besuche dann die bearbeitet Webseite des Online-Terminbuchungskalenders, um sicherzustellen, dass das CSS korrekt angewendet wird.

CSS in Deinem Buchungs-Widget anwenden

Du kannst auch CSS in einem Buchungs-Widget anwenden, wenn der Online-Terminbuchungskalender in Deine Website eingebettet ist. Wenn Du das Design des Buchungs-Widgets anpassen möchtest, kannst Du entweder Dein eigenes CSS hinzufügen, das zwischen den Style-Tags in jedem Frame platziert wird. Oder Du fügst einen Link zu einem externen Stylesheet ein.

Denke jedoch daran, dass sich die Widget-Struktur und der Bezeichner (identifier) bei Aktualisierungen ändern können, verlasse Dich also nicht darauf, dass diese immer gleich bleiben.

var supersaas = new SuperSaaS("demonstrationen", "Therapeut", {"custom_css": "h1 {color:red}"})
var supersaas = new SuperSaaS("demonstrationen", "Therapeut", {"custom_css": "https://….css"})

Informationen für weitere Anpassungsmöglichkeiten Deines Online-Terminbuchungs-Widgets findest Du in unserer Entwickler Dokumentation.

Javascript in SuperSaaS verwenden

Mit JavaScript kannst Du dynamische Funktionen in Deine Website für Terminbuchung oder in die Formulare integrieren, um den Buchungsprozess zu verbessern. So kannst Du verschiedene Dienste oder Funktionen integrieren, z. B. Live-Chat, Schaltflächen, Countdowns oder Tracking-Scripte für Analysedienste wie Google Analytics oder Bing.

Das folgende JavaScript-Code-Schnipsel fügt zum Beispiel eine Pop-up-Schaltfläche wie folgt hinzu . So ein Pop-up kann beispielsweise verwendet werden, um zusätzliche Informationen zu zeigen, wenn Kunden auf Deiner Buchungswebseite Reservierungen machen.

Wie Du JavaScript einfügen kannst

1. Finde Deine Nachrichtenbox: Gehe zu dem Feld, in das Du Dein JavaScript-Script einfügen möchtest. Dieses Feld kann sich an einer der oben genannten Stellen befinden
2. Öffne das Eingabefeld für den Quellcode: Klicke oben rechts in dem Auswahlmenü der Werkzeuge auf den < > Button, um das Textfeld für den Quellcode zu öffnen
3. Kopiere das JavaScript-Element: Rufe den Code-Schnipsel des Services oder der Funktion ab, die Du integrieren möchtest, z. B. einen Live Chat Button für Live-Support oder einen Analyseservice wie Google Analytics
4. Füge ihn in das Quellcode-Textfeld ein und speichere ihn: Füge den Code-Schnipsel in das Quellcode-Textfeld in SuperSaaS ein und klicke auf Speichern. Scrolle dann zum Ende der Layout-Seite und klicke auf den Button „Änderungen speichern“.
5. Testen: Besuche nach dem Speichern des Codes die Seite, auf der Du das Code-Schnipsel angewendet hast, um sicherzustellen, dass das Script korrekt angewendet wird. Wenn Du das Code-Schnipsel auf mehreren Seiten benötigst, wiederhole den Vorgang für das Einfügen bei jedem benutzerdefinierten Nachrichtenfeld

Zusätzliche Optionen innerhalb von SuperSaaS

Verwende Auto-Text mit Scripten im Code

Autotext-Strings sind eine Reihe von „magischen Wörtern“, die beim Erstellen der Nachricht automatisch durch etwas anderes ersetzt werden. Autotext-Anweisungen sind praktisch für E-Mails und Meldungen auf dem Bildschirm. Du kannst sie aber auch in HTML in Kombination mit einem Script verwenden. Auf der Seite für das Anpassen der Mitteilungen auf dem Bildschirm, kannst Du alle Autotext-Anweisungen finden, die mit HTML verwendet werden können.

Auto-Text kann auch verwendet werden, um das Hinzufügen von Scripten im Code an eine Bedingung zu knüpfen. Beispielsweise, um ein Script nur dann anzuwenden, wenn eine Zahlung erfolgreich gewesen ist. Um einen Code-Schnipsel in die Bedingung der Autotext-Anweisung hinzuzufügen, setze diesen einfach innerhalb der geschweiften Klammern ein.