Ich hatte auf eine sehr interessante Anfrage in der Official Oxyen User Group gestoßen. Hier wollte jemand Calendly anhand dieser Dokumentation beim Klicken auf einem Div Element das Popupfenster triggern.
Hier ist ein Beispiel wie man sein Calendly Link als Popup mit einem eigenem Button integriert:
<!-- Calendly link widget begin -->
<link
href="https://calendly.com/assets/external/widget.css"
rel="stylesheet">
<script
src="https://calendly.com/assets/external/widget.js"
type="text/javascript"></script>
<!-- Calendly link widget end -->
Zusätzlich muss hier noch ein Code Snippet was zu dem Button hinzugefügt werden muss:
<button onclick="Calendly.initPopupWidget({url:'YOUR_SCHEDULING_LINK'});
return false;">Button Text</button>Calendly ist ein Online-Tool, das dir hilft, Termine zu planen. Du kannst einfach deinen Kalender verknüpfen und dann Links zu deinem Kalender mit anderen teilen, damit sie einen Termin bei dir buchen können. Calendly synchronisiert automatisch alle Termine mit deinem Kalender, sodass du keine Doppelbuchungen hast.
Du kannst verschiedene Arten von Terminen erstellen, wie zum Beispiel Einzeltermine, Gruppentermine oder Rundgänge. Du kannst auch Zeitblöcke festlegen, in denen du verfügbar bist, und automatische Erinnerungen an Termine senden.
Calendly ist auch sehr flexibel und kann in viele andere Tools integriert werden, wie zum Beispiel Zoom, Salesforce und Slack
Das Tool ist auch sehr gut dokumentiert, und bietet zahlreiche Integrationsbeispiele an.
Der Wunsch weichte etwas von der originalen Anfrage ab. Statt eines Buttons sollte der Click Event zu einem Div hinzugefügt werden. Zusätzlich dazu handelte es hier nicht um einen einzelnen Element sondern mehrere divs mit der gleichen Klasse. Es gibt im Oxygen die Möglichkeit attributes zu den einzelnen Html Tags hinzufügen ABER werden die Anführungszeichen in Value Feld aus Sicherheitsgründen escaped.
Der riesigen Vorschprung von OxygenBuilder gegenüber von anderen Page Builders gegenüber der Konkurenz inklusive Gutenberg, dass man schnell sehr sauberes Code erstellen kann. Die einzelnen Elemente sowie die Seiten können sehr effizient und tiefgehend Strukturiert werden. Deswegen ist eine sehr gute Option die Aufgabe mit einem oder mehreren Code Blocks zu lösen.
Als erstes Schritt muss man die Divs erstellen und stylen. Die sollen die gleiche CSS Klasse haben, damit man diese über JavaScript identifizieren kann. Hier bietet OxygenBuilder zahlreiche Tutorials an, also ich würde lieber diesen Teil überspringen. Für die Hauptaufgabe könnte man hier JQuery verwenden, aber wir sind im 2023, aber ich wollte hier auch keinen anderen JS Framework ins Spiel bringen deswegen habe ich mir entschieden einfach VanillaJs zu nehmen. Anbei das funktionierende CodeSnippet:
const calendlyDivs = document.querySelectorAll('.classname');
calendlyDivs.forEach(element => {
element.addEventListener('click', () => {
Calendly.initPopupWidget({ url: 'YOUR_SCHEDULING_LINK' })
//console.log('it works')
return false
})
})const calendlyDivs = document.querySelectorAll('.classname');
Hier selektieren mit querySelectorAll wir alle Divs die die Klasse '.classname' haben.
Dann fügen wir für jedes Element in NodeList einen EventListener zu, was auf das Event 'click' schaut und führ den letzten Teil im Falle eines Klicks auf das HTML Tag aus.