Widget lädt nicht oder Stile sind fehlerhaft

Schnelldiagnose

Führen Sie vor der Analyse spezifischer Probleme eine Grundprüfung durch:

1. Öffnen Sie die Seite mit dem Widget.
2. Drücken Sie F12 (oder Cmd+Option+I auf Mac) -> Reiter Console.
3. Suchen Sie nach Fehlern mit tikento, widget.js, CSP oder CORS.
4. Prüfen Sie den Reiter Network -- finden Sie die Anfrage an tikento.com/widget.js und stellen Sie sicher, dass der Status 200 ist.

Problem: Widget lädt überhaupt nicht

Ursache 1: Content Security Policy (CSP) blockiert das Skript

Symptome:

• Formular erscheint nicht.
• In der Konsole: Refused to load the script 'https://tikento.com/widget.js' because it violates the following Content Security Policy directive: "script-src ...".

Lösung:

Fügen Sie tikento.com zur script-src-Direktive Ihrer CSP-Policy hinzu:

script-src 'self' https://tikento.com;

Wenn Sie ein Meta-Tag verwenden:

<meta http-equiv="Content-Security-Policy"
  content="script-src 'self' https://tikento.com;">

Möglicherweise müssen Sie auch connect-src https://tikento.com für API-Anfragen des Widgets und style-src 'unsafe-inline' https://tikento.com für Stile hinzufügen.

Ursache 2: Falsche eventId

Symptome:

• Skript wird geladen (200 im Network), aber das Formular wird nicht gerendert.
• In der Konsole: [tikento] Event not found oder [tikento] Invalid eventId format.

Lösung:

1. Öffnen Sie die Veranstaltung im tikento-Dashboard.
2. Wechseln Sie zum Reiter Registrierung -> Widget für Website.
3. Kopieren Sie die richtige UUID aus dem Feld oder dem fertigen Widget-Code.
4. Stellen Sie sicher, dass das Attribut data-tikento-widget die UUID ohne Leerzeichen und überflüssige Zeichen enthält.

<!-- Richtig -->
<div data-tikento-widget="550e8400-e29b-41d4-a716-446655440000"></div>

<!-- Falsch -->
<div data-tikento-widget="IHRE_EVENT_ID"></div>

Ursache 3: Skript nicht eingebunden oder doppelt eingebunden

Symptome:

• Der div-Container ist auf der Seite vorhanden, aber das Formular erscheint nicht.
• Keine Fehler in der Konsole, keine Anfrage an widget.js im Network.

Lösung:

Stellen Sie sicher, dass der <script>-Tag auf der Seite vorhanden ist und genau einmal geladen wird:

<script src="https://tikento.com/widget.js" async defer></script>

Einige Website-Baukästen (Tilda, Wix) erfordern das Hinzufügen von Skripten in spezielle Blöcke. Siehe Installation auf Tilda, Webflow, Wix.

Problem: CORS-Fehler

Symptome:

• Formular beginnt zu laden, aber Daten (Felder, Tickets) werden nicht geladen.
• In der Konsole: Access to fetch at 'https://tikento.com/api/...' from origin 'https://your-site.com' has been blocked by CORS policy.

Lösung:

Bei Tarifen Pro und höher müssen Sie Ihre Website-Domain zur Liste der erlaubten Quellen hinzufügen:

1. Im Dashboard: Veranstaltung -> Registrierung -> Widget -> Erlaubte Domains.
2. Fügen Sie Ihre Website-Domain hinzu (z. B. example.com oder *.example.com).
3. Klicken Sie auf Speichern.

Änderungen werden innerhalb einer Minute wirksam (nach Invalidierung des Cache widget:origins:{eventId}).

Beim Free-Tarif gelten keine CORS-Einschränkungen -- das Widget funktioniert auf jeder Domain.

Mehr dazu -- CORS einrichten.

Problem: Widget-Stile sind fehlerhaft

Vererbte CSS-Eigenschaften

Der Shadow DOM isoliert die meisten Stile, aber einige CSS-Eigenschaften werden über die Shadow-DOM-Grenze vererbt:

• font-family, font-size, line-height
• color
• direction, text-align
• visibility

Wenn Ihr CSS-Reset aggressive Werte auf body oder * setzt, kann dies das Widget beeinflussen.

Lösung:

Setzen Sie die Widget-CSS-Variablen explizit, um vererbte Werte zu überschreiben:

:root {
  --tikento-font: 'Inter', sans-serif;
  --tikento-text: #18181B;
}

Widget-Container komprimiert oder unsichtbar

Symptome:

• Widget wird mit Höhe 0 oder Breite 0 angezeigt.
• Formular ist abgeschnitten.

Lösung:

Prüfen Sie, ob das Elternelement des data-tikento-widget-Containers nicht folgendes hat:

• overflow: hidden mit fester Höhe
• display: none oder visibility: hidden
• max-height: 0 oder height: 0
• position: fixed / absolute ohne definierte Abmessungen

Der Widget-Container benötigt eine freie Breite von mindestens 320px.

Problem: Alte Version des Formulars wird angezeigt

Symptome:

• Sie haben Felder oder Tickets im Baukasten aktualisiert, aber im Widget auf der Website wird die alte Version angezeigt.

Lösung:

1. Browser-Cache. Drücken Sie Strg+Shift+R (oder Cmd+Shift+R auf Mac) für einen harten Reload.
2. CDN-/Hosting-Cache. Wenn Ihre Website hinter Cloudflare oder einem ähnlichen CDN steht, leeren Sie den Cache für die Seite mit dem Widget.
3. tikento-Redis-Cache. Die Widget-Konfiguration wird mit einer TTL von 300 Sekunden (5 Minuten) gecacht. Wenn nach 5 Minuten die Änderungen nicht erscheinen -- kontaktieren Sie den Support.

Das Skript widget.js wird mit dem Header Cache-Control: no-cache geladen -- es ist immer aktuell. Aber die Formularkonfiguration (Felder, Tickets, Optionen) wird auf Seiten von tikento gecacht.

Problem: Widget funktioniert nicht im Popup-Modus

Symptome:

• Die Schaltfläche mit data-tikento-popup öffnet das Formular beim Klicken nicht.

Lösung:

1. Stellen Sie sicher, dass das Skript widget.js auf der Seite geladen ist.
2. Prüfen Sie, ob das Attribut data-tikento-popup eine korrekte UUID der Veranstaltung enthält.
3. Wenn die Schaltfläche dynamisch (über ein JS-Framework) hinzugefügt wurde, stellen Sie sicher, dass sie zum Zeitpunkt der Widget-Initialisierung im DOM vorhanden ist, oder rufen Sie window.tikento?.refresh() nach dem Hinzufügen auf.

Fehlermeldungen in der Konsole: Referenz

Funktioniert immer noch nicht

Wenn nach allen Prüfungen das Problem weiterhin besteht:

1. Machen Sie einen Screenshot der Fehler in der Konsole (Reiter Console).
2. Kopieren Sie die URL der Seite, auf der das Widget installiert ist.
3. Geben Sie den Browser und seine Version an.
4. Senden Sie alles an den Support über das Dashboard (Hilfe -> Support kontaktieren) oder an support@tikento.com.