Rupprecht
Bekanntes Mitglied
- Therapien
- Coaching & Psychotherapie - Schwerpunkt: Paartherapie
Liebe Commumity,
die neue Online-Terminbuchung muss in WordPress anders eingebunden werden als die alte. Auch das alte WordPress-Plugin zur Einbindung funktioniert nicht mehr! Deshalb hier eine kleine Anleitung, wie das beispielhaft ab jetzt einfach gehen kann:
1. Ich habe mir verschiedene Möglichkeiten angeschaut und mich dann für ein sehr einfaches Plugin als Hilfsmittel entschieden: Simple Custom CSS and JS
(Das ist das gleiche Plugin, dass auch für die Einbindung der Termin-Teaser-Funktion verwendet werden kann, siehe hier.)
Das kann - genau wie jedes andere Plugin auch - in WordPress gesucht, installiert und aktiviert werden. Das habe ich also gemacht.
2. Nach Installation und Aktivierung erscheint dann am linken Menü-Rand im Dashboard von WordPress ein neuer Menü-Punkt mit Namen „Custom CSS & JS“.
3. Dort dann auf den Unterpunkt „Add Custom HTML“ (also neuen HTML-Code hinzufügen) klicken.
4. Es erscheint dann ein neues Fenster, in das HTML-Code eingefügt werden kann. Ich habe dafür den Namen „Lemniscus-PSS“ vergeben. Jeder andere Name müsste aber auch gehen.
In dieses Fenster muss dann der HTML-Code von der Lemniscus-Hilfe-Seite eingetragen (reinkopiert) werden.
(Nicht irritieren lassen: Im Fenster stehen bereits ein paar Kommentare und Hilfstexte auf Englisch. Diese können stehen gelassen werden oder gelöscht werden - das ist egal.)
Achtung: bei diesem Code kommt es (wie bei jedem anderen Programmier-Code auch) auf jedes einzelne Zeichen an, also auf jedes Komma, jedes Semikolon, auf jede Klammer usw. Hier darf also nichts gelöscht, geändert oder hinzugefügt werden - es sei denn man weiß, was man tut!
Hinter „token:“ muss zwischen die Anführungszeichen Dein persönlicher Token eingetragen werden.
Deinen Token findest Du in den Lemniscus-Einstellungen unter Tokens (dort dann: PSS/Lemniscus online Terminbuchung). Von dort einfach kopieren und im Code einsetzen.
Hinter dem Doppelpunkt der darauf folgenden 4 Zeilen kann jeweils zwischen An und Aus gewählt werden: „false“ bedeutet „ausgeschaltet“ und „true“ bedeutet „eingeschaltet“. Die genauen Erklärungen hierzu stehen auf der entsprechenden Lemniscus-Hilfe-Seite.
5. Nachdem Du den Code in dem Plugin-Fenster eingefügt und ergänzt hast, diese ganze Seite mit dem Code bitte noch speichern, bzw. aktualisieren.
(An den Einstellungen des Plugins habe ich keinerlei Veränderungen vorgenommen!!!)
Ab jetzt steht dieser HTML-Code dann für alle Seiten Deiner Homepage zur Verfügung.
6. Auf einer beliebigen WordPress-Seite Deiner Homepage kann jetzt im Text-Editor (Achtung: nicht im Visuellen Editor!) der Zugriff auf die Online-Termin-Buchung eingebunden werden.
Dazu trägst Du an die gewünschte Stelle dieser Seite folgende Zeile ein:
und aktualisierst dann die Seite.
Ich selbst wollte, dass vor und hinter dem Terminbuchungsfenster noch eine breite Linie zu sehen ist, um so den Beginn und das Ende des Fensters gut sichtbar zu machen. Deshalb habe ich die Code-Zeile noch um zwei weitere Zeilen ergänzt, die dann diese breiten Linien erzeugen. Mein Gesamt-Code sieht dann so aus:
Hier kann dann auch noch nach Wunsch die Stärke der Linie (height), die Weite (width) und die Farbe (background-color) angepasst werden.
Wie das bei mir dann aussieht, kann hier gesehen werden:
www.psychotherapie24-muenster.de
7. Die Farben der einzelnen Linien innerhalb der Buchungsfenster von Lemniscus können auch noch angepasst werden, in dem man sog. CSS-Code hinzufügt und dort die Farbwerte wunschgemäß anpasst. Das hier ist der Code von der Lemniscus-Hilfe-Seite mit einigen von mir schon angepassten Farben:
Wenn Du in irgendeiner Form (z.B. im dafür vorgesehen Bereich Deines WordPress-Themes) schon CSS-Formatierungen in Deiner Homepage angepasst hast, kannst Du diesen Code dort zusätzlich hinzufügen. Alternativ kannst Du den Code auch einfach im oben beschriebenen Plugin „Custom CSS & JS“ eintragen. Hierzu wählst Du „Add Custom CSS“ - also neues CSS hinzufügen aus - und nennst das z.B. „Lemniscus-PSS-Farben“. Dort fügst Du dann den obigen CSS-Code ein und speicherst ihn.
Die Farbwerte kannst Du dort anpassen, wie Du willst. Welcher Code, welche Farbe definiert, kannst Du auf vielen Seiten im Internet finden, z.B. hier:
www.rapidtables.org
Einfach dort durch Klicken die Wunsch-Farbe wählen. Die Zahlen-Buchstaben-Kombination hinter der Raute (z.B. „#1EA138“) neben dem Farbfeldern definiert jede Farbe eindeutig und kann dann in Dein Bearbeitungsfeld in den CSS-Code eingetragen werden.
8. Zur späteren Bearbeitung z.B. der Farben kannst Du beim Plugin am linken Menürand in WordPress auf „All Custom Code“ gehen. Dort findest Du dann die von Dir erstellten Code-Teile (HTML und ggf. auch noch CSS) unter den von Dir vergebenen Namen und kannst diese dann auch wieder bearbeiten (ändern).
Viel Spaß beim selbst Ausprobieren wünscht Euch
Rupprecht
die neue Online-Terminbuchung muss in WordPress anders eingebunden werden als die alte. Auch das alte WordPress-Plugin zur Einbindung funktioniert nicht mehr! Deshalb hier eine kleine Anleitung, wie das beispielhaft ab jetzt einfach gehen kann:
1. Ich habe mir verschiedene Möglichkeiten angeschaut und mich dann für ein sehr einfaches Plugin als Hilfsmittel entschieden: Simple Custom CSS and JS
(Das ist das gleiche Plugin, dass auch für die Einbindung der Termin-Teaser-Funktion verwendet werden kann, siehe hier.)
Das kann - genau wie jedes andere Plugin auch - in WordPress gesucht, installiert und aktiviert werden. Das habe ich also gemacht.
2. Nach Installation und Aktivierung erscheint dann am linken Menü-Rand im Dashboard von WordPress ein neuer Menü-Punkt mit Namen „Custom CSS & JS“.
3. Dort dann auf den Unterpunkt „Add Custom HTML“ (also neuen HTML-Code hinzufügen) klicken.
4. Es erscheint dann ein neues Fenster, in das HTML-Code eingefügt werden kann. Ich habe dafür den Namen „Lemniscus-PSS“ vergeben. Jeder andere Name müsste aber auch gehen.
In dieses Fenster muss dann der HTML-Code von der Lemniscus-Hilfe-Seite eingetragen (reinkopiert) werden.
(Nicht irritieren lassen: Im Fenster stehen bereits ein paar Kommentare und Hilfstexte auf Englisch. Diese können stehen gelassen werden oder gelöscht werden - das ist egal.)
Code:
<script type="text/javascript">
let pssConfig = {
host: "https://my.lemniscus.de",
token: "0xxxxxx1-dxxc-4xxf-8xx1-e8xxxxxxxx2e",
showMainVideoTeaser: false,
showTermineTeaser: true,
showFooter: false,
useCustomBootstrapStyle: false
}
document.write("<script type='text/javascript' src='" + pssConfig.host
+ "/lem/app.nocache-pss.js?v=" + Date.now() + "'><\/script>");
</script>Achtung: bei diesem Code kommt es (wie bei jedem anderen Programmier-Code auch) auf jedes einzelne Zeichen an, also auf jedes Komma, jedes Semikolon, auf jede Klammer usw. Hier darf also nichts gelöscht, geändert oder hinzugefügt werden - es sei denn man weiß, was man tut!
Hinter „token:“ muss zwischen die Anführungszeichen Dein persönlicher Token eingetragen werden.
Deinen Token findest Du in den Lemniscus-Einstellungen unter Tokens (dort dann: PSS/Lemniscus online Terminbuchung). Von dort einfach kopieren und im Code einsetzen.
Hinter dem Doppelpunkt der darauf folgenden 4 Zeilen kann jeweils zwischen An und Aus gewählt werden: „false“ bedeutet „ausgeschaltet“ und „true“ bedeutet „eingeschaltet“. Die genauen Erklärungen hierzu stehen auf der entsprechenden Lemniscus-Hilfe-Seite.
5. Nachdem Du den Code in dem Plugin-Fenster eingefügt und ergänzt hast, diese ganze Seite mit dem Code bitte noch speichern, bzw. aktualisieren.
(An den Einstellungen des Plugins habe ich keinerlei Veränderungen vorgenommen!!!)
Ab jetzt steht dieser HTML-Code dann für alle Seiten Deiner Homepage zur Verfügung.
6. Auf einer beliebigen WordPress-Seite Deiner Homepage kann jetzt im Text-Editor (Achtung: nicht im Visuellen Editor!) der Zugriff auf die Online-Termin-Buchung eingebunden werden.
Dazu trägst Du an die gewünschte Stelle dieser Seite folgende Zeile ein:
Code:
<div id="pss"></div>und aktualisierst dann die Seite.
Ich selbst wollte, dass vor und hinter dem Terminbuchungsfenster noch eine breite Linie zu sehen ist, um so den Beginn und das Ende des Fensters gut sichtbar zu machen. Deshalb habe ich die Code-Zeile noch um zwei weitere Zeilen ergänzt, die dann diese breiten Linien erzeugen. Mein Gesamt-Code sieht dann so aus:
Code:
<hr style="height: 10px; width: 100%; background-color: #18b2ba; border: 0;" />
<div id="pss"></div>
<hr style="height: 10px; width: 100%; background-color: #18b2ba; border: 0;" />Hier kann dann auch noch nach Wunsch die Stärke der Linie (height), die Weite (width) und die Farbe (background-color) angepasst werden.
Wie das bei mir dann aussieht, kann hier gesehen werden:
Terminbuchung – Psychotherapie Münster : Dr. Rupprecht Weerth
www.psychotherapie24-muenster.de
7. Die Farben der einzelnen Linien innerhalb der Buchungsfenster von Lemniscus können auch noch angepasst werden, in dem man sog. CSS-Code hinzufügt und dort die Farbwerte wunschgemäß anpasst. Das hier ist der Code von der Lemniscus-Hilfe-Seite mit einigen von mir schon angepassten Farben:
Code:
#pss{
--pss-steps-background-color: #18b2ba;
--pss-infos-underline-color: fuchsia;
--pss-tab-underline-color: #ff0000;
--pss-tab-selected-underline-color: green;
--pss-slots-button-selected-color: blueviolet;
}Wenn Du in irgendeiner Form (z.B. im dafür vorgesehen Bereich Deines WordPress-Themes) schon CSS-Formatierungen in Deiner Homepage angepasst hast, kannst Du diesen Code dort zusätzlich hinzufügen. Alternativ kannst Du den Code auch einfach im oben beschriebenen Plugin „Custom CSS & JS“ eintragen. Hierzu wählst Du „Add Custom CSS“ - also neues CSS hinzufügen aus - und nennst das z.B. „Lemniscus-PSS-Farben“. Dort fügst Du dann den obigen CSS-Code ein und speicherst ihn.
Die Farbwerte kannst Du dort anpassen, wie Du willst. Welcher Code, welche Farbe definiert, kannst Du auf vielen Seiten im Internet finden, z.B. hier:
HTML-Farbcode-Tabelle 🎨
www.rapidtables.org
8. Zur späteren Bearbeitung z.B. der Farben kannst Du beim Plugin am linken Menürand in WordPress auf „All Custom Code“ gehen. Dort findest Du dann die von Dir erstellten Code-Teile (HTML und ggf. auch noch CSS) unter den von Dir vergebenen Namen und kannst diese dann auch wieder bearbeiten (ändern).
Viel Spaß beim selbst Ausprobieren wünscht Euch
Rupprecht
Zuletzt bearbeitet:
