# Web: Kursübersicht einbinden

Quelle: https://musikschulverwaltung.de/wiki/web/kursuebersicht/ · Stand: 03.09.2026

---

Über das Anmeldeformular können Sie Fächer und Kurse zur Anmeldung anbieten. Möchten Sie eine Liste der angebotenen Fächer und Kurse auf Ihrer Internetseite anbieten? Verwenden Sie dafür gerne unsere Web-Komponente.

Folgend erhalten Sie Beispiele, wie Sie das Formular auf Ihrer Internetseite einbinden können. Als Beispiel verwenden wir hierbei den Formular-Alias "demo". Möchten Sie eines der Beispiele auf Ihrer Internetseite anwenden, tauschen Sie den Alias "demo" durch den Alias Ihres persönlichen Online-Formulars aus. Ihr Formular-Alias wird Ihnen in iMikel in den Einstellungen der [Online-Anmeldung](/wiki/imikel/tutorials/onlineanmeldung-personalisieren/#online-anmeldung-auf-internetseite-einbinden) dargestellt.

> **Wussten Sie schon?** Möchten Sie ein eigenes Formular einsetzen oder die Angebote auf Ihrer Internetseite platzieren? Wir stellen eine API bereit, mit welcher Sie die Angebote aus iMikel in Ihre eigenen Formulare oder Internetseite einbinden können. Sprechen Sie uns dazu gerne an.

**Quellcode**

```html
<script
  type="module"
  src="https://cdn.musikschulverwaltung.de/course-catalog/latest/main.js"
></script>
<course-catalog alias="demo"></course-catalog>
```

### Parameter für `<course-catalog>`

- **`alias`** (Pflicht): Eindeutige Kennung Ihrer Musikschule bzw. Ihres Online-Formulars.
  - Beispiel: `alias="demo"`
- **`accent-color`**: Akzentfarbe der Komponente.
  - Beispiel: `accent-color="#f39200"`
- **`darkmode`**: Steuert, ob die Komponente hell oder dunkel erscheint.
  - `darkmode="auto"`: folgt der Systemeinstellung
  - `darkmode="true"`: immer dunkel
  - `darkmode="false"`: immer hell
  - Hinweis: Ohne den Parameter folgt die Komponente der Systemeinstellung, sofern die einbettende Seite `<meta name="color-scheme" content="light dark">` erklärt - sonst bleibt sie hell.

**Vorschau**

<div class="embedded">
  <script type="module" src="https://cdn.musikschulverwaltung.de/course-catalog/latest/main.js"></script>
  <course-catalog alias="demo"></course-catalog>
</div>