Sie können den Link überall in Ihrer Webseite einbinden.
Zum Beispiel, <a target="_blank" href="https://petleo.app/?iframe=true&redirect_url=/clinic/YOUR-HASH-123/branch/2/book-appointment/">Klicken Sie hier für eine Terminvereinbarung</a>
Rechts sehen Sie ein Beispiel: (verwenden Sie nicht diesen Beispiellink für Ihre Website, sondern Ihren persönlichen Link, den Sie auf Ihrer "PetLEO-Einstellungen"-Seite einsehen können)
Sie können ihn auch in Ihrer Menüleiste verwenden, aber vergessen Sie nicht, den Code entsprechend anzupassen. (Zum Beispiel müssen Sie für die Menüs den Code möglicherweise zwischen <li></li> Tags einbinden.)

If you use script tag, i.e. <script type="text/javascript" src="https://lib.petleo.app/widget.js" data-text="Jetz Termin vereinbaren" data-name="petleo-widget" data-hash="YOUR-HASH-123" data-branch="YOUR-BRANCH-ID" data-color="#FF758C" data-href="false"></script>
Rechts sehen Sie ein Beispiel: (verwenden Sie nicht diesen Beispiellink für Ihre Website, sondern Ihren persönlichen Link, den Sie auf Ihrer "PetLEO-Einstellungen"-Seite einsehen können)
Sie können data-text für den Titel der Schaltfläche bzw. data-color für die Farbe der Schaltfläche ändern.
Sie können ihn auch in Ihrer Menüleiste verwenden, aber vergessen Sie nicht, den Code entsprechend anzupassen. (Zum Beispiel müssen Sie für die Menüs den Code möglicherweise zwischen <li></li> Tags einbinden.)

Wenn das obige Skript für Ihre Website nicht funktioniert, müssen Sie eventuell mit den unten stehenden Codes arbeiten:

1. Fügen Sie diesen Code an der Stelle ein, an der Sie die Schaltfläche in Ihrem HTML Code der Webseite einfügen möchten.

<button class="petleo-button" onclick="on()">Jetzt Termin vereinbaren!</button> <div id="overlay" onclick="off()"> <iframe class="text" src="https://petleo.app/?iframe=true&redirect_url=/clinic/YOUR-HASH-123/branch/2/book-appointment/" style="border:none; margin: auto; display:block; height:800px; max-height: 90%; width:400px; max-width: 90%; margin: 5% auto;" name="iframe_a" height="800px" width="400px" title="PetLEO" frameborder="0" style="border:0" allowfullscreen> </iframe> </div>

2. Fügen Sie diesen Code in Ihrer .js-Datei oder in Ihrer .html-Datei ein, und zwar innerhalb von folgenden <script></script> tags.

var monitor = setInterval(function(){ var elem = document.activeElement; if(elem && elem.tagName == "iframe"){ clearInterval(monitor); } }, 100); function on() { document.getElementById("overlay").style.display = "block"; } function off() { document.getElementById("overlay").style.display = "none"; }

3. Fügen Sie diesen Code in Ihre .css-Datei ein, um die Schaltfläche zu gestalten. Sie können die zugehörigen Variablen hier anpassen, wie z. B. background-color für die Farbe der Schaltfläche, color für die Textfarbe, font-size für die Schriftgröße.

#overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 1111; cursor: pointer; } .petleo-button { background-color:#69487; border: none; color: white; padding: 12px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }