Repertoire widget

A repertoire widget displays the repertoire of the authenticated user in the form of tiles.


Repertoire widget


Assuming that the widget loader is included in the page, a repertoire widget may be embedded as follows:

<div class="drl-widget drl-repertoire" id="repertoire"></div>


Attribute Description
drl-token The user's OAuth token. In order to display a user's repertoire, a valid access token is required.

An OAuth token may be obtained by using a standard service account or by using the custom delegated login API.
drl-search-disabled If set to true, suppresses the built in search functionality. Optional.


Currently the repertoire widget supports the following languages:

  • 🇪🇸 Catalan
  • 🇩🇰 Danish
  • 🇺🇸 English (US)
  • 🇩🇪 German
  • 🇪🇸 Spanish
  • 🇫🇮 Finnish
  • 🇫🇷 French
  • 🇮🇹 Italian
  • 🇳🇴 Norwegian
  • 🇳🇱 Dutch
  • 🇧🇷 Portuguese (BR)
  • 🇷🇴 Romanian
  • 🇷🇸 Serbian
  • 🇸🇪 Swedish

A repertoire widget's locale is determined as follows:

  1. stored language preference – for authenticated users there may be a stored language preference
  2. declared language of the containing page – the page that embeds the repertoire may have declared a language in the html tag using a lang attribute
  3. browser setting – there may be a preferred language set in the browser
  4. English – in all cases where the language preference cannot be determined, US English is used

If the requested language is not supported, the repertoire will use English (US). Additional localizations may be added in the future. If you require a specific localization that is not yet supported, please get in touch with us.

Client side events

The tile widget is able to emit the following client-side events.

Event Fired if Payload
INITIALIZED The repertoire widget was initialized. None
CLICKED A repertoire item was clicked. Playable object

Launching the player

An obvious use of the repertoire widget is to allow the Player widget to be launched when the user clicks on any of tiles. As the repertoire widget is a generic component, this is not the out-of-the-box behavior. However, with a little bit of glue logic this is easily achieved.

If a repertoire tile is clicked, a CLICKED event is emitted, including a reference to the object that was clicked. By listening to this event, and acting upon it, the appropriate player may be opened. Additionally, the same glue logic should also listen to a player's PLAYER_CLOSE event, and close the player widget.

The below code provides a working example of such an integration. Note that special care was taken to allow scrolling to work correctly in Mobile Safari.

<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Repertoire/Player widget integration example</title>
      .drl-widget.drl-repertoire {
          width: 100vw;
          height: 100vh;

      body {
          margin: 0;

      body.player-opened .drl-repertoire {
          display: none;

      .drl-widget.drl-player {
          position: fixed;
          top: -100%;
          left: 0;
          width: 100vw;
          height: 100%;
          transition: top .5s ease-in-out;

      .drl-player iframe {

      .drl-widget.drl-player.drl-visible {
          top: 0;
    <div class="drl-widget drl-repertoire"
    <div class="drl-widget drl-player"

    <script type="text/javascript">
      (function () {
          'use strict';

          // Programatically put the end user's OAuth token here
          var token = 'secret123';


          document.addEventListener('DOMContentLoaded', function () {
              var player = document.querySelector('.drl-widget.drl-player');

              drillster.widgets('repertoire').on('CLICKED', function (event) {
                  console.log('Playable clicked:', event);

              drillster.widgets('repertoire-player').on('PLAYER_CLOSE', function (event) {
                  console.log('Player closed:', event);
                  player.innerHTML = '';
    <script src="" type="text/javascript"></script>


Last updated on