Die Einbindung der apocollect Terminbuchung direkt in die eigene Apotheken-Website ermöglicht es Kunden, Termine wahrzunehmen, ohne die gewohnte Umgebung eurer Homepage zu verlassen. Technisch wird dies über einen sogenannten iFrame gelöst.

Ein iFrame ist ein Fenster auf eurer Website, in dem ein anderer Inhalt – in diesem Fall das apocollect Buchungs-Tool – geladen wird.

• Nutzen: Die Kunden bleiben auf eurer Website und müssen nicht auf eine andere Website wechseln.

• Zielgruppe: Diese Lösung eignet sich für Apotheken, die eine eigene Website pflegen und den Buchungsprozess nahtlos in ihr Design integrieren möchten.

Um die Terminbuchung einzubinden, muss der folgende HTML-Code an der entsprechenden Stelle im Quelltext eurer Website eingefügt werden:

HTML

<iframe
    src="https://IHRE-DOMAIN.de?iframe=true&info=true&filter=true"
    title="NAME EURER APOTHEKE"
    frameborder="0"
    style="width: 100%; min-height: 800px; border: none;"
></iframe>

Damit die Einbindung korrekt funktioniert, müssen bestimmte Werte im Code angepasst werden:

1. Die URL (src) und Steuerungsparameter

Die URL ist das Ziel des iFrames. Hier hinterlegt ihr den Link zu eurem Standort oder einer Leistung. Die Zusätze am Ende der URL steuern das Verhalten:

2. Barrierefreiheit (title)

Hinterlegt bei title den Namen eurer Apotheke. Achtet darauf, dass der Name zwingend in Anführungszeichen stehen muss (z. B. title="Sonnen-Apotheke"). Dies ist technisch notwendig und hilft zudem sehbehinderten Menschen sowie der Suchmaschinenoptimierung (SEO).

3. Optische Darstellung (style)

• width: 100%: Wir empfehlen grundsätzlich die volle Breite zu nutzen, damit sich der Kalender flexibel an das Layout eurer Website anpasst.

• min-height: 800px: Dies ist der empfohlene Standardwert, damit die Buchungsschritte ohne inneres Scrollen vollständig sichtbar sind. Ein kleinerer Wert wird nicht empfohlen, da Inhalte sonst abgeschnitten werden könnten.

  • Hinweis zur flexiblen Höhe: Optional kann hier auch 100vh genutzt werden (entspricht 100% der Bildschirmhöhe). Dies ist besonders dann sinnvoll, wenn der Kalender das primäre Element auf einer Seite ist. Details dazu findet ihr unten im FAQ-Bereich.

• border: none: Standardmäßig zeigen viele Browser einen Rahmen um iFrames an. Mit diesem Befehl wird der Rahmen ausgeblendet, sodass die Buchung wie ein nativer Bestandteil eurer Website wirkt.

Du kannst die Anzeige im iFrame über kleine Zusätze in der URL (die sogenannten Parameter) steuern:

Falls ihr auf eurer Website für verschiedene Leistungen (z. B. Grippeschutz, Medikationsanalyse, Reiseberatung) eigene Unterseiten habt, könnt ihr aus der apocollect Terminbuchung die entsprechende Dienstleistung direkt verlinken

1. Navigiert in apocollect zur Administration > Terminbuchung > Dienstleistung.

2. Wählt die spezifische Dienstleistung aus.

3. Folgt dem bereitgestellten Direktlink.

4. Kopiert die URL

5. Ersetzt im obigen Code das IHRE-DOMAIN.de durch diesen spezifischen Link. Achtet darauf, dass die Parameter ?iframe=true... weiterhin am Ende stehen bleiben.

Falls ihr auf eurer Website für einen einzelnen Terminplan eigene Unterseiten habt, könnt ihr aus der apocollect Terminbuchung den Terminplan direkt verlinken

1. Navigiert in apocollect zur Administration > Terminbuchung > Terminpläne.

2. Wählt einen spezifischen Terminplan aus.

3. Folgt dem bereitgestellten Direktlink.

4. Kopiert die URL

5. Ersetzt im obigen Code das IHRE-DOMAIN.de durch diesen spezifischen Link. Achtet darauf, dass die Parameter ?iframe=true... weiterhin am Ende stehen bleiben.

Optional: Du kannst dabei die Filterleiste (Standort, Dienstleitung, Datum) ausblenden, damit der Kunde direkt und ablenkungsfrei den Buchungsprozess durchführt.

Ändere dazu den Parameter in der Domain von filter=true in filter=false. Bsp: "https://IHRE-DOMAIN.de?iframe=true&info=false&filter=false"

Die Angabe 100vh sorgt dafür, dass der iFrame exakt die Höhe des aktuellen Browserfensters einnimmt.

• Wann sinnvoll: Dies ist ideal für Landingpages, die ausschließlich der Terminbuchung dienen und außer dem Header keine weiteren Inhalte haben.

• Wann nicht sinnvoll: Wenn eure Website einen hohen Header oder weiteren Text unter dem Kalender hat. In diesem Fall entsteht ein "doppelter Scrollbalken" (einer für die Website, einer für den iFrame), was die Bedienung für eure Kunden erschwert. In den meisten Fällen ist die feste Angabe von 800px daher die stabilere Lösung.