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 in Frage kommt, bietet sich die Möglichkeit an, bestimmte Listen über ein iFrame direkt auf eurer Webseite zu integrieren. Folgt diesen Schritten, um dies umzusetzen:

Wenn eine direkte Verlinkung für euch nicht in Frage kommt, bietet sich die Möglichkeit an, bestimmte Listen über ein iFrame direkt auf eurer Webseite zu integrieren. Folgt diesen Schritten, um dies umzusetzen:

1. Anmeldung im Buchungsportal: Stellt sicher, dass ihr als Mitarbeiter im Buchungsportal angemeldet seid.

2. Navigieren zur Listenansicht: Geht in die Listenansicht von Gruppen, Kursen oder Veranstaltungen im Buchungsportal.

3. Abruf des HTML-Codes: Unten in der Liste findet ihr einen HTML-Code, den ihr in eure Webseite integrieren könnt.

4. Filtern und Aktualisieren: Auch hier könnt ihr die Listenansicht nach Tag/Kategorie filtern, und der HTML-Code aktualisiert sich automatisch entsprechend eurer Auswahl.

   • Beispiel: Angenommen, ihr habt verschiedene Junghundegruppen und habt diese über Tags kategorisiert. Wählt den entsprechenden Tag aus, beispielsweise "Junghunde", in der Listenansicht aus, scrollt ganz nach unten in die Liste und kopiert den HTML-Code.

5. Integration des HTML-Codes: Je nach Webseiten-System muss der HTML-Code als HTML-Element integriert werden.

6. Beratung des Webseiten-Betreibers: Bitte befragt euren Webseiten-Betreiber über das genaue Vorgehen bezüglich der Integration von HTML-Elementen.

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.