Die in deinem Entase-Konto generierten Einbettungscodes fügen ein fertiges Event-Widget in eine Seite ein. Sie sind dafür gedacht, ohne Entwicklungsaufwand kopiert und eingefügt zu werden – unter Events auf deiner Website einbetten erfährst du, wie du einen erhältst.
Auf dieser Seite werden die Optionen dokumentiert, die du diesem Codeausschnitt hinzufügen kannst, sowie die Konfiguration des Checkouts, den er öffnet.
Das Widget lädt den JavaScript-Client selbst, daher fügst du client.js nicht daneben hinzu. Es benötigt auch keinen veröffentlichbaren Schlüssel: Das Widget wird von Entase bereitgestellt, daher wird der Checkout über das Widget und nicht über einen Schlüssel auf deiner Seite autorisiert.
Konfiguration
Jedes Widget wird mit einem Optionsobjekt konfiguriert:
<div id="entase_OBJ_CODE"></div>
<script>
window.entase = window.entase || { o: [] };
window.entase.o.push({
obj: 'OBJ_CODE',
theme: 'dark',
ext: true
});
</script>
<script src="https://js.entase.com/embed.js" async></script>obj verknüpft die Konfiguration mit ihrem Container: Das Widget wird in dem Element gerendert, dessen ID aus entase_ gefolgt vom gleichen Code besteht. Fehlt dieses Element, gibt das Widget eine Warnung aus und rendert nichts.
Füge pro Widget einen Eintrag hinzu, um mehrere Widgets auf einer Seite zu platzieren.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
obj | String | – | Der Objektcode aus deinem Einbettungs-Codeausschnitt. Erforderlich. |
width | String | 'auto' | Containerbreite als CSS-Wert. 'auto' bedeutet volle Breite. |
height | String | 'auto' | Containerhöhe als CSS-Wert. Bei 'auto' beginnt sie bei 200px und das Widget passt seine Größe an seinen Inhalt an. |
theme | String | 'light' | 'light' oder 'dark'. |
locale | String | 'auto' | Sprache des Widgets. 'auto' liest das Attribut lang deines <html>-Elements. |
ext | Boolean | false | Erweitertes Layout – fügt über den Daten den Eventnamen und das Poster hinzu. |
attribution | Boolean | true | Zeigt die Entase-Attributionszeile an. Auf false setzen, um sie auszublenden. |
client | Objekt | {} | Optionen, die an den JavaScript-Client übergeben werden, der den Checkout öffnet. |
Unabhängig von width erhält der Container eine Mindestbreite von 200px. Darunter kann das Widget nicht korrekt angeordnet werden.
Den Checkout konfigurieren
client akzeptiert dieselben Optionen wie der Client-Konstruktor, sodass der von einem Widget geöffnete Checkout wie ein selbst geöffneter gestaltet und dimensioniert werden kann:
window.entase.o.push({
obj: 'OBJ_CODE',
client: {
checkoutMode: 'pane',
pane: { width: '60vw' },
backdrop: true,
backdropColor: '#101014'
}
});Die vollständige Liste findest du unter Konstruktoroptionen.
Zwei Einschränkungen: tprm wird vom Widget selbst anhand der Seiten-URL gesetzt (siehe unten), daher wird ein hier übergebener Wert ersetzt. Und wenn sich mehrere Widgets eine Seite teilen, teilen sie sich auch eine Client-Instanz – die client-Optionen des zuletzt initialisierten Widgets sind wirksam. Halte sie daher für Widgets auf derselben Seite identisch.
Automatische Weiterleitung von Kampagnenparametern
Anders als der eigenständige Client liest das Widget die Query-Zeichenfolge deiner Seite und leitet bekannte Kampagnenparameter sowohl an das Widget als auch an den Checkout weiter:
sgm, utm_source, utm_medium, utm_campaign, utm_term, utm_content, utm_id, utm_source_platform, utm_creative_format, fbclid
Bei einem Besucher, der über yoursite.com/concert?utm_source=facebook&sgm=SOCIAL auf deine Seite gelangt, wird diese Attribution ohne weitere Konfiguration für jede daraus resultierende Bestellung erfasst. Parameter außerhalb dieser Liste werden ignoriert – um eigene Parameter zu übermitteln, öffne den Checkout direkt mit dem Client und setze tprm selbst. Siehe Tracking und Einwilligung.