Der gleiche Block, in eurer Seite
Unten steht der Buchungsblock so, wie er in einer bestehenden Seite liegt: zwei Zeilen Code in Webflow, der Rest passiert von selbst. Die Höhe wächst mit dem Inhalt, ein Scrollbalken im Block entsteht nicht.
Zweispaltig ab 720px Blockbreite: links die Argumente, rechts die Buchung. Für eine eigene Unterseite oder einen breiten Abschnitt.
Abschnitt der bestehenden Website
Bereit für den nächsten Schritt?
Dieser Text und alles drumherum gehört zur bestehenden Seite. Nur der Block darunter kommt aus der Buchungs-Anwendung.
Oder als Overlay am bestehenden Button
Für die Buttons, die heute schon auf der Seite stehen. Ein Datenattribut reicht, der Rest bleibt wie er ist.
<button data-heartbeat-booking-open data-variant="signature"> Jetzt Erstberatung sichern </button>
Das ist alles, was in Webflow eingefügt wird
<div data-heartbeat-booking data-variant="signature"></div> <script src="https://buchung.heartbeat-consulting.com/heartbeat-booking.js" defer></script>
Die Anwendung liegt auf einer eigenen Subdomain, etwa buchung.heartbeat-consulting.com. Damit bleiben Cookies, Tracking und Rechtstexte in der eigenen Domain, anders als bei einem Calendly-Widget. UTM-Parameter der Seite werden automatisch an die Buchung durchgereicht.
Tracking auf der Seite
window.addEventListener("heartbeat-booking:booked", function (e) {
gtag("event", "termin_gebucht", { start: e.detail.startTime });
});Wichtig: Dieses Ereignis ist Komfort für GTM, nicht der Nachweis der Buchung. Die läuft serverseitig und geht auch dann nicht verloren, wenn ein Blocker das Skript stoppt oder der Besucher die Seite zu früh schliesst. Genau das ist der Unterschied zum heutigen Aufbau.