Widgets/Webseiten-integration

Mit Course Finder können Sie Ihr Kursangebot ganz bequem in Ihre vorhanden Webseite/Homepage einbinden, sodass Ihre Teilnehmer/Kunden sofort ein Überblick über die Angebote bekommen sowie diese direkt über die eigene Webseite buchen können.

Um ein neues Widget für die Einbindung in die eigene Webseite zu erstellen, gehen Sie bitte wir folgt vor:

1. Klicken Sie in der oberen Menüleiste in der Kursanbieteransicht auf Einstellungen.
2. Klicken Sie auf Webseiten-integration/Widget in der linken Menüleiste.
3. Klicken Sie nun auf Neues Widget.
4. Ein Fenster öffnet sich.
5. Geben Sie dem Widget einen Namen sofern Sie mehrere Widgets definiert haben um den Überblick zu behalten.
6. Wählen Sie aus ob Ihre Kursangebote in Form eines Wochenkalenders oder als Liste, oder beides auf der Webseite angezeigt werden sollen.
7. Für die Listenanzeige, wählen Sie aus welche Informationen in Spaltenform die Liste enthalten soll. Sie können auswählen, welche Spalten angezeigt werden sollen sowie in welcher Reihenfolge.
8. Mit dem Kursfilter können Sie zudem noch Einschränken, ob alle oder nur bestimmte Kurse in dem Widget angezeigt werden sollen.
9. Klicken Sie anschließend auf Speichern
10. Anschließend kopieren Sie den HTML-Quellcode in Ihre eigene Webseite. Über die Vorschaufunktion können Sie bereits vorab testen, wie das Widget in Ihrer Webseite angezeigt werden würde.

Erweiterte Einstellungen

In den Erweiterte Einstellungen können Sie weitere Einstellungen, die Hauptsächlich das Aussehen des Widgets betreffen vornehmen.

Button-text

Hier können Sie bestimmen welcher Text auf den Buttons erscheinen soll. Standardmäßig ist der Buchen button mit dem Text Buchen sowie der Wartelistenbutton mit dem Text Warteliste belegt.

Klick auf Buchen-button

Ein Klick auf den Buchen-button bei einem Kursangebot in der Liste oder der Kalenderansicht kann Ihre Webseitenbesucher entweder auf das Angebot auf die Course Finder Webseite weiterleiten, wo die Teilnehmer dann die Buchung vornehmen können.

Alternativ kann auch das Anmeldeformular zum Vornehmen der Buchung direkt in der eigenen Webseite angezeigt werden.

Einbettung

Das Widget kann entweder direkt oder als iframe via sog. DOM-Manipulation in den Vorhanden HTML Baum der Webseite eingebettet werden.

DOM-Tree

Bei direkter Einbettung überträgt sich das Design der eigenen Webseite direkt auf das Widget sodass Schriftart, -größe, Farben und Buttons sofort den gleichen Stil aufweisen wie andere Elemente in der Webseite.

Iframe

Bei Einbettung via iframe müssen Sie mittels CSS-Stylesheets Schriftart, -größe, Farben etc. selbst festlegen, damit sich das Widget optisch gut in die vorhandene Webseite anpasst.

Standardmäßig benutzt das Widget die CSS-Klassen sowie das Design von dem sog. Bootstrap Framework. Basierend auf dem vorhanden Bootstrap CSS-Stylesheet können Sie ganz einfach ohne große Programmierkentnisse Ihr Design auf folgender Webseite anpassen: https://bootstrap.build/app

Die CSS-Klassen sowie welche CSS Stylesheets genutzt werden sollen können Sie unter CSS style sheets, CSS Tabellendefinitionen sowie CSS Formulardefinitionen selbst anpassen.

Filter für KurseId

In diesem Feld können Sie einen regulären Ausdruck eingeben der als Filter für die KursID verwendet wird. Nutzen Sie z.B. AF-DD-2105 als KursID für einen Ihrer Aquafitnesskurse, dann werden über den Filter AF-DD-.... alle Aquaftinesskurse mit dieser KursID unabhängig der letzten vier Ziffern angezeigt. Ein Babyschwimmkurs mit einer KursID BS-DD-2105 jedoch nicht.