Embed Widget - Dokumentation

Schnellstart

Kopieren Sie diesen Code in Ihre Website, um Ihre Kursliste einzubetten:

<!-- Kursator Widget -->
<div id="kursator-widget"></div>
<script src="https://www.kursator.de/embed/widget.js"></script>
<script>
  KursatorWidget.init({
    container: '#kursator-widget',
    provider: 'IHR-ANBIETER-SLUG',
    apiKey: 'IHR-API-KEY'
  });
</script>
            

Widget-Vorschau

Das Widget wird hier angezeigt, wenn Sie es auf Ihrer Website einbetten

Widget-Typen

📋 Kursliste

Zeigt alle Ihre Kurse in einer übersichtlichen Liste

type: 'list'

📅 Kalender

Monatsansicht mit allen Kursterminen

type: 'calendar'

🎫 Einzelkurs

Details und Buchung für einen bestimmten Kurs

type: 'course'

🛒 Buchungsformular

Nur das Buchungsformular ohne Kursliste

type: 'booking'

Konfiguration

Erforderliche Parameter

Parameter	Beschreibung
`container`	CSS-Selektor für das Container-Element
`provider`	Ihr Anbieter-Slug
`apiKey`	Ihr API-Schlüssel

Optionale Parameter

Parameter	Standard	Beschreibung
`type`	'list'	Widget-Typ (list, calendar, course, booking)
`courseSlug`	-	Für type='course': Kurs-Slug
`category`	-	Nach Kategorie filtern
`limit`	10	Anzahl der angezeigten Kurse
`theme`	'light'	Farbschema (light, dark, auto)
`primaryColor`	'#6366f1'	Hauptfarbe (Hex-Code)
`locale`	'de'	Sprache (de, en)

Beispiele

Kursliste mit Filter

KursatorWidget.init({
  container: '#widget',
  provider: 'kreativwerkstatt-berlin',
  apiKey: 'abc123...',
  type: 'list',
  category: 'toepfern',
  limit: 6,
  primaryColor: '#10b981'
});
            

Kalender-Ansicht

KursatorWidget.init({
  container: '#kalender',
  provider: 'kreativwerkstatt-berlin',
  apiKey: 'abc123...',
  type: 'calendar',
  theme: 'dark'
});
            

Einzelner Kurs mit Buchung

KursatorWidget.init({
  container: '#kurs-widget',
  provider: 'kreativwerkstatt-berlin',
  apiKey: 'abc123...',
  type: 'course',
  courseSlug: 'toepferkurs-anfaenger'
});
            

Events

Das Widget löst Events aus, auf die Sie reagieren können:

KursatorWidget.init({
  container: '#widget',
  provider: 'mein-anbieter',
  apiKey: 'abc123...',
  
  // Wird aufgerufen wenn ein Kurs angeklickt wird
  onCourseClick: function(course) {
    console.log('Kurs geklickt:', course.name);
  },
  
  // Wird aufgerufen wenn eine Buchung erfolgreich war
  onBookingComplete: function(booking) {
    console.log('Buchung erfolgreich:', booking.id);
    // z.B. zu Danke-Seite weiterleiten
    window.location.href = '/danke?booking=' + booking.id;
  },
  
  // Wird aufgerufen bei Fehlern
  onError: function(error) {
    console.error('Widget-Fehler:', error);
  }
});
            

Anpassung

Das Widget verwendet CSS-Variablen, die Sie überschreiben können:

<style>
  #kursator-widget {
    --ks-primary: #10b981;
    --ks-primary-hover: #059669;
    --ks-text: #1f2937;
    --ks-text-muted: #6b7280;
    --ks-bg: #ffffff;
    --ks-bg-secondary: #f9fafb;
    --ks-border: #e5e7eb;
    --ks-radius: 8px;
    --ks-font: 'Inter', sans-serif;
  }
</style>
            