Widget einbinden
Um die suche einzubinden, muss folgender Code implementiert werden:
<script src="https://widgets.mivodo.com/widgets/search/widget-dev.js"></script>
<div id="mvd_search_widget" data-brand-color="ff0000" data-subpartner-id="4" data-default-values="type=subscription&sort=price_asc&lease_gross_rate=..500" data-offer-types="vehicle-leasing-offers,vehicle-subscription-offers" data-enable-darkmode="true"></div>Damit das Widget geladen wird, ist es nötig, dass ein div mit der id mvd_search_widget auf der platziert ist. Darein wird das iFrame platziert.
Des Weiteren stehen die folgenden data parameter für dieses div zur Verfügung:
- Die Akzentfarbe des Widget kann per Data Attribute data-brand-color als HEX Code übergeben werden. Beispiel: „data-brand-color=“ff0000″“
- Wichtig: Fügt eure eigene Subpartner ID ein. zB data-subpartner-id=“4″ – Andernfalls können euch Transaktionen aus der Suche nicht zugeordnet werden.
- Neu: Mit data-default-values kann ein bestimmter Filter String angegeben werden, der schon beim ersten Laden des widgets berücksichtigt wird. Diesen könnt ihr beim Aufruf des „puren“ Widgets selbst generieren und oben aus dem Browser Fenster kopieren
- offer-types: vehicle-leasing-offers, vehicle-subscription-offers, vehicle-buy-offers sind möglich – wenn nicht gesetzt werden alle angezeigt
- enable-darkmode: Wenn der Darkmode aktiviert wird, reagiert das Widget auf das vom Nutzer präferierte Color-Scheme und wird dunkel dargestellt
Hinweise zum Darkmode:
- Der Darkmode reagiert auf die Device Präferenz des Users und stellt das Widget entsprechend dunkel dar, wenn das Geräte des Nutzers dunkel eingestellt ist.
- Das Widget reagiert auch auf die Änderung des Nutzers, wenn dieser laufend zwischen hell und dunkel wechselt
- Das Widget ist auch dunkel, wenn die Host Website hell ist und keinen Darkmode hat, weshalb das data-attribute in diesem fall „false“ gesetzt werden sollte oder weggelassen.
- Das Widget hat einen transparenten Hintergrund, um sich dem Hintergrundgrau der jeweiligen Sektion wo es eingebunden wird anzupassen
zum puren Widget, um URL Parameter zu generieren
In der Demo ff0000 als Akzentfarbe definiert.