Live Demo

Hier siehst du die Klapprad-Termine als eingebettete Web Component:

So einfach ist die Einbettung

Andere Websites müssen nur diese 2 Zeilen Code einfügen:

<script src="https://klapprad-events.de/api/klapprad-termine.js"></script> <klapprad-termine></klapprad-termine>
Hinweis: Das war's! Keine weiteren Konfigurationen oder Abhängigkeiten nötig.

Features der Web Component

🎨 Automatisches Styling

Die Component bringt ihr eigenes, responsives Design mit. Passt sich automatisch an die Website an.

📱 Responsive

Funktioniert perfekt auf Desktop, Tablet und Smartphone. Keine Größenprobleme wie bei Iframes.

⚡ Schnell

Lädt nur die nötigen Daten und cached sie automatisch. Bessere Performance als Iframes.

🔗 Interaktiv

Klick auf Termine öffnet die Detailseite. Links funktionieren nahtlos in der Website.

🛡️ Sicher

Shadow DOM isoliert das Styling. Keine Konflikte mit der Host-Website.

🔧 Wartungsfrei

Updates werden automatisch übernommen. Keine manuellen Updates nötig.

Technische Details

Web Component Standard: Verwendet moderne Web Components (Custom Elements v1)

Browser Support: Alle modernen Browser (Chrome, Firefox, Safari, Edge)

Datenquelle: JSON API mit CORS-Unterstützung

Größe: ~15KB JavaScript + CSS (minifiziert)