Hoe werkt jullie widget?

Droom widget

Om een droom widget aan te maken, heb je een "droom key" nodig. Deze is te vinden op de droom pagina en vervolgens de knop embed. Dit opent een popup waarin de droom key te vinden is.

Hieronder vindt u de voorbeeld code:

<script type="text/javascript" src="//www.dreamordonate.nl/widget/v1/script.js"></script>

<div data-key="DROOM-KEY"></div>

Vervang "DROOM-KEY" met de droom key die u heeft gevonden op de droom pagina. Het is mogelijk om meerdere dromen op één pagina te plaatsen door simpelweg vaker de onderstaande code toe te voegen aan je html:

<div data-key="DROOM-KEY-1"></div>

<div data-key="DROOM-KEY-2"></div>

Plaats de bovenstaande code in de html van je website op de plek waar je de widget wilt tonen.

De onderstaande javascript code kun je overal op je website plaatsen aanbevolen is om de code net voor de sluitende body tag </body> te plaatsen.

<script type="text/javascript" src="//www.dreamordonate.nl/widget/v1/script.js"></script>

Uiterlijk

Het uiterlijk van de droom widget is aan te passen, hierover is meer te vinden in de alinea "Aanpassen".

Afmetingen

De standaard afmetingen van de droom widget zijn 200x375px dit houdt in dat de widget 200px breed is en 375px hoog. De minimale breedte van de widget is 200px, er is geen minimale hoogte. Dit is echter aan te passen hierover kun je meer lezen in de alinea "Aanpassen".

Aanpassen

De droom widget is op de volgende manieren aan te passen.

  • Achtergrond: De widget heeft normaal gesproken een witte achtergrond. Je kunt dit uitschakelen door het volgende attribuut data-transparent="true" toe te voegen aan de embed code.
  • Scrollbalk: Mocht de widget niet volledig getoond omdat deze te hoog is kun je een scrollbalk toevoegen doormiddel van het volgende attribuut data-scrolling="true".
  • Hoogte: De hoogte is aan te passen door het volgende attribuut data-height="400" in dit geval is de hoogte 400 in pixels. Je kunt "400" wijzigen naar elke waarde die je wilt.
  • Breedte: De breedte is aan te passen door het volgende attribuut data-width="250" in dit geval is de breedte 250 in pixels. Je kunt "250" wijzigen naar elke waarde die je wilt. De minimale breedte is 200px. 

Voorbeeld-code

Een voorbeeld embed code met de bovenstaande aanpassingen:

<div data-key="DROOM-KEY" data-transparent="true" data-scrolling="true" data-height="400" data-width="250"></div>

Terug naar veelgestelde vragen.
Uitgelicht