Drillster Support & Info

Embedden van Drillster players

Met de lancering van de nieuwe Drillster player in augustus 2017, hebben we ook de manier waarop player widgets kunnen worden ge-embed op je eigen website of systeem van een derde partij.

 

De oude manier om een drill of toets te embedden

Vroeger kon een drill op een site van een derde partij worden ge-embed door een iframe-tag toe te voegen. Bijvoorbeeld:

<iframe src=”https://www.drillster.com/widget/drill/AHYrV4ULyqnN1S7gRWq45Q”></iframe>

 

Het embedden van een toets werkte net wat anders:

<iframe src=”https://www.drillster.com/widget/test/9xx5sRhBZM335SzI6JwDPw”></iframe>

 

Het was mogelijk om de hoogte en breedte van de widgets aan te passen door width en height attributen toe te voegen, of door CSS op het iframe object toe te passen.

Hiermee wordt een oude drill- of toetsplayer getoond. De oude functionaliteit zal voorlopig beschikbaar blijven, maar er worden geen nieuwe functionele wijzigingen meer voor ontwikkeld.

 

Embedden van de nieuwe player

Het embedden van de nieuwe player op een site van een derde partij werkt een beetje anders, maar is flexibeler en maakt interactie mogelijk tussen de player en het systeem van de derde partij.

Om één of meerdere players op een pagina te embedden, moet er een verwijzing worden opgenomen naar de zogenaamde widget loader. Dit kan worden gedaan door de volgende regel code toe te voegen aan de pagina, bij voorkeur net onder de afsluitende </body> tag:

<script src="https://www.drillster.com/widgets/loader.js" type="text/javascript"></script>

 

De widget loader is een kleine stukje Javascript dat zorgt draagt voor het inladen van de verschillende Drillster-widgets, waaronder de player-widget.

Zodra de referentie naar de widget loader er is, wordt het embedden van een player widget heel simpel. Het is een kwestie van het toevoegen van een regel code op de juiste plek zoals in onderstaand voorbeeld:

<div class="drl-widget drl-player" drl-code="AHYrV4ULyqnN1S7gRWq45Q"></div>

 

Het attribuut drl-code verwijst naar de drill of toets. Merk op dat het niet meer nodig is om aan te geven of het om een drill of een toets gaat.

De widget loader zal de player inladen in het HTML-element met de  “drl-widget drl-player” class. Met CSS is de hoogte en breedte in te stellen, of om waar nodig de achtergrondkleur te beïnvloeden.

 

Voorbeeld

Onderstaand voorbeeld is een eenvoudige webpagina met daarop één Drillster player widget.

<!DOCTYPE html>

<html lang="en">

 <head>

   <title>Drillster player widget embedding</title>

   <style type="text/css">

     .drl-widget {

       height: 500px;

     }

   </style>

 </head>

 <body>

   <p>Here is a Drillster player widget:</p>

   <div class="drl-widget drl-player" drl-code="AHYrVtULyqnN1S7gRWq45Q"></div>

   <script src="https://www.drillster.com/widgets/loader.js" type="text/javascript"></script>

 </body>

</html>

 

Merk op dat er aan het eind van de pagina een verwijzing naar het widget-loader-script staat, en dat we CSS gebruiken om de hoogte van de payer in te stellen.

 

Meer weten

Voor meer informatie over het embedden van widgets, customizen en het luisteren naar events, zie de technische documentatie op https://www.drillster.com/info/developers/widgets.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk