Ein Widget zeigt deine Kadens-Events, -Tickets oder -Personen auf deiner eigenen Website, und Besucher können kaufen, ohne sie zu verlassen. Du brauchst ein Kadens-Konto und Zugriff zum Bearbeiten deiner Website. Erstelle ein Widget, erlaube deine Website und füge dann einen kurzen Code ein.
Ein Widget ist ein Teil deiner Kadens-Seite, der in deine Website eingebettet ist. Es gibt drei Arten:
| Widget | Beschreibung |
|---|---|
Events und Tickets | Deine kommenden Events, mit Ticketkauf direkt auf deiner Website. |
Ein Event | Die Seite eines Events: Termine, Ort, Beschreibung und Tickets, mit Kaufen. |
Personen | Profilkarten der Personen, die du auswählst, mit Link zu ihren öffentlichen Profilen. |
Kurse | Deine Kurse mit ihren Preisen, jeweils mit ihrer Seite auf deiner Website verlinkt. |
Pläne und Preise | Deine Mitgliedschaftspläne nebeneinander, jeweils mit ihrer Anmeldeseite verlinkt. |
Stundenplan | Deine nächsten Kurse als Terminliste, immer aktuell. |
Kaufen-Button | Ein Button für ein Event, einen Kurs oder einen Plan, passend zu deiner Seite gestaltet. |
Der Code, den du einfügst, nennt nur deinen Widget. Änderst du den Widget in Kadens (was er zeigt, sein Layout oder seine Farben), aktualisiert sich jede Website, die ihn nutzt, von selbst. Du fügst den Code nie wieder ein.
Vier Schritte, ohne Programmierkenntnisse.
Öffne in Kadens Integrationen, dann Widgets, und erstelle einen. Wähle, was er zeigt und wie er aussieht.
Füge die Adresse deiner Website hinzu, wie https://www.example.com. Ein Widget erscheint nur auf Websites, die du erlaubst.
Öffne deinen Widget und gehe zum Tab Installation. Kopiere den dort angezeigten Code. Er trägt bereits deinen Benutzernamen und deinen Widget.
Füge den Code dort ein, wo der Widget erscheinen soll, und veröffentliche dann deine Website. Finde deinen Website-Baukasten in den Anleitungen unten für die genauen Schritte.
Ein Widget lädt nur auf den Websites, die du deiner Liste hinzufügst.
Dies schützt deinen Checkout: Niemand kann deinen Widget auf eine Seite setzen, die du nicht kontrollierst. Deine Liste wird als Sicherheitsregel (frame-ancestors) an Browser gesendet, sodass eine nicht gelistete Website dort nichts anzeigt, wo der Widget stehen sollte.
| Adresse | Ergebnis |
|---|---|
https://www.example.com | Erlaubt. Eine Website. Jeder Pfad oder abschließende Schrägstrich, den du eingibst, wird entfernt. |
https://*.example.com | Erlaubt. Jede Subdomain eine Ebene tief, wie shop.example.com. Es schließt weder example.com selbst noch tiefere Ebenen wie a.b.example.com ein: Füge diese als eigene Einträge hinzu. |
* | Nicht erlaubt. Es würde jeder Website im Internet erlauben, deinen Widget anzuzeigen. |
https://*.com | Nicht erlaubt. Ein Platzhalter braucht eine echte Domain danach. |
http://www.example.com | Nicht erlaubt. Websites müssen https verwenden. |
http://localhost:3000 | Zum Testen auf deinem eigenen Computer erlaubt. http funktioniert nur für localhost. |
https://www.example.com/tickets | Gespeichert als https://www.example.com. Die ganze Website ist erlaubt, nicht nur eine Seite. Eine Adresse mit ? oder # wird abgelehnt. |
https://203.0.113.7 | Nicht erlaubt. Verwende den Domainnamen deiner Website. |
Ein Skript und ein Element. Der Tab Installation erstellt diesen Code für dich.
Für jede Website, die Code akzeptiert. Passt seine Höhe selbst an.
In den Beispielen auf dieser Seite stehen your-username und your-widget-id für deine eigenen Werte. Kopiere deinen echten Code aus dem Tab Installation.
| Attribut | Typ | Beschreibung |
|---|---|---|
handleErforderlich | string | Dein Kadens-Benutzername. |
widgetErforderlich | string | Die Id des anzuzeigenden Widgets. |
locale | string | Die Sprache des Widgets. Fehlt sie, verwendet der Widget das lang deiner Seite. |
color-scheme | light | dark | auto | Erzwingt helle oder dunkle Farben für diese Einbindung. Weglassen, um die eigene Einstellung des Widgets zu verwenden. |
title | string | Der barrierefreie Name des Widget-Rahmens, gelesen von Screenreadern. Standard ist Kadens widget. |
data-layer | boolean | Sendet außerdem jedes Widget-Ereignis an window.dataLayer, für den Google Tag Manager. |
meta-pixel | boolean | Sendet ein Purchase-Ereignis an deinen Meta-Pixel, sobald jemand einen Kauf abschließt. Deine Seite muss den Pixel bereits laden. |
Für Website-Baukästen, die Skripte entfernen. Feste Höhe.
Wähle deinen Website-Baukasten. Jede Anleitung sagt, was du zuerst brauchst, wo der Code hingehört und was zu prüfen ist.
Du brauchst Zugriff zum Bearbeiten der Seiten deiner Website oder jemanden, der ihn hat und den Code für dich einfügt.
Pro Seite: Füge den Code auf jeder Seite ein, auf der das Widget erscheinen soll. Hat deine Website einen Ort für Code auf allen Seiten (oft Header- oder Footer-Code genannt), kannst du die erste Zeile einmal dort einfügen und auf jeder Seite nur die zweite.
Öffne die veröffentlichte Seite in einem neuen Tab. Das Widget erscheint dort, wo du den Code eingefügt hast, meist nach wenigen Sekunden.
Selbst gehostetes WordPress (WordPress.org) funktioniert immer. Auf WordPress.com brauchst du einen kostenpflichtigen Tarif mit Hosting-Funktionen: Der Free-Tarif entfernt das Skript und das Widget erscheint nicht.
Pro Seite: Füge jeder Seite oder jedem Beitrag, auf denen das Widget erscheinen soll, einen Custom HTML-Block hinzu. WordPress hat keinen eingebauten Ort für Code auf allen Seiten, also füge in jeden Block den ganzen Code ein.
Öffne die Seite auf deiner Live-Website, nicht im Editor. Das Widget erscheint dort, wo du den Block eingefügt hast.
Custom Code braucht einen Premium-Tarif und eine verbundene Domain. Ohne beides erscheint das Widget nicht auf deiner Website.
Auf den Seiten, die du auswählst. Custom Code läuft direkt in der Seite, auf deiner eigenen Domain, und das Widget erscheint am Ende jeder ausgewählten Seite.
Öffne die Seite auf deiner eigenen Domain, nicht in der Editor-Vorschau. Das Widget erscheint am Ende der Seite.
Du musst Inhaber des Shops sein oder als Mitarbeiter Themes im Shopify admin bearbeiten dürfen.
Pro Vorlage: Ein im Theme-Editor hinzugefügter Abschnitt erscheint auf jeder Seite mit dieser Vorlage (zum Beispiel auf jeder Produktseite). Soll er nur auf einer Seite stehen, gib dieser Seite zuerst eine eigene Vorlage. Für alle Seiten gehe zu Online Store › Themes › … › Edit code und füge es in layout/theme.liquid direkt vor dem schließenden body-Tag ein; das Widget erscheint dann am Ende jeder Seite.
Öffne deinen Shop in einem neuen Tab, nicht im Theme-Editor, und gehe zu dieser Seite. Das Widget erscheint dort, wo der Abschnitt sitzt.
Code Embed läuft nur mit einem kostenpflichtigen Site-Tarif oder in einem Core-, Growth-, Agency- oder Freelancer-Workspace. Auf einer kostenlosen Starter-Website erscheint das Widget nicht.
Pro Seite: Setze ein Code Embed dort, wo das Widget erscheinen soll. Für alle Seiten füge es stattdessen einmal unter Site settings › Custom code › Footer code ein. Das läuft vor dem schließenden body-Tag und braucht einen bezahlten Site plan; das Widget erscheint dann am Ende jeder Seite. Soll es innerhalb deiner Seiten stehen, kommt nur die erste Zeile in Footer code und die zweite in jedes Code Embed.
Öffne die veröffentlichte Website. Im Designer zeigt das Code Embed einen Platzhalter statt des Widgets; das ist normal.
Skripte laufen in den Tarifen Core, Plus und Advanced. Im Tarif Personal erscheint das Widget nicht, und die iframe-Version auch nicht.
Pro Seite: Füge auf jeder Seite, auf der das Widget erscheinen soll, einen Code-Block hinzu. Für alle Seiten füge es stattdessen einmal im Code Injection-Bereich unter Settings ein.
Öffne die Seite deiner Live-Website in einem privaten Fenster. Im Editor zeigt der Block einen Platzhalter, weil Skripte in der Editor-Vorschau nicht laufen.
Du brauchst Bearbeitungszugriff auf das Framer-Projekt.
Pro Seite: Setze ein Embed dorthin, wo das Widget erscheinen soll, und füge in jedes Embed den ganzen Code ein.
Öffne deine veröffentlichte Website und gehe zur Seite. Das Widget erscheint dort, wo du das Embed platziert hast.
Du brauchst ein Ghost-Teamkonto, das veröffentlichen darf (Author oder höher). Contributors können die Karte hinzufügen, aber nicht veröffentlichen.
Pro Beitrag oder Seite: Füge dort, wo das Widget erscheinen soll, eine HTML-Karte hinzu. Für alle Seiten füge es stattdessen einmal unter Settings › Advanced › Code injection › Site footer ein; das Widget erscheint dann am Ende jeder Seite. Soll es innerhalb deiner Beiträge stehen, kommt nur die erste Zeile in Site footer und die zweite in jede HTML-Karte.
Öffne den veröffentlichten Beitrag oder die Seite. Der Editor zeigt die Karte als Code; das Widget erscheint nur auf der veröffentlichten Seite.
Du brauchst die Berechtigung, Website-Seiten oder Landingpages in HubSpot zu bearbeiten und zu veröffentlichen.
Pro Seite: Füge den Code im Source code eines Rich text-Moduls dort ein, wo das Widget erscheinen soll, oder im Seiteneditor unter Settings › Advanced › Footer HTML, damit es am Ende dieser Seite erscheint. Für alle Seiten einer Domain gehe zu Settings › Content › Pages, wähle die Domain und füge es in Site footer HTML ein.
Öffne die Live-Seite. Fehlt das Widget, öffne erneut den Source code des Moduls: Ist die Skriptzeile weg, hat HubSpot sie entfernt.
Ändere diese Einstellungen im Widget-Studio in Kadens. Deine Website aktualisiert sich von selbst.
| Einstellung | Werte | Beschreibung |
|---|---|---|
Theme | site | kadens | minimal | bold | soft | dark | Ein Ausgangsstil. Du kannst nach der Auswahl jedes Detail anpassen. |
Farbschema | light | dark | auto | Hell, dunkel oder automatisch, um dem Gerät des Besuchers zu folgen. |
Farben | accent, accentForeground, background, card, text, mutedText, border | Deine eigenen Farben für Schaltflächen, Hintergründe, Karten, Text und Rahmen. |
Schriftarten | Die Schriftart deiner Website, die Systemschrift des Besuchers oder eine aus dem Kadens-Schriftkatalog. Schriftarten laden im Widget von Kadens, nie von Google. | |
Textgröße | 12 to 22 px | Die Grundgröße des Widget-Texts. |
Eckenradius | 0 to 64 px | Wie stark Karten und Schaltflächen abgerundet sind. |
Das Widget-Element sendet DOM-Ereignisse an deine Seite, sodass du Klicks und Verkäufe mit deiner eigenen Analytik messen kannst.
| Ereignis | Nutzdaten | Beschreibung |
|---|---|---|
kadens:ready | { widget } | Der Widget hat geladen und ist sichtbar. |
kadens:widget-view | { widget, ...props } | Eine Besucheraktion im Widget. Mit data-layer wird sie außerdem an window.dataLayer als kadens_widget_view gesendet. |
kadens:item-click | { widget, ...props } | Eine Besucheraktion im Widget. Mit data-layer wird sie außerdem an window.dataLayer als kadens_item_click gesendet. |
kadens:checkout-open | { widget, ...props } | Eine Besucheraktion im Widget. Mit data-layer wird sie außerdem an window.dataLayer als kadens_checkout_open gesendet. |
kadens:checkout-complete | { widget, ...props } | Eine Besucheraktion im Widget. Mit data-layer wird sie außerdem an window.dataLayer als kadens_checkout_complete gesendet. |
kadens:powered-by-click | { widget, ...props } | Eine Besucheraktion im Widget. Mit data-layer wird sie außerdem an window.dataLayer als kadens_powered_by_click gesendet. |
kadens:checkout-completed | { widget, orderRef, kind, amountMinor, currency } | Ein Kauf wurde abgeschlossen. Der Betrag steht in kleinsten Einheiten (Cent für EUR oder USD). Mit meta-pixel wird außerdem ein Purchase an deinen Meta-Pixel gesendet. |
<kadens-widget handle="your-username" widget="your-widget-id" data-layer></kadens-widget>
<script>
document.addEventListener('kadens:checkout-completed', (event) => {
const { orderRef, amountMinor, currency } = event.detail;
gtag('event', 'purchase', {
transaction_id: orderRef,
value: amountMinor / 100, // amounts arrive in minor units (cents)
currency,
});
});
</script>Füge das Attribut meta-pixel hinzu. Nichts weiter ist nötig, wenn deine Seite den Pixel bereits lädt.
<kadens-widget handle="your-username" widget="your-widget-id" meta-pixel></kadens-widget>Die Zahlung erfolgt im Widget, in einem sicheren Fenster über deiner Seite. Käufer verlassen deine Website nicht, und du brauchst keine eigene Zahlungseinrichtung.
Käufer können allein mit ihrer E-Mail-Adresse bezahlen oder sich im Widget bei ihrem Kadens-Konto anmelden.
Der Checkout öffnet sich in einem neuen Tab.
| Problem | Lösung |
|---|---|
Der Widget-Bereich ist leer | Fast immer fehlt deine Website in deinen erlaubten Websites. Füge die genaue Adresse hinzu, die du im Browser siehst, einschließlich www, falls vorhanden. |
Der Code verschwindet nach dem Speichern | Manche Website-Baukästen entfernen Skripte. Verwende stattdessen den iframe-Code: Öffne Erweitert im Tab Installation und wähle iframe. |
Dein Baukasten akzeptiert keinen Code | Manche Website-Baukästen akzeptieren eigenen Code nur in einem kostenpflichtigen Plan. Die Anleitung jedes Baukastens oben sagt, ob das bei dir zutrifft. |
Du siehst noch die alte Seite | Veröffentliche deine Website erneut und lade die Seite neu. Manche Baukästen behalten eine alte Kopie für ein paar Minuten. |
War das hilfreich?