Webseiten

In diesem Artikel werden zwei verschiedene Methoden vorgestellt, um eure Webseite mit unserem Buchungsportal zu verbinden: die direkte Verlinkung und die Verwendung eines iFrames. Die direkte Verlinkung ermöglicht es Besuchern eurer Webseite, direkt zu den Buchungsoptionen zu gelangen, während ein iFrame es erlaubt, bestimmte Listen von Gruppen, Kursen oder Veranstaltungen aus dem Buchungsportal direkt in eure Webseite einzubetten, ohne dass Besucher eure Seite verlassen müssen. Die folgenden Abschnitte erläutern detailliert die Schritte für beide Methoden, damit ihr die für eure Bedürfnisse am besten geeignete Option auswählen könnt.

Verlinkung

Die einfachste Methode, um eure Webseite mit dem Buchungsportal zu verbinden, ist die direkte Verlinkung. Hier sind die Schritte, um dies zu tun:

1. Beschreibung eurer Kurse und Gruppen auf der Webseite: Zuerst solltet ihr eure Kurse und Gruppen detailliert auf eurer Webseite beschreiben. Gebt alle relevanten Informationen an, damit Interessierte genau wissen, was sie erwartet.

2. Integriert einen Link/Button: Fügt einen Link oder Button mit der Bezeichnung "Jetzt Termine buchen" hinzu. Dieser sollte direkt zum Buchungsportal führen.

3. Entscheidung über die Verlinkung: Ihr könnt wählen, ob ihr direkt auf die Detailansicht einer Gruppe verlinken möchtet oder auf die Listenansicht.

   • Beispiel für die Listenansicht: Angenommen, ihr habt verschiedene Junghundegruppen und habt diese über Tags kategorisiert. Wählt den entsprechenden Tag aus, beispielsweise "Junghunde", in der Listenansicht aus und kopiert den aktuellen Link in euren Browser. Diesen Link könnt ihr dann verwenden, um von eurer Webseite zu verlinken.

4. Einbau des Links: Sobald ihr den richtigen Link habt, fügt ihn an der entsprechenden Stelle auf eurer Webseite ein, damit Besucher direkt zu den Buchungsoptionen gelangen können.

Durch diese Verlinkung könnt ihr euren Besuchern einen direkten Zugang zu den Buchungsmöglichkeiten bieten und die Nutzung des Buchungsportals nahtlos in eure Webseite integrieren.

iFrame

Wenn eine direkte Verlinkung für euch nicht infrage kommt, könnt ihr bestimmte Ansichten über ein iFrame direkt in eure Webseite einbinden. So geht ihr vor:

• Geht zu Einstellungen > 🌐 Externe Einbindung.
• Wählt den gewünschten Ansichtstyp aus, z. B. Gruppen, Kurse, Kalender oder Anfragen.
• Je nach Ansichtstyp stehen euch verschiedene Darstellungsoptionen zur Verfügung, z. B. Listenansicht oder Detailansicht.
• Konfiguriert die Ansicht nach euren Wünschen.
• Unten wird euch eine Vorschau der eingebundenen Ansicht angezeigt.
• Wenn alles passt, kopiert den HTML-Code und fügt ihn in eure Webseite ein.
• Je nach verwendetem Webseiten-System muss der Code als HTML-Element eingebunden werden.
• Falls ihr unsicher seid, wie ihr den Code korrekt integriert, fragt euren Webseiten-Betreiber oder Administrator um Unterstützung.

Durch diese Schritte könnt ihr Listen von Gruppen, Kursen oder Veranstaltungen aus dem Buchungsportal direkt in eure Webseite einbinden, um euren Kunden einen nahtlosen Buchungsprozess zu bieten.

Was ist ein iFrame

Ein <iframe> ist ein HTML-Element, das verwendet wird, um eine andere HTML-Seite in eine Webseite einzubetten. Es steht für "Inline Frame" (zu Deutsch: Inline-Rahmen). Wenn du ein <iframe> in deine Webseite einfügst, kannst du eine separate Webseite innerhalb dieses Rahmens anzeigen, ohne dass die Benutzer die aktuelle Seite verlassen müssen.

Es funktioniert ähnlich wie ein Fenster in einem Fenster. Du bestimmst die Größe und den Ort des <iframe> auf deiner Seite und gibst die URL der Webseite an, die du in diesem Rahmen anzeigen möchtest. Das ermöglicht es dir, Inhalte von anderen Seiten einzubetten, wie z.B. Videos von YouTube oder interaktive Karten von Google Maps, ohne den Benutzer auf eine andere Webseite umzuleiten.

Kalender

Der Kalender kann problemlos auf deiner Webseite integriert werden, um deinen Kunden eine einfache Möglichkeit zu geben, verfügbare Termine und Kurse einzusehen. Die Integration erfolgt durch Einbetten eines iframe-Codes, den du auf deiner Webseite einfügen kannst. Hier ist ein Beispielcode für die Integration:

https://tenant.123hundeschule.test/kalender?embed=1

Diesen Code kannst du direkt in den HTML-Code deiner Webseite einfügen. Du kannst auch die Darstellung des Kalenders anpassen, indem du Parameter für die Ansicht hinzufügst.

Anpassbare Parameter

• initialView: Dieser Parameter bestimmt die Anfangsansicht des Kalenders. Du kannst zwischen folgenden Ansichten wählen:

  • dayGridWeek: Zeigt die Wochenansicht an
  • timeGridDay: Zeigt den aktuellen Tag mit stundenweiser Aufteilung.
  • listWeek: Zeigt die Termine als Liste an
  • dayGridMonth: Zeigt die Monatsansicht an

• initialViewMobile: Dieser Parameter bestimmt die Anfangsansicht des Kalenders auf mobilen Geräten. Die möglichen Werte sind die gleichen wie bei initialView:

  • dayGridWeek
  • timeGridDay
  • listWeek
  • dayGridMonth

Um eine dieser Ansichten zu verwenden, musst du den entsprechenden Parameter im iframe-Link anpassen. Zum Beispiel:

https://tenant.123hundeschule.test/kalender?embed=1&initialView=dayGridWeek

Für die mobile Ansicht kannst du den Parameter initialViewMobile hinzufügen:

https://tenant.123hundeschule.test/kalender?embed=1&initialView=dayGridWeek&initialViewMobile=listWeek

Durch die Kombination der Parameter initialView und initialViewMobile kannst du steuern, wie der Kalender auf verschiedenen Geräten angezeigt wird. Hier sind einige Beispiele:

• Desktop: Wochenansicht, Mobil: Listenansicht

  https://tenant.123hundeschule.test/kalender?embed=1&initialView=dayGridWeek&initialViewMobile=listWeek
  

• Desktop: Monatsansicht, Mobil: Tagesansicht

  https://tenant.123hundeschule.test/kalender?embed=1&initialView=dayGridMonth&initialViewMobile=timeGridDay
  

Durch die Anpassung dieser Parameter kannst du sicherstellen, dass der Kalender sowohl auf Desktop- als auch auf mobilen Geräten optimal angezeigt wird.