Drillster Support & Info

Embedding the new Drillster Player


With the launch of the new Drillster player in August of 2017, we have also updated the way that player widgets can be embedded on your own website or in third party systems.


The old way to embed a drill or test

Previously, a drill would be embedded by adding an iframe tag to the third party site. For example:

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


Embedding a test used to work slightly differently:

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


It was possible to adjust the height and width of the widgets by adding width and height attributes, or by applying CSS on the iframe object.

This brings up the legacy drill or test widget. The old functionality will continue to be available for the time being, but no new functional development will be carried out on it.


Embedding the new player

Embedding the new player on a third party website works slightly differently, but is more flexible and allows for more interaction between player and third party system.

In order to embed one or more players on a page, a reference to the widget loader script must be present on the page. This can be done by adding the following line of code, preferably just before the closing </body> tag:

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


The widget loader is a small Javascript library that takes care of loading and displaying various Drillster widgets, not just the player widget. It also allows the containing page to listen to events that take place within the embedded widgets.

Once the reference to the widget loader is present, embedding a player widget becomes very simple. It is just a matter of adding a line of code like the below example in the appropriate place:

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


The attribute drl-code refers to the drill or test. Note that it is no longer necessary to distinguish between drills or tests.

The widget loader will instantiate the player widget inside the element that has the “drl-widget drl-player” classes. Use CSS to set a width and height, and control the background color where appropriate.



The below example shows a very simple web page that contains a single Drillster player widget.

<!DOCTYPE html>

<html lang="en">


   <title>Drillster player widget embedding</title>

   <style type="text/css">

     .drl-widget {

       height: 500px;





   <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>




Note the presence of the reference to the loader script at the bottom, and a bit of CSS to set the height of the player widget.


Further reading

For more information about embedding widgets, customizing and subscribing to events, please consult the technical documentation at https://www.drillster.com/info/developers/widgets.

Have more questions? Submit a request


Please sign in to leave a comment.