CourseFinder - Einbettungs-Dokumentation

Anleitung zur Einbindung des CourseFinder in Ihre Website

Voraussetzungen

Der CourseFinder ist ein Zusatzmodul für die Verwaltungs-Software StudioIntern. Das bedeutet, dass er nur in Verbindung mit StudioIntern funktioniert.

Um den CourseFinder zu verwenden, benötigen Sie also ein Ballett- oder Tanzschule, ein Yoga-Studio eine ähnliche Einrichtung und ein StudioIntern-Konto. Übrigens: Sie können StudioIntern 2 Monate lang komplett kostenlos und risikofrei testen.

Geben Sie bei der Registrierung Ihres StudioIntern-Kontos an, dass Sie den CourseFinder ausprobieren möchten. Auch dieser ist für 2 Monate lang kostenlos und risikofrei verfügbar. Sie erhalten dann im Anschluss einen Zugang zu Ihrem Dashboard, in welchem Sie den HTML-Code finden.

💡 Tipp: Sie benötigen keine Programmierkenntnisse, um den CourseFinder einzubinden. Wenn Sie bereits HTML-Code in Ihre Website einfügen können, schaffen Sie das auch! Es ist sehr einfach und schnell gemacht.

Schritt 1: Embed-Code erhalten

Loggen Sie sich in Ihr Dashboard ein und kopieren Sie den Embed-Code, der dort angezeigt wird.

  1. Scrollen Sie zum Abschnitt "CourseFinder Embed-Code"
  2. Klicken Sie auf den Button "Kopieren"
  3. Der Code wurde in Ihre Zwischenablage kopiert

Hinweis: Falls kein Embed-Code angezeigt wird, wenden Sie sich bitte an den Administrator, um die Embed-Funktion zu aktivieren.

Schritt 2: Code in Ihre Website einfügen

Der Embed-Code besteht aus zwei Teilen: einem <div>-Element und einem <script>-Tag. Beide müssen in Ihre Website eingefügt werden.

Wo soll der Container hin (der Platzhalter)?

Das <div>-Element ist sozusagen der Platzhalter (Container) für den CourseFinder. Es wird an der Stelle eingefügt, wo der CourseFinder erscheinen soll (Ausnahme: Overlay-Modus, siehe unten).

Wo soll das <script>-Tag hin?

Das <script>-Tag enthält den Programmcode, der die Funktionen des CourseFinders bereitstellt. Der beste Platz ist direkt nach dem <div>-Element. Aber auch ganz am Ende der Seite ist in Ordnung.

Beispiel: Einfache Einbindung

Hier sehen Sie ein Beispiel, wie der Code in eine HTML-Seite eingefügt wird: 

<!DOCTYPE html>
<html>
<head>
    <title>Meine Tanzschule</title>
</head>
<body>
    <h1>Willkommen auf unserer Website</h1>
    
    <!-- CourseFinder einbinden -->
    <div id="si-coursefinder"></div>
    <script 
      src="https://coursefinder.studiointern.de/cdn/v1/si-coursefinder.min.js"
      data-tenant="ihr-studiointern-kurzname"
      data-signature="eine-signatur-die-im-dashboard-angezeigt-wird"
      data-container="#si-coursefinder">
    </script>
</body>
</html>

Die Attribute, die mit data- beginnen, steuern die Verbindung zum StudioIntern-Server und das Verhalten des CourseFinders. Die hier im Beispielcode verwendeten Attribute sind die mindestens erforderlichen, um den CourseFinder einzubinden. Es gibt aber noch weitere. Sie finden eine Übersicht aller verfügbaren Attribute weiter unten auf dieser Seite.

Das Attribut data-container="#si-coursefinder" muss mit dem Wert des id-Attributs des <div>-Elements übereinstimmen. In diesem Fall ist es si-coursefinder. Beachten Sie, dass das Raute-Zeichen # nur im Skript-Tag, aber nicht im HTML-Code vorangestellt wird. Sie können den Namen si-coursefinder aus dem Beispielcode übernehmen oder einen anderen Namen verwenden.

Overlay-Modus (Lightbox)

Der CourseFinder kann auch in einem Overlay angezeigt werden, das sich öffnet, wenn Besucher auf einen Button oder Link klicken. Ein Overlay ist ein »schwebendes« Fenster, welches die eigentliche Seite überlagert (deswegen auch Overlay genannt). Sie kennen das sicherlich von Lightbox-Fenstern, die sich öffnen, wenn man auf ein Bild klickt, um das Bild vergrößert zu sehen.

So aktivieren Sie den Overlay-Modus:

Fügen Sie dem <script>-Tag das Attribut data-overlay-mode="true" hinzu: 

<script 
  src="..."
  data-tenant="..."
  data-signature="..."
  data-overlay-mode="true"
  ...>
</script>

Button/Link zum Öffnen erstellen:

Erstellen Sie einen Button oder Link mit dem Attribut data-si-cf-trigger: 

<!-- Als Button -->
<button data-si-cf-trigger>Kurs finden</button>

<!-- Als Link -->
<a href="#" data-si-cf-trigger>Kurs finden</a>

Wenn Besucher auf diesen Button oder Link klicken, öffnet sich das Overlay mit dem CourseFinder.

Programmier-Modus

Der CourseFinder kann auch durch einen eigenen Programmcode gestartet werden. Damit können Sie z.B. den CourseFinder automatisch starten, sobald eine bestimmte Seite geladen wird.

Hier ist ein Beispiel, wie Sie den CourseFinder mit einem eigenen Programmcode starten können, sobald die Seite geladen wurde: 

// JavaScript Code
document.addEventListener('DOMContentLoaded', function() {
    window.siCourseFinder.openOverlay();
});

Um den CourseFinder per JavaScript zu schließen, lautet die Anweisung: 

// JavaScript Code
window.siCourseFinder.closeOverlay();

Anpassungsmöglichkeiten

Der CourseFinder kann an Ihr Design angepasst werden. Hier sind die Optionen:

Texte anpassen

Sie können die Hauptüberschrift und den Untertitel des CourseFinders anpassen:

  • data-main-title - Hauptüberschrift (Standard: "Finde Deinen Kurs!")
  • data-main-subtitle - Untertitel (Standard: "Mit ein paar Klicks zur passenden Probestunde")

Beispiel: 

<script 
  src="..."
  data-tenant="..."
  data-main-title="Kurs finden"
  data-main-subtitle="Wählen Sie den passenden Kurs für sich oder Ihr Kind"
  ...>
</script>

Farben anpassen

Sie können verschiedene Farben über Attribute im <script>-Tag anpassen:

  • data-primary-color - Primärfarbe (z.B. #b9b564)
  • data-primary-text-color - Textfarbe auf primärer Farbe
  • data-submit-button-background - Hintergrundfarbe des Submit-Buttons
  • data-submit-button-text - Textfarbe des Submit-Buttons
  • data-select-item-bg - Hintergrundfarbe der Auswahl-Items
  • data-select-item-text - Textfarbe der Auswahl-Items
  • data-container-background - Hintergrundfarbe des Containers
  • data-container-text - Textfarbe des Containers

Beispiel: 

<script 
  src="..."
  data-tenant="..."
  data-primary-color="#FF5733"
  data-submit-button-background="#374d09"
  ...>
</script>

Wenn Sie mit den kryptischen Farbwerten nichts anfangen können, wenden Sie sich an Ihren Webdesigner oder Ihre Internetagentur.

Altersauswahl-Modus

Sie können zwischen zwei Modi für die Altersauswahl wählen:

  • data-ages-selection-mode="slider" - Slider-Ansicht (Standard)
  • data-ages-selection-mode="classic" - Klassische Box-Ansicht mit Bildern

Sterne anzeigen

Bei der Level-Auswahl können Sterne angezeigt werden:

  • data-display-stars="true" - Sterne anzeigen (Standard)
  • data-display-stars="false" - Sterne ausblenden

Kalender-Symbol anzeigen

Bei der Terminauswahl kann ein Kalender-Symbol angezeigt werden:

  • data-display-date-icons="true" - Kalender-Symbol anzeigen (Standard)
  • data-display-date-icons="false" - Kalender-Symbol ausblenden

Häufige Fragen

Funktioniert der CourseFinder auf mobilen Geräten?

Ja, der CourseFinder ist vollständig responsiv und funktioniert auf allen Geräten, einschließlich Smartphones und Tablets.

Kann ich den CourseFinder auch in einer WordPress-Website einbinden?

Ja, der CourseFinder kann mit dem oben gezeigten Embed-Code auch in einer WordPress-Website eingebunden werden.

Was passiert, wenn ich den Code ändere?

Sie können die Farben und andere Attribute jederzeit anpassen. Änderungen werden sofort wirksam, sobald die Seite neu geladen wird.

⚠️ Wichtig: Wenn Sie die Werte für src, data-tenant oder data-signature ändern, wird der CourseFinder nicht mehr funktionieren.

Brauche ich spezielle Berechtigungen?

Der Embed-Code funktioniert nur auf der Domain, die bei der Signatur-Generierung angegeben wurde. Dies dient der Sicherheit und verhindert unbefugte Nutzung.

Woher kennt der CourseFinder meine Kurse und Termine?

Der CourseFinder ist mit Ihrem StudioIntern-Konto verbunden. Dort erstellen Sie auch die Altersgruppen, Level und Stile und fügen eigene Bilder hinzu (optional). Im StudioIntern-Backend des CourseFinders geben Sie außerdem an, welche konkreten Kurse für welche Altersgruppen, Level und Stile passend sind. Diese Daten werden dann von StudioIntern an den CourseFinder übermittelt und sind immer aktuell.

Hilfe und Support

Falls Sie Probleme bei der Einbindung haben oder Fragen haben, wenden Sie sich bitte an den Administrator oder den Support.