Jede Option ist optional. Die folgenden Werte sind die Standardwerte, die der Client verwendet, wenn Sie eine Option weglassen.
const entase = new Entase({
pk: null,
locale: 'auto',
checkoutMode: 'auto',
collectConsent: true,
backdrop: true,
backdropColor: '#000000',
tprm: {},
pane: { width: 800, height: '100%' },
popup: { width: 800, height: 1000 }
});Optionen
| Name | Typ | Standardwert | Beschreibung |
|---|---|---|---|
pk | Zeichenfolge | null | Ihr veröffentlichbarer Schlüssel. Der Client sendet ihn bei der Prüfung, ob Ihre Domain Inline-Checkouts verwenden darf. Ohne ihn wird jeder Checkout als Pop-up geöffnet. |
locale | Zeichenfolge | 'auto' | Sprache des Checkouts. 'auto' liest das Attribut lang Ihres <html>-Elements. |
checkoutMode | Zeichenfolge | 'auto' | 'auto', 'pane' oder 'popup'. Siehe Checkout-Modi. Ein nicht erkannter Wert fällt auf 'auto' zurück. |
collectConsent | boolesch | true | Ob der Checkout den Besucher auffordert, den Hinweis zu den Bedingungen zu akzeptieren. Nach der Annahme wird die Antwort in einem Cookie gespeichert und der Schritt übersprungen. |
backdrop | boolesch | true | Ob die Seite hinter dem Checkout abgedunkelt wird. false deaktiviert auch die Scroll-Sperre der Seite. |
backdropColor | Zeichenfolge | '#000000' | Farbe des abgedunkelten Bereichs als CSS-Farbwert. |
tprm | Objekt | {} | Tracking-Parameter, die als Abfrageparameter an die Checkout-URL angehängt werden. Siehe Tracking und Zustimmung. |
pane | Objekt | { width: 800, height: '100%' } | Größe des Inline-Panels. Im Pop-up-Modus ignoriert. |
popup | Objekt | { width: 800, height: 1000 } | Größe des Pop-up-Fensters in Pixeln. Im Panel-Modus ignoriert. |
Größe von Panel und Pop-up
pane.width akzeptiert eine Zahl (Pixel) oder eine beliebige CSS-Längenangabe – '720px', '50%', '40vw' oder einen calc()-Ausdruck. Eine einfache Zahl wird als Pixel behandelt.
Auf dem Desktop ist das Panel auf diese Breite begrenzt und auf Mobilgeräten nimmt es die volle Breite ein; dort wird stattdessen pane.height verwendet. Der Wechsel zwischen den beiden erfolgt, wenn der Viewport schmaler als die konfigurierte Breite ist; bei einer relativen Einheit für die Breite erfolgt der Wechsel bei 800 px.
popup.width und popup.height akzeptieren nur Pixelzahlen, und das Fenster wird auf dem Bildschirm des Besuchers zentriert. Wenn der Bildschirm nicht hoch genug für die angeforderte Höhe ist, wird das Fenster passend verkleinert.
Hintergrund
Der Hintergrund wird hinter einem Pop-up stärker abgedunkelt als hinter einem Panel, da bei einem Pop-up die darunterliegende Seite als inaktiv erscheinen soll. Setzen Sie backdrop: false, um die Abdunkelung vollständig zu entfernen – dadurch bleibt die Seite auch hinter dem Checkout scrollbar.
backdropColor wird unverändert angewendet und kann daher jede gültige CSS-Farbe sein. Verwenden Sie die Option, um sie an eine dunkle Website oder Ihr Branding anzupassen, statt den Hintergrund auszublenden; dafür ist backdrop: false die richtige Option.
Überschreibungen pro Buchung
checkoutMode, collectConsent, backdrop, backdropColor, pane und popup können für eine einzelne Buchung überschrieben werden, indem Sie sie an book() übergeben. Der Wert auf Instanzebene bleibt für nachfolgende Aufrufe unverändert:
const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });
// This one booking opens wider, with no dimming.
entase.book('EVENT_ID', {
pane: { width: '60vw' },
backdrop: false
});pk und tprm sind keine Optionen pro Buchung – pk identifiziert das Konto für die gesamte Seite, und Tracking-Parameter werden mit setTracking() geändert, wenn sie abweichen müssen.