So funktioniert das Widget
Das tikento-Widget ist ein eigenstaendiges JavaScript-Bundle, das von tikento.com/widget.js geladen und im Shadow DOM gerendert wird. Dank Shadow DOM sind die Widget-Stile von den Stilen Ihrer Website isoliert -- keine CSS-Konflikte.
Das Formular synchronisiert sich automatisch mit der Plattform: Aenderungen im Formular-Editor (neue Felder, Ticketaenderungen) erscheinen im Widget, ohne dass der Code auf der Website aktualisiert werden muss.
Grundlegender Widget-Code
<!-- Container fuer das Formular -->
<div data-tikento-widget="IHRE_EVENT_ID"></div>
<!-- Widget-Script (einmal pro Seite) -->
<script
src="https://tikento.com/widget.js"
async
defer
></script>
Ersetzen Sie IHRE_EVENT_ID durch die UUID Ihres Events -- sie ist in der Event-URL im Dashboard oder im Abschnitt "Widget" sichtbar.
Zwei Anzeigemodi
Eingebettetes Formular (Inline)
Das Formular wird direkt auf der Seite am Platz des data-tikento-widget-Containers angezeigt. Der Teilnehmer fuellt es ohne Popup-Fenster aus.
Popup-Formular (Popup)
Das Formular oeffnet sich als Overlay beim Klick auf eine Schaltflaeche. Fuegen Sie das Attribut data-tikento-popup zu einer beliebigen Schaltflaeche auf Ihrer Website hinzu:
<button data-tikento-popup="IHRE_EVENT_ID">
Registrieren
</button>
Das Widget-Script bleibt dasselbe.
Anpassung des Erscheinungsbilds
Ab dem Pro-Tarif ist die Anpassung ueber CSS-Variablen verfuegbar. Fuegen Sie Folgendes in das HTML oder CSS Ihrer Website ein:
:root {
--tikento-primary: #4F46E5;
--tikento-radius: 8px;
--tikento-font: 'Inter', sans-serif;
}
Die verfuegbaren CSS-Variablen des Widgets sind im Abschnitt Widget -> Anpassung in den Event-Einstellungen aufgelistet.
Im Free-Tarif ist das Wasserzeichen "Powered by tikento" immer vorhanden und kann technisch nicht entfernt werden.
Quellbeschraenkungen (CORS)
Ab dem Pro-Tarif konfigurieren Sie zur Sicherheit die Liste der erlaubten Domains. Dies schuetzt Ihr Formular vor der Verwendung auf fremden Websites.
Mehr dazu -- CORS einrichten.
Kompatible Plattformen
Das Widget funktioniert auf jeder Plattform mit HTML-Unterstuetzung:
- Tilda, Webflow, Wix, Framer
- WordPress, Squarespace
- Einfache HTML-Seiten
- React-, Vue-, Angular-Anwendungen
Spezifische Anleitungen fuer beliebte Website-Builder -- Installation auf Tilda, Webflow, Wix.