Documentation

Slot Tracker Widgets were created with the ambition to replicate the ease of integration of Facebook widgets and GoogleAnalytics. They are then inline nodes with js scripts that load the functionality and add the content. This means that the widgets are responsive and their styles are customizable, even to an individual level.

Another principle is asynchronicity. The loading of the widget should not limit the loading of the page. The functionality and content are loaded after the content of the original page are loaded.

Example of Real Game Stats Widget for the game "Gonzo's Quest"

Inline

To achieve responsiveness and grant the possibility of style customization, we opted to have the widgets loaded into div tags that can be added anywhere in the document. The content is loaded on the div with an id attribute that can be set up by the integrator to avoid any type of conflict.

Example:

...
<div id="st-widget-1"></div>
...

Library Script

A library is loaded asynchronously via a script tag. This fetches the functionality necessary to fetch the correct data and add the content to the inline div.

Example:

...
<script src="https://widget.slottracker.com/resources/v1/widget.js" defer></script>
...

Queue

To keep the principle of asynchronicity, and in case there is any error, the widgets are not loaded right away. They are declared in a queue, then run once the library and the rest of the content of the page are loaded.

Example:

...
<script>
  const StwQueue = [
    {
      domElementId: '[DIV_ID]',
      provider: '[PROVIDER]',
      game: '[GAME]',
      type: '[WIDGET_TYPE]'
    }
  ];
</script>
...
An example of this use is available here.

Manual execution

It is possible to load and execute the building of the widget using the createSTW method available in the ST class from the widget library. The arguments for this method are loaded the same way the queue is declared:

Example:

...
<script>
  STW.createSTW([
    {
      domElementId: '[DIV_ID]',
      provider: '[PROVIDER]',
      game: '[GAME]',
      type: '[WIDGET_TYPE]'
    }
  ]);
</script>
...
An example of this use is available here.

Parameters

Common

Every Widget has the following parameters in common:

name required type description
domElementId required string

The corresponding id attribute of the div tag to display the content in.

type required string

The type of widget to display.

cta optional boolean

Flags whether the CTA button should be shown or not. It is set to true as default.

ctaUrl optional string

The URL to use for the CTA button. If none is provided, this will be set automatically to the SlotTracker site.
Notice that the default URL can change depending on the widget type.

lang optional string

The language to translate the content to. The value should be formatted in ISO-639-1. Languages currently available are English (en) and Swedish (sv).

debug optional boolean

Flags if console error and warning messages should be displayed. It is set to false as default.

Real Game Stats

What follows are the parameters specific to the Real Game Stats widget:

name required type description
type required string

The type value to display a Real Game Stats widget must be real-game-stats.

provider required string

The slug of the provider of the game to cover.

game required string

The slug of the game to cover.

ctaUrl optional string

The URL to use for the CTA button. If none is provided, this will be set automatically to the specific game page of the SlotTracker site.
See ctaUrl on the Common Parameters table.

minSpinsRequired optional number

The minimum number of tracked spins to show the widget.