Booking Widget einbinden: embed.js, Button-Aufruf, Multi-Praxis und Go-live-Checkliste

JavaScript-Einbindung (ein Standort)

Script mit der Praxis-ID im <head> der Website: <script src="https://dr-flex.de/embed.js?medicalPracticeId=[PraxisID]"></script>

Der CTA öffnet das Widget per JavaScript-Aufruf: <a href="javascript:toggleDrFlexAppointments()">Termin online buchen</a>

Mehrere Standorte (Multi-Praxis)

Script ohne Praxis-ID einbinden und die ID beim Aufruf übergeben: <script src="https://dr-flex.de/embed.js"></script> und <a href="javascript:toggleDrFlexAppointments([PraxisID])">Termin online buchen</a>

Mehrere Praxen lassen sich auch direkt im Script angeben: embed.js?medicalPracticeId=[PraxisID1]-[PraxisID2].

Optische Anpassung

Die Praxis hinterlegt im Praxis-Konfigurator einen Hex-Farbcode; das Widget rendert in der Markenfarbe und übernimmt Schriften und Buttons der Website. Eigenes CSS am Widget ist nicht nötig und wird nicht empfohlen, weil ein Update am Widget-Frontend die Anpassung überschreiben könnte.

Checkliste vor dem Go-live

1. embed.js ist im Head eingebunden und lädt ohne 404- oder CORS-Fehler.
2. Jeder CTA öffnet das Widget – Startseite, Hero, Footer, mobile Navigation.
3. Die Praxis-ID im Parameter medicalPracticeId stimmt (mit der Praxis abgleichen).
4. Das Widget zeigt freie Slots in Echtzeit – keine leere Liste, kein Fehlerzustand.
5. Eine Buchung wurde end-to-end durchgespielt: Slot, Formular, SMS-TAN, Bestätigung.
6. Deep-Links zeigen nur die gewünschten Terminarten bzw. Behandler; Wildcard-Muster und Fallback bei leerem Filter getestet.
7. Tracking-Events appointment_opened, send, confirm und tan_committed (mit ordinalBookingID) kommen in Konsole, dataLayer oder GA4 DebugView an.
8. Datenschutzerklärung der Praxis um den Dr. Flex Absatz ergänzt, Tracking nur nach Einwilligung.

Best Practices

Deep-Links von Anfang an mitdenken – eine „Anliegen-Cloud“ aus vier bis sechs Buttons prominent platzieren; einen mitscrollenden Buchungs-CTA im Header und einen Footer-CTA setzen; auf der Kontaktseite ist der Buchungs-CTA der Haupt-CTA; jede FAQ-Antwort mit Anliegen-Bezug mündet in einen passenden Deep-Link; Conversion-Ziel ausschließlich auf tan_committed.