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

[Thomas O.]

War nur ein Versuch, hier die Testseite:
Testseite

 

[sschaefer]

Hallo Thomas,

Das ist die pssConfig auf der Seite:



Die eckigen Klammern beim token müssen weg.

Viele Grüße
Steffen

 

[Thomas O.]

@sschaefer
Ganz herzlichen Dank, hat geklappt . Irgendwie hab ich die übersehen, die passten so gut rein . Sorry für den Aufwand.

 

[Thomas O.]

Jetzt wo es klappt, haben sich mir noch zwei neue Fragen aufgetan (siehe Bild):
1. (blau markiert) überall da wo ich die E-Mail, den Code oder sonst was eingebe, bleibt die Feldbeschriftung im Vordergrund und verdeckt meine Eingabe.
2. (rot markiert) kann ich diese Farbe auch ändern bzw. wie heißt dieses Element
3. (schwarz markiert) kann ich diese Farbe auch ändern bzw. wie heißt dieses Element (--pss-?-color

Kontaktseite

Wäre dankbar, wenn ich das noch etwas mehr in meine Seite anpassen kann.

LG Thomas

 

[sschaefer]

Hallo Thomas,

das hatten wir schon mehrfach. Das passiert, wenn sich das CSS deiner Webseite auch auf die online Terminbuchung auswirkt. Ich kann mich aber nicht mehr im Detail erinnern, welche CSS Regel das verursacht.

Wir können bei der Einbindung leider auch nicht alle möglichen Effekte verhindern, da die Browser keine Möglichkeit der harten Trennung anbieten. Das CSS muss auf der Webseite angepasst werden.

Falls das in deinem Wordpress nicht möglich ist, kannst du auch auf die online Terminbuchung verlinken, statt sie einzubetten.

Viele Grüße
Steffen

 

[Thomas O.]

EDIT: Ich muss meinen freudigen Ausruf leider zurücknehmen. Während ich es zwar mittlerweile geschafft habe, den Button um zu färben und auch das Grün bei den Check boxen zu ändern. Hat das mit dem unten stehenden Code leider doch nicht funktioniert. Der ändert nur den "ist" zustand, aber sobald man aus dem Eingabefeld hinausgeht, ist das Label wieder da und verdeckt weiterhin. Ich hab das bedauerlicherweise nicht ausgiebig getestet und war einfach zu froh, als das Label beim Reinklicken weg war. Also geht die Suche weiter, da das ja nun mal eine Sache ist, die so gar nicht geht. Ich hab aber noch ein paar Wochen Zeit bis zum 1.1.24


Falls noch jemand einen Ansatz hat. Meine HTML-Versuche funktionieren leider nicht:

Eingefügt am kurz vor das Ende des Body.

document.addEventListener('DOMContentLoaded', function() { var textfelder = document.querySelectorAll('#pss input[type="text"]'); // Funktion, um das Label für ein bestimmtes Eingabefeld zu verstecken oder anzuzeigen function toggleLabel(textfeld) { var label = textfeld.nextElementSibling; if (textfeld.value) { label.style.display = 'none'; } else { label.style.display = 'block'; } } // Event-Listener für jedes Textfeld hinzufügen textfelder.forEach(function(textfeld) { textfeld.addEventListener('keyup', function() { toggleLabel(textfeld); }); textfeld.addEventListener('blur', function() { toggleLabel(textfeld); }); // Initialer Aufruf für jedes Textfeld toggleLabel(textfeld); }); });

SO , nach einem ganzen Tag schweißtreibender Arbeit und herum testen und Googeln und mit ChatGPT quatschen, habe ich eine Lösung gefunden und möchte die hier teilen, um auch etwas zurückzugeben .

Aaaalso, ich bin der Anleitung oben gefolgt, arbeite aber nun mal mit WordPress und Elementor und hatte daher das Problem, dass das Label der Formularfelder nicht nach oben gewandert ist, sondern zur Mitte hin und weil es im Vordergrund ist, den Eingabetext überdeckt hat, weshalb man nicht lesen konnte, was man selbst tippt. Hier machte es auch keinen Unterschied, ob ich die Seite normal oder mit Elementor bearbeite, scheint also ein globales Problem (Einstellung) zu sein. Und dafür hab ich zu wenig Ahnung davon.... nämlich gar keine .

Falls also jemand ein ähnliches Problem hat, hier meine Lösung:
In Elementor, auf der Seite das HTML- Element "</>" ausgewählt und dort wie in der Anleitung beschrieben im Reiter "Inhalt" das "<div id="pss"></div>" eingetragen.
Soweit so normal, das Problem besteht bis hier hin noch. Nun aber im Element im Reiter "Erweitert" ganz nach unten scrollen und den Unterpunkt "eigene CSS" öffnen und dort folgenden Code eingeben.
<style>
#pss input[type="text"]:focus + label {
display: none;
}
</style>
Seite aktualisieren - fertig. Ab jetzt verschwindet das Label, sobald man etwas einträgt.

Wichtig! Bei mir hat es nicht funktioniert, wenn ich den Code einfach als individuellen CSS über das Plugin verwendet hab. Das hat nix verändert. Erst als ich das direkt über die Eingabe im selben Element unter den erweiterten Einstellungen eingegeben und gespeichert habe, hat es funktioniert.

Liebe Grüße
Thomas

 

[sschaefer]

Hallo Thomas,

wir sind gerade dabei, die Dokumentation für die Einbettung der online Terminbuchung um einen Hinweis zu erweitern, da wir die Problematik der in den Text hängenden Labels schon mehrfach gemeldet bekommen haben.

Das Problem wird dadurch ausgelöst, dass die Schriftgröße der Seite ansich (html Element) und des pss-Elements unterschiedlich definiert sind.
Bei dir ist die Situation wie folgt:

• das html-Element hat Schriftgröße 10px
• das body-Element hat Schriftgröße 14px
• das pss-Element hat Schriftgröße 16px

Hintergrund: In html gibt es Größen, die sich auf eine "Basisgröße" beziehen. Das ist die Schriftgröße des html-Elements. Das sollte im Normalfall immer die Schriftgröße von normalen Absätzen sein. Da du auf dem body-Element die Schrift größer gesetzt hast, ist die Schrift von normalen Absätzen jetzt größer, als die "Basisgröße". Beim pss-Element ist die Schrift dann noch größer gesetzt, was den Unterschied zur "Basisgröße" noch verstärkt.

Da wir Bootstrap für die online Terminbuchung einsetzen und Bootstrap von einer konsistenten Konfiguration der Schriftgrößen ausgeht, gibt es verschiedenartige Probleme, wenn die einstellungen nicht wie erwartet sind.

Also: Schriftgröße des html-Elements auf 16px stellen und schauen, ob der Rest der Webseite noch korrekt funktioniert.

Viele Grüße
Ben und Steffen

 

[Thomas O.]

Hallo Ben und Steffen,

vielen Dank für den Hinweis. Ich hab zwar den ganzen Abend gebraucht raus zu finden, wie ich diesen Font überhaupt verändern kann (fast alle Fonts meiner Webseite haben jetzt min. Größe 16 ..... zumindest zeitweise ). Leider hab ich das Projekt mit viel zu wenig Basiswissen gestartet, weshalb ich aktuell einfach viel zu viele Sachen, so habe, wie ich das im Nachhinein nicht mehr machen würde, aber jetzt muss ich mit diesem "Konstrukt" eben irgendwie klarkommen. Vielleicht mach’ ich das in ein paar Jahren mal neu oder leiste mir nach ein paar Jahren mit ausreichend Gewinn einen Professionellen, der die Seite auf Vordermann bringen muss . Jetzt bin ich aber erst einmal glücklich und kann mich endlich der weiteren Einrichtung von Lemniscus widmen .

Liebe Grüße
Thomas

 

[techfred]

Also wir haben 2024 und Lemniscus empfiehlt zwischen Pest&Cholera zu wählen.

Pest:
Verlinken auf Lemniscus und damit die Verweildauer der Benutzer aus Googlesicht massivst verschlechtern.

Cholerea:
Ein Javascriptsnippet mit plaintext Token den jeder auslesen kann in ein Design reinfrickeln.


Es ist 2024. Wo Plugin? Wo API?
Es ist so albern hier im Tutorial den Token zu kürzen:

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

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

heilpraktiker-foren.de

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

wenn der Token in Klartext im Code steht:

<link rel="alternate" type="text/xml+oembed" href="https://www.psychotherapie24-muenster.de/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.psychotherapie24-muenster.de%2Fterminbuchung%2F&#038;format=xml" />
<!-- start Simple Custom CSS and JS -->
<script type="text/javascript">
jQuery(document).ready(function( $ ){

const token = '076084d1-dc4c-441f-8dd1-e8a145bc9e2e';

$('#pssLink').attr('href', 'https://my.lemniscus.de/pss.html?token=' + token);

$.getJSON(
'https://my.lemniscus.de/mvc/pss/teaser?token=' + token,
function(res) {
if (res.errorMessage) {
$('#termine').append('<p>Oh-oh: ' + res.errorMessage + '</p>');
} else {
res.teasers.forEach(function(t) {
$('#termine').append(
'<li class="list-group-item">' + t.title +
' am ' + t.formattedDate +
' um ' + t.formattedTime +
' Uhr</li>'
);
});
}
}
)
.fail(
function() {
$('#termine').append('<p>Fehler beim Laden der Termine</p>');
}
);

});

Wenn ich mir im LAN ein Wordpress aufsetze und den Token da einsetze kann ich alle Termine von psychotherapie24münster blockieren.

Muss jeder selber sehen, aber wie gut wird deren andere Software z.B. für die Sicherheit, den Datenschutz usw. sein? Viel besser?

 

[pgtaboada]

Also wir haben 2024 und Lemniscus empfiehlt zwischen Pest&Cholera zu wählen.

Pest:
Verlinken auf Lemniscus und damit die Verweildauer der Benutzer aus Googlesicht massivst verschlechtern.

Wir haben 2024 und Google würde das nur mitbekommen, wenn deine Webseiten-Benutzys einwilligen. Inwiefern das noch sinnbehaftet ist kann ich nicht sagen, lass ich einfach mal so in dem Raum stehen. Neugierig bin ich dann doch: ist die Webseitenverweildauer inzwischen eine erstrebenswete Metrik? Welche Vorteile erhofft man sich durch eine längere Verweildauer? Der Abgang in Richtung online Terminbuchung ist doch eher das Ziel und nicht ein Problem. Wäre ja doof wenn die Webseiten-Besucher nur die Webseite besuchen würden. Hat man nix von.

Cholerea:
Ein Javascriptsnippet mit plaintext Token den jeder auslesen kann in ein Design reinfrickeln.

In diesem Satz steckt jetzt ziemlich viel drin. Fangen wir bei dem JS-Snippet an. Die uns gegebenen Technologie-Optionen sind: iFrame oder JS-Snippet. iFrame ist die Hölle in Dosen, gerade wenn es darum geht, irgendwas Mobil/ responsive hinzubekommen.

Das mit dem "plaintext Token den jeder auslesen kann" trägt einen negativen Ton, den ich nicht nachvollziehen kann. Die online Terminbuchung soll doch öffentlich sein - ob das jetzt ein personifizierter Link ist oder ein Token ist gehüpft wie gesprungen. Ist liegt in der Natur der Sache, dass das öffentlich ist.

Dann ist da dieses "in ein Design reinfrickeln". Reinfrickeln ist es erst dann, wenn man sich mit der Materie nicht auskennt. Andere machen "Design reinfrickeln" als Beruf und können das ziemlich gut, glaube die würden ihre Arbeit anders beschreiben.

Es ist 2024. Wo Plugin? Wo API?

Ich wüsste nicht, wie eine API die von dir geschilderten Probleme lösen würde. Unser Kundenstamm hat bisher kein Interesse an eine API gezeigt. Unser Wordpress-Plugin haben wir eingestampft - die Weiterentwicklung hat sich nicht gelohnt. Abgesehen davon würde ein Plugin auch nichts andere tun als im Tutorial beschrieben: das JS in die Seite einbetten. Die CSS Probleme finden im Browser und nicht auf dem Server statt: ein Wordpress Plugin würde auch nicht die von dir beschriebenen Probleme lösen. Also das mit dem Design und das mit dem frickeln.

Wenn die lemniscus community ein Wordpress plugin will - bitte - hier im Forum ein Thread öffnen, Funding organisieren und ein Wordpress-Entwickler beauftragen. Ich glaube wir haben damals zwischen 5 bis 10 T€ für das Plugin bezahlt, geht heute bestimmt preiswerter.

Für die Teaser-Funktionalität haben wir eine REST-Schnittstelle, wird hier und da immer wieder gerne genutzt.

Es ist so albern hier im Tutorial den Token zu kürzen:

Lieber Techfred - nein, das ist nicht albern, höchstens ein Fauxpas. Ich kann sehr gut verstehen, warum Tokens in Tutorials verkürzt/ verändert werden. Wir haben zum Beispiel "_HIER_KOMMT_DEIN_TOKEN_REIN_" als Platzhalter genutzt, und werden oft genug damit konfrontiert, dass die online Terminbuchung dann nicht funktioniert, weil man _HIER_KOMMT_DEIN_TOKEN_REIN_ blind übernommen hat.

Eigentlich ist es so: da hat sich jemand aus der Community die Mühe gemacht, für die Community eine Anleitung für Wordpress zu schreiben. Nicht albern, sondern mega cool.

Wenn ich mir im LAN ein Wordpress aufsetze und den Token da einsetze kann ich alle Termine von psychotherapie24münster blockieren.

Warum die Mühe im LAN ein Wordpress aufzusetzen? Du kannst einfach die Seite aufrufen und einen Termin nach dem anderem vergeben. Du kannst mit dem token auch einfach die Landingpage öffnen und darüber einen Termin nach dem anderem verbeben. So ist das mit einer öffentlichen online Terminbuchung: Termine können vergeben werden.

Muss jeder selber sehen, aber wie gut wird deren andere Software z.B. für die Sicherheit, den Datenschutz usw. sein? Viel besser?

Ich glaube mit "deren" sind wir/ lemniscus gemeint. Also dann, auf gehts. Kannst du deine Bedenken elaborieren? Ich verstehe die Aussage nicht.

Was glaubst du, was man mit dem Token anrichten kann? Also ausser online Termine buchen.
Wo sind die Sicherheitsprobleme? Was ist unsicher?
Welche Datenschutz-Bedenken hast du?

Was würdest du in Bezug auf Sicherheit und Datenschutz anders erwarten?

Wir gehen in Bezug auf Datensicherheit und Datenschutz ziemlich weite Wege. Ein zweckgebundener Token für die online Terminbuchung ist eine Standard-Vorgehensweise - du kannst damit ausschließlich die online Terminbuchung öffnen - und zwar genau so, wie es gedacht ist: man muss sich in Schritt eins authentifizieren, dann wird eine Leistung ausgesucht, usw...


lg

Papick

 

[pgtaboada]

Lieber techfred, wir haben deinen Beitrag zum Anlass genommen, um Maßnahmen gegen die von dir beschriebenen Spam-Terminbuchungen zu ergreifen.

Bislang sind uns derartige Troll-Terminbuchungen nicht bekannt, doch das hält uns nicht davon ab, entsprechend wirksame Schritte einzuleiten.

Hier findest du weitere Informationen zu den Maßnahmen, die wir ergriffen haben:

Ein unsichtbarer Wächter für Online-Terminbuchungen: Die jüngsten Sicherheitsverbesserungen erklärt