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:
Embedding a test used to work slightly differently:
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:
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.
<title>Drillster player widget embedding</title>
<p>Here is a Drillster player widget:</p>
<div class="drl-widget drl-player" drl-code="AHYrVtULyqnN1S7gRWq45Q"></div>
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.
For more information about embedding widgets, customizing and subscribing to events, please consult the technical documentation at https://www.drillster.com/info/developers/widgets.