Das Inzahlungnahme-Widget stellt eine Bibliothek von Benutzerdefinierten Elementen bereit. Dadurch kann die Einbindung schnell und einfach auf jeder Seite erfolgen.
Die Client-ID für den Kunden ist die [CLIENT_ID].
Folgende Browser werden unterstützt:
- Edge ab Version 79
- Firefox ab Version 76
- Chrome ab Version 57
- Safari ab Mac OS oder iOS 12
Internet Explorer wird nicht unterstützt.
Einbindung des Scripts
Das Script-Tag kann an einer beliebigen Stelle in die Seite eingebunden werden. Sollten benutzerdefinierte Elemente verwendet worden sein, bevor das Script geladen wurde, ersetzt der Browser diese automatisch.
<script type="module" src="https://tradein-vue.cloud.audaris.icu/index.js"></script>
Einbinden des Buttons
Der Button ist die einfachste Möglichkeit, das Widget einzubinden.
Code
<tradein-widget-button client-id="[CLIENT_ID]"></tradein-widget-button>
Ergebnis
Der Inhalt kann wie bei einem normalen Button mithilfe von untergeordneten Elementen ersetzt werden:
Code
<tradein-widget-button client-id="[CLIENT_ID]">
Wieviel ist Ihr Alter wert?
</tradein-widget-button>
Ergebnis
Um das Design Ihrem Branding anpassen zu können, können CSS-Variablen verwendet werden:
Code
<tradein-widget-button client-id="[CLIENT_ID]" style="--color-brand: forestgreen;
--color-brand-darker: darkgreen;">
Ihr alter Diesel als Anzahlung in eine grüne Zukunft
</tradein-widget-button>
Ergebnis
Der Button unterstützt mehrere Layouts, unter anderem unstyled, mit dem eigene
Button-Layouts implementiert werden können:
Code
<tradein-widget-button client-id="[CLIENT_ID]" layout="unstyled">
<div style="padding:10px;background:rebeccapurple;color:white">
layout="unstyled"
</div>
</tradein-widget-button>
Ergebnis
Direkte Einbindung des Formulars
Sollten Sie mehr Kontrolle die Darstellung benötigen, kann das Formular auch direkt in die Seite eingebunden werden.
Code
<tradein-widget client-id="[CLIENT_ID]" ></tradein-widget>