Online-Rezeption auf Ihrer Website einbetten

Die Online-Rezeption lässt sich auf jeder Website einbetten – unabhängig vom CMS (WordPress, Wix, Jimdo, Joomla, statisches HTML).

Es gibt drei Varianten:

• Schwebender Button – schwebender Button unten rechts, öffnet die Online-Rezeption als modalen Dialog. Empfohlen für die meisten Praxen.
• Reines Iframe – Online-Rezeption wird direkt auf einer Unterseite der Praxishomepage eingebettet. Ohne JavaScript.
• Sprechzeiten-Widget – nur die Öffnungszeiten als kompaktes Iframe.

Variante 1: Schwebender Button (empfohlen)

Eine einzige Zeile JavaScript reicht. Fügen Sie das folgende Snippet vor dem schließenden </body>-Tag Ihrer Website ein. Das fertige Snippet mit Ihrer Praxis-ID finden Sie unter Einstellungen › Online-Rezeption.

<script
  src="https://app.drwait.de/online-rezeption.js"
  data-place-id="IHRE-PRAXIS-ID"
></script>

Was Patienten sehen

• Auf dem Desktop: ein runder Button unten rechts. Klick öffnet einen Dialog (400 × 600 px) mit der Online-Rezeption.
• Auf dem Smartphone: derselbe Button. Klick öffnet die Online-Rezeption im Vollbild.
• Im Dialog stehen oben links ein Zurück-Pfeil (erscheint nach Navigation in den Buchungsfunnel) und oben rechts ein Schließen-Kreuz.

Anpassungen

Über zusätzliche data--Attribute können Sie Aussehen und Verhalten anpassen:

Attribut	Werte	Standard	Beschreibung
data-place-id	UUID	–	Pflicht. Ihre Praxis-ID.
data-position	bottom-right, bottom-left, top-right, top-left	bottom-right	Position des Buttons.
data-color	Hex-Farbe	#0B7285	Hintergrundfarbe des Buttons (CI-Anpassung).
data-auto-open	true, false	false	Öffnet den Dialog automatisch beim Laden.
data-base-url	URL	https://app.drwait.de	Nur für lokale Tests / Staging.

Beispiel mit roter Farbe und Position oben links:

<script
  src="https://app.drwait.de/online-rezeption.js"
  data-place-id="IHRE-PRAXIS-ID"
  data-position="top-left"
  data-color="#c0392b"
></script>

Variante 2: Reines Iframe

Wenn Sie kein JavaScript einbinden möchten oder die Online-Rezeption auf einer eigenen Unterseite (z. B. /termin-buchen) anzeigen wollen, betten Sie sie als Iframe ein:

<iframe
  id="drwait-rezeption"
  src="https://app.drwait.de/r/IHRE-PRAXIS-ID?embed=1"
  style="width: 100%; min-height: 600px; border: 0; display: block"
  allow="geolocation"
  title="Online-Rezeption"
></iframe>

<script>
  window.addEventListener("message", function (e) {
    var iframe = document.getElementById("drwait-rezeption")
    if (
      iframe &&
      e.source === iframe.contentWindow &&
      e.data &&
      e.data.type === "drwait-height" &&
      typeof e.data.height === "number"
    ) {
      iframe.style.height = e.data.height + "px"
    }
  })
</script>

Der Parameter ?embed=1 versteckt die Header-Leiste der Online-Rezeption und sorgt dafür, dass interne Links (z. B. "Termin buchen") im selben Iframe öffnen, statt einen neuen Tab zu starten. Das kleine Script darunter passt die Höhe des Iframes automatisch an den Inhalt an.

Variante 3: Nur Sprechzeiten

Wenn Sie ausschließlich die Sprechzeiten anzeigen möchten – z. B. im Footer Ihrer Website – nutzen Sie das Sprechzeiten-Widget unter /r/<Praxis-ID>/opening-hours:

<iframe
  id="drwait-hours"
  src="https://app.drwait.de/r/IHRE-PRAXIS-ID/opening-hours"
  style="width: 100%; min-height: 200px; border: 0; display: block"
  title="Sprechzeiten"
></iframe>

<script>
  window.addEventListener("message", function (e) {
    var iframe = document.getElementById("drwait-hours")
    if (
      iframe &&
      e.source === iframe.contentWindow &&
      e.data &&
      e.data.type === "drwait-height" &&
      typeof e.data.height === "number"
    ) {
      iframe.style.height = e.data.height + "px"
    }
  })
</script>

Optionale Parameter

Parameter	Beschreibung
branchOfficeId=<ID>	Nur die Sprechzeiten einer bestimmten Filiale anzeigen.
roomId=<ID>	Nur die Sprechzeiten einer einzelnen Warteschlange anzeigen.
theme=dark oder theme=light	Helles oder dunkles Farbschema (Standard: hell).

Beispiel – nur Sprechzeiten der Filiale xyz im dunklen Modus:

https://app.drwait.de/r/IHRE-PRAXIS-ID/opening-hours?branchOfficeId=xyz&theme=dark

Test in der Live-Vorschau

Im Praxis-Manager unter Einstellungen › Online-Rezeption sehen Sie die Online-Rezeption in einer Live-Vorschau – exakt so, wie Patienten sie sehen. Nach jeder Änderung wird die Vorschau automatisch neu geladen.

Häufige Probleme

• Der Button erscheint nicht. Prüfen Sie, ob das <script>-Tag nicht durch ein anderes JavaScript blockiert wird (Browser-Konsole öffnen). Bei Content-Security-Policy-Einschränkungen muss app.drwait.de als zugelassene Quelle ergänzt werden.
• Das Iframe wird nicht hoch genug. Stellen Sie sicher, dass das message-Listener-Script auf der Seite eingebunden ist und der id-Attributwert übereinstimmt.
• "Termin buchen" funktioniert nicht. Prüfen Sie, ob unter Termine der Hauptschalter für Online-Termine aktiv ist und mindestens ein Termintyp für Online-Buchung freigegeben ist.