• Jetzt kostenlosen Newsletter abonnieren Nähere Informationen unter Kostenloser Newsletter
  • Auf Heilpraktiker-Foren gibt es einen großen internen Bereich für Heilpraktiker. In diesem geschützten Bereich können Realfälle der Praxis oder andere sensible Themen diskutiert werden.


    Es befinden sich momentan über 2800 Themen mit über 48000 Beiträgen darin. Ein wertvolles Nachschlagewerk nicht nur für Heilpraktiker die erst begonnen haben, sondern auch für die gestandenen die schon über jahrelange Erfahrung verfügen.

    Nähere Informationen unter: Interner Bereich für Heilpraktiker - Info

Anleitung Einbindung der neuen PSS / Online Terminbuchung in eine WordPress-Homepage

Rupprecht

Themenstarter
Aktives Mitglied
Ort
Rinkerode bei Münster
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“.

Clipboard 1.jpg

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.

Clipboard 2.jpg

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:

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.

Clipboard 3.jpg

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

Clipboard 5.jpg

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

Clipboard 4.jpg

Viel Spaß beim selbst Ausprobieren wünscht Euch

Rupprecht
 
Zuletzt bearbeitet:

Lorowei

Neues Mitglied
Danke für die Hinweise. Sollte jemand mit dem Divi-Theme arbeiten, könnt ihr mich gern fragen. Die Integration hat dort über die Code-Sektion einfach funktioniert und die CSS konnten in den Thema-Optionen integriert werden.
 

Lorowei

Neues Mitglied
Was ich allerdings bei der Integration nicht verstanden haben ist, was unter dem Abschnitt

"Möglichkeiten zum Definieren des Layouts"​

gemeint ist. Zum einen wo ich den Code integrieren muss und was sich dann im Layout verändert. Vielleicht gibt es dazu noch einen kleine Hilfemöglichkeit?!
 

sschaefer

Mitglied
Forumsunterstützer
Was ich allerdings bei der Integration nicht verstanden haben ist, was unter dem Abschnitt

"Möglichkeiten zum Definieren des Layouts"​

gemeint ist. Zum einen wo ich den Code integrieren muss und was sich dann im Layout verändert. Vielleicht gibt es dazu noch einen kleine Hilfemöglichkeit?!

Standardmäßig werden bei Einbettung der online Terminbuchung alle Inhalte untereinander angezeigt. Alle Inhalte sind:
  • Terminteaser
  • Video
  • Die Buchungsmaske
Auf unserer Seite der online Terminbuchung (z.B. alle Direktlinks) wird bei ausreichender Bildschirmgröße der Terminteaser und das Video links positioniert und die jeweiligen Inhalte sind in einer Box mit abgerundeten Ecken enthalten. Bei der Einbettung klebt erstmal alles einfach untereinander.

Wenn du die Inhalte auch nicht einfach untereinander angezeigt haben willst, dann musst du - oder dein Webdesigner - das per CSS ändern. Der Abschnitt zeigt die Struktur, welche du für die betreffenden Anpassungen benötigst. D.h. wenn du den Code in deine Seite übernimmst musst du noch die einzelnen CSS Blöcke ausfüllen. Da wir nicht wissen, wie du das Layout oder ggf. die Boxen für die Inhalte gestalten möchtest, können wir an der Stelle auch kein konkretes Beispiel dafür zeigen. Der Abschnitt beschreibt also nur, welche HTML Elemente dein Webdesingner gefahrlos in welcher Art anpassen darf.

Viele Grüße
Steffen
 

LisaJo

Neues Mitglied
Danke für die Hinweise. Sollte jemand mit dem Divi-Theme arbeiten, könnt ihr mich gern fragen. Die Integration hat dort über die Code-Sektion einfach funktioniert und die CSS konnten in den Thema-Optionen integriert werden.
Ich würde mich mega über eine Divi Anleitung freuen :)
Über Code / Snippet bekomme ich zwar den Code rein, aber bisher nicht, dass die neue Terminbuchung auch angezeigt wird.
 

Lorowei

Neues Mitglied
Du hast eigentlich 2 Möglichkeiten
1. kannst du in den DIVI-Einstellungen -> Theme-Optionen -> Integration -> Code dem <head> Ihres Blogs hinzufügen - das JavaSkript einfügen
Den Abschnitt (<div id="pss"></div>) fügst du über die Spalte "Code" an der gewünschten Stelle deiner Seite ein.

2. Es funktioniert ebenfalls, wenn du auf der entsprechenden Unterseite das gesamten JavaSkript + (<div id="pss"></div>) in die Spalte Code an der gewünschten Stelle hinterlegst.


 

Ibis

Neues Mitglied
Vielen Dank Lorowei, das mit Divi hat über das Code Modul hat geklappt!

Was jetzt noch nicht geht, ist die Farbanpassung durch CSS. Das oben gezeigte Snippet funktioniert leider nicht:

#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;
}

Hier gibt es eine Fehlermeldung, jeweils am Anfang der Zeilen (--pss).

Und dieses hier bin ich mir auch nicht sicher, wo es rein kommt:

<html>
<head>
<!-- [...] -->
<style>
#pss {
--pss-steps-background-color: orange;
--pss-infos-underline-color: fuchsia;
--pss-tab-underline-color: #ff0000;
--pss-tab-selected-underline-color: green;
--pss-slots-button-selected-color: blueviolet;
--pss-appname-color: yellow;
}
</style>
</head>
<body>
<!-- [...] -->
</body>
</html>

Im Header in Divi Integration kommen Fehlermeldungen.
Im Code Modul kommt keine Fehlermeldung, aber die Farben sind trotzdem nicht verändert.


Was kann der Grund sein?

Wie kann ich hier einen Screenshot hochladen?

Danke und Gruss,

Stefanie
 
Zuletzt bearbeitet:

sschaefer

Mitglied
Forumsunterstützer
Hallo Stefanie,

das mit dem doppelten Minus nennt sich CSS Variables und ist vergleichsweise neue Technik. Die meisten Browser unterstützen das zwar seit 2016, die Spezifikation ist aber noch gar nicht so lange fertiggestellt. Möglicherweise kennt Divi diese CSS Erweiterung nicht und fällt deshalb bei der Validierung auf die Nase. Das ist aber nur eine Mutmaßung, ich kenne Divi nicht.

Viele Grüße
Steffen
 

Ibis

Neues Mitglied
Hallo Steffen,

danke für deine Antwort. Mit einem Minus geht es auch nicht ;-) Und ohne Minus auch nicht.

Hat sonst vielleicht jemand noch eine Idee, woran es liegen könnte, dass die CSS nicht greifen?

Danke und Gruss,

Stefanie
 
Oben