# Erweiterte Einbettungsoptionen

> Das Einbettungs-Widget unterstützt mehr Konfigurationen, als der Copy-and-paste-Codeausschnitt zeigt, einschließlich der Übergabe von Client-Optionen an den Checkout, den es öffnet.

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](/organizers/sharing-and-embedding/embedding-events-on-your-website.md) 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:

```html
<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:

```js
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](/developers/js-client/constructor-options.md).

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](/developers/js-client/tracking-and-consent.md).
