audaris Inzahlungnahme-Widget

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:

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 async defer src="https://tradein.cloud.audaris.icu/main.js"></script>

Einbinden des Buttons

Der Button ist die einfachste Möglichkeit, das Widget einzubinden.

Code


<audaris-tradein-button client-id="[CLIENT_ID]"></audaris-tradein-button>

Ergebnis

Der Inhalt kann wie bei einem normalen Button mithilfe von untergeordneten Elementen ersetzt werden:

Code


<audaris-tradein-button client-id="[CLIENT_ID]">
    Wieviel ist Ihr Alter wert?
</audaris-tradein-button>

Ergebnis

Wieviel ist Ihr Alter wert?

Um das Design Ihrem Branding anpassen zu können, können CSS-Variablen verwendet werden:

Code


<audaris-tradein-button client-id="[CLIENT_ID]" style="--color-brand: forestgreen; --color-brand-darker: darkgreen;">
    Ihr alter Diesel als Anzahlung in eine grüne Zukunft
</audaris-tradein-button>

Ergebnis

Ihr alter Diesel als Anzahlung in eine grüne Zukunft

Der Button unterstützt mehrere Layouts, unter anderem unstyled, mit dem eigene Button-Layouts implementiert werden können:

Code


<audaris-tradein-button client-id="[CLIENT_ID]" layout="unstyled">
    <div style="padding:10px;background:rebeccapurple;color:white">
        layout="unstyled"
    </div>
</audaris-tradein-button>

Ergebnis

layout="unstyled"

Direkte Einbindung des Formulars

Sollten Sie mehr Kontrolle die Darstellung benötigen, kann das Formular auch direkt in die Seite eingebunden werden.

Code


<audaris-tradein-form client-id="[CLIENT_ID]"></audaris-tradein-form>

Ergebnis

Vollständige API-Dokumentation

<audaris-tradein-button>

Attribute

Name Beispiel Beschreibung
client-id [CLIENT_ID] Die Client-ID (Mandanten-Nummer) zur Identifikation bei audaris.
layout unstyled Layout-Variante des Buttons. Mögliche Werte sind: default, unstyled

Slots

Name Beschreibung
default (leer) Über den Standard-Slot kann der Button-Label ersetzt werden. Bitte beachten Sie dabei das slot-Elemente dem Styling Ihrer Seite folgen, und nicht dem des Widgets.

Ereignisse

Name Detail-Daten Beschreibung
open null Der Button wurde gedrückt und das Inzahlungnahme-Fenster geöffnet.
close null Das Inzahlungnahme-Fenster wurde geschlossen
request RequestDetailData Eine Anfrage wurde erfolgreich versendet.

<audaris-tradein-dialog>

Zur einfacheren Integration in Ihren vorhandenen Javascript-Code kann der Dialog des Anfrageformulars auch direkt eingebunden werden. Bitte beachten Sie dabei, dass beim close-Ereignis der Dialog von ihrem Code entfernt werden muss.

Attribute

Name Beispiel Beschreibung
client-id [CLIENT_ID] Die Client-ID (Mandanten-Nummer) zur Identifikation bei audaris.

Ereignisse

Name Detail-Daten Beschreibung
close null Der Schließen-Button wurde gedrückt und der Dialog sollte geschlossen werden, indem das Element von der Seite entfernt oder versteckt wird.
request RequestDetailData Eine Anfrage wurde erfolgreich versendet.

<audaris-tradein-form>

Attribute

Name Beispiel Beschreibung
client-id [CLIENT_ID] Die Client-ID (Mandanten-Nummer) zur Identifikation bei audaris.

Ereignisse

Name Detail-Daten Beschreibung
request RequestDetailData Eine Anfrage wurde erfolgreich versendet.

RequestDetailData

Feld Beschreibung
request.vin FIN, falls voranden
request.hsn HSN, falls voranden
request.tsn TSN, falls voranden
request.manufacturerName Name des Herstellers
request.modelName Name des Modells
request.firstName Vorname
request.lastName Nachname
request.email E-Mail
request.message Nachricht
response.purchasePriceGrossRounded Der geschätzte Wert des Fahrzeugs.