Kann das Widget beim kostenlosen Tarif angepasst werden?

Nein. Beim Free-Tarif wird das Widget im Standardstil von tikento mit Wasserzeichen angezeigt. Die Anpassung über CSS-Variablen ist ab dem Tarif Pro verfügbar.

Warum wirken sich meine CSS-Stile von der Website nicht auf das Widget aus?

Das Widget wird innerhalb des Shadow DOM gerendert -- einer isolierten Umgebung, die keine Stile der Host-Seite erbt. Verwenden Sie zur Stilisierung die tikento-CSS-Variablen.

Wo kann ich das Ergebnis der Anpassung vor der Veröffentlichung sehen?

Öffnen Sie im Dashboard der Veranstaltung Registrierung -> Widget -> Anpassung. Rechts wird eine Vorschau des Formulars mit Ihren Einstellungen in Echtzeit angezeigt.

Widget-Anpassung

Funktionsprinzip

Das tikento-Widget wird im Shadow DOM gerendert -- einem isolierten Bereich, in den keine Stile Ihrer Website eindringen. Dies garantiert, dass das Formular immer korrekt aussieht. Die Kehrseite: Gewöhnliche CSS-Regeln Ihrer Website können das Widget nicht direkt beeinflussen.

Für das Branding werden CSS Custom Properties (CSS-Variablen) verwendet. Sie überschreiten die Shadow-DOM-Grenze und ermöglichen die Steuerung von Farben, Schriftarten und Rundungen.

Verfügbare CSS-Variablen

Setzen Sie die Variablen im CSS Ihrer Website oder direkt im style-Attribut des Containers:

:root {
  /* Hauptfarbe (Schaltflächen, Links, Akzente) */
  --tikento-primary: #4F46E5;

  /* Textfarbe auf Schaltflächen */
  --tikento-primary-foreground: #FFFFFF;

  /* Formularhintergrund */
  --tikento-bg: #FFFFFF;

  /* Haupttextfarbe */
  --tikento-text: #18181B;

  /* Farbe des sekundären Textes */
  --tikento-text-muted: #71717A;

  /* Rahmenfarbe der Eingabefelder */
  --tikento-border: #E4E4E7;

  /* Rundungsradius (Schaltflächen, Felder, Karten) */
  --tikento-radius: 8px;

  /* Schriftart */
  --tikento-font: 'Inter', sans-serif;

  /* Farbe für Validierungsfehler */
  --tikento-error: #EF4444;

  /* Farbe für Erfolgszustände */
  --tikento-success: #22C55E;
}

Alle Variablen sind optional. Wenn Sie eine nicht setzen, verwendet das Widget den Standardwert.

Einrichtung über das Dashboard

Codefreie Methode -- richten Sie alles in der tikento-Oberfläche ein:

Öffnen Sie die Veranstaltung im Dashboard.
Wechseln Sie zum Reiter Registrierung -> Abschnitt Widget für Website.
Klicken Sie auf Anpassung.
Wählen Sie Farben, Schriftart und Rundungen über visuelle Steuerelemente.
Rechts wird eine Vorschau angezeigt -- das Formular aktualisiert sich in Echtzeit.
Klicken Sie auf Speichern -- die Änderungen gelten für alle eingebetteten Widgets dieser Veranstaltung.

Das Dashboard generiert fertigen CSS-Code, den Sie auch kopieren und manuell auf der Website einfügen können.

Einrichtung über Code

Wenn Sie feinere Kontrolle benötigen, setzen Sie CSS-Variablen direkt auf der Seite:

Variante 1: Global über :root

:root {
  --tikento-primary: #0D9488;
  --tikento-radius: 12px;
  --tikento-font: 'Montserrat', sans-serif;
}

Variante 2: Auf dem Widget-Container

<div
  data-tikento-widget="IHRE_EVENT_ID"
  style="--tikento-primary: #0D9488; --tikento-radius: 12px;"
></div>

Die zweite Variante ist praktisch, wenn mehrere Widgets auf der Seite sind oder Sie die globalen Stile nicht beeinflussen möchten.

Variante 3: Schriftart einbinden

Wenn Sie eine nicht standardmäßige Schriftart verwenden, binden Sie sie auf der Host-Seite über <link> oder @font-face ein und geben Sie sie in der Variable an:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">

:root {
  --tikento-font: 'Montserrat', sans-serif;
}

Der Shadow DOM erbt CSS-Variablen von der Host-Seite, aber die Schriftart muss auf Dokumentebene geladen werden.

Shadow DOM: Was ist isoliert und was nicht

Durchdringt den Shadow DOM	Durchdringt nicht
CSS Custom Properties (`--tikento-*`)	Gewöhnliche CSS-Regeln (`.class`, `#id`)
Geladene Schriftarten (`@font-face`)	Tag-Selektoren (`input`, `button`)
`color-scheme`, `direction`	Tailwind-Klassen, Bootstrap-Stile

Das bedeutet, dass die Stile Ihrer Website niemals das Widget beschädigen und das Widget die Stile Ihrer Website nicht beeinflusst.

Tarifbeschränkungen

Tarif	Anpassung	Wasserzeichen
Free	Nicht verfügbar. Standard-tikento-Stil	Wird immer angezeigt
Pro	Vollständige Anpassung über CSS-Variablen	Entfernt
Business	Vollständige Anpassung + Priority-Support	Entfernt
Enterprise	Vollständige Anpassung + White-Label	Entfernt

Mehr zum Wasserzeichen -- Wasserzeichen «Powered by tikento».

Tipps

Prüfen Sie den Kontrast: Die Schaltflächenfarbe (--tikento-primary) sollte einen Kontrast von mindestens 4,5:1 zur Textfarbe darauf (--tikento-primary-foreground) bieten.
Testen Sie das Formular im Dark-Mode des Browsers, wenn Ihre Website einen dunklen Modus unterstützt.
Geben Sie eine Fallback-Schriftart in --tikento-font an, falls die Web-Schriftart nicht geladen wird.
Nach dem Speichern der Anpassung im Dashboard wird der Redis-Cache des Widgets (widget:config:{eventId}) automatisch invalidiert -- Änderungen werden innerhalb weniger Sekunden wirksam.

Häufig gestellte Fragen

Verwandte Artikel