Demo Single offer

Dieses Widget ermöglicht es ein einzelnes Angebot mit einem Button zu weiteren Angeboten einzubinden.

Demo des Widgets

Hinweise zum Widget. Es wird nativ als JS Widget eingebunden. Damit wird die Farbe der Links und Schriftart von der Seite geerbt wo es eingebunden ist.

Das Widget

Das Widget wird mit folgendem Code eingebunden:

Mit diesem Widget sind wir auf eine Identifikation mit Klassennamen gewechselt. Die Klasse mvd_single_offer_widget kann auf einer Seite mehrmals verwendet werden, um mehrere Carousels bei Bedarf auszugeben.

<div class="mvd_single_offer_widget" 
data-id="e72a0a2b-3540-4d99-90ab-81b0bf7903dd" 
data-partner-id="5" 
data-brand-color="007bff"
data-dark-mode="true"
data-search-url="https://widgets-doc.mivodo.com/demo-such-widget-staging-api/">
</div>
<script src="https://widgets.mivodo.com/widgets/single-offer/widget.js"></script>

Dabei wird das Widget in alle Divs mit der class mvd_single_offer_widget gesetzt. Wenn dieses div nicht vorhanden ist, wird das Widget nicht ausgegeben. Außerdem müssen bestimmte unten genannte Data Attribute vorhanden sein.

Widget Daten

Damit das Widget ordnungsgemäß funktioniert müssen bestimmte Data Attributes am div des Platzierung „div“ angehängt werden. Wir haben uns hier bewusst entschieden zukünftig die Widget Daten immer, soweit möglich, lieber in die Data Attributes zuschreiben. Das ermöglicht dann auch mehr Flexibilität wenn man das gleiche Widget eventuell mehrmals auf einer Seite platzieren will.

Wenn es nicht vorhanden ist, kann das Widget nicht gerendert werden. Damit das Widget etwas zurückgeben kann, muss zumindest die data-partner-id und data-id definiert werden. Folgende Data Attributes gibt es:

  • id: Es kann ein einzelner Deal dargestellt werden. Darunter ist ein Button zu weiteren Angeboten, der auf die Suchseite verlinkt. Dabei kann das eigene Such-Widget verlinkt werden.
  • partner-id ist die Partner ID die euch zugewiesen wird.
  • brand-color Farbe in der der Preis dargestellt wird
  • search-url: die seite auf der euer Such Widget eingebunden ist als vollwertige URL sonst gibt es keinen button zu weiteren Angeboten
  • dark-mode: Wenn eure Seite Dark Mode kompatibel ist auf true setzen – Widget wird nach User Device Preference Dunkel und Hell gerendert.

Wo findet man die ID eines Angebots?

In der Suche auf den Teilen Button klicken -> ID Kopieren (eventuell scrollen in dem Sharing Modal)

Screenshot