This article is also available in:
Widget sample code

<script>
window.addEventListener("load", function () {
var widget = new Drimify.Widget({
autofocus: true,
height: "600px",
element: "drimify-container",
engine: "https://go.drimify.com/spin/15/app.html?projectid=15560549585bbf7b1ce12e7833834002-5bbf7b1ce1334&lang=en",
style: "border:0px solid #d1d1d1;",
});
widget.load();
widget.onCompletion = function (data) {
console.log("Game Data", data);
};
});
</script>


Setup

Create a Widget passing an Options object to the constructor

var widget = new Drimify.Widget(options);

Setup Options

Required

options.element - string | HTMLElement - The widget will be injected into this HTMLElement. You may pass direct access to an existing HTMLElement or provide the string ID for that element.
options.engine - string - The content of the Widget pointing to the engine being used.

Optional

options.height - string = "0px" - By default, until loaded, the widget has a default height of zero. You may override this with a placeholder value to avoid page jumping depending on where the widget is used in the parent page. The value is in pixels.
options.autofocus - boolean = true - Depending on content length of the widget content and the display of the user, it may require that the page containing the widget requires scrolling of the hosting page. The default behavior when a user is using the Widget, is to scroll the hosting page to the top of the widget to aid usability. To disable this, set autofocus to false.
options.sharingurl - string = "" - When using Social Sharing, this is the URL that people will see on Social Media to bring them to your campaign. If sharing is an empty string, it will use the hosting page (containing the widget) as the URL.

Load

Once a Widget is set up, you must load it. You may load the widget at any time.
Note: Be sure to set up any of the callbacks below before loading so that you may catch all events.

widget.load();

onReady

Once widget.load() has been called, this will load and initialise the widget. When the widget has completed this process, it will invoke an optional onReady callback.```

widget.onReady = function () {
// loaded and ready to use
};


onError

Once widget.load() has been called, this will load and initialise the widget. Any fatal errors occurring after that point will invoke an optional onError callback.

widget.onError = function (reason) {
throw new Error(reason);
};


reason: string the reason why the widget threw an error

onCompletion

Once the game has been completed and the user is looking at the last screen. It also provides a data object describing what occurred in the game.

Note ‑ if you want to act on this, you may want to give a timeout inside the callback so that the user has time to read the End Screen as it occurs instantly when reaching the last screen.

widget.onCompletion = function (data) {
console.log("Users Score was" + data.gameMetrics.score);
};


Metrics

data.gameMetrics.score - The total amount of aggregate points that this user completes the game with.

For this game here is a sample game metrics returned:

data.gameMetrics.CurrentAttempt - The attempts when of the user once he completed the game
data.gameMetrics.prizeID - The prize ID
data.gameMetrics.prizeImage - The prize image
data.gameMetrics.prizeName - The prize name
data.gameMetrics.totalPossibleAttempts - The total amount of possible attempts
data.gameMetrics.userWon - true/false depending on the user status

Credentials

data.credentials.isPreviewMode - check if the game is in preview mode
data.credentials.projectID - the project id of the current app played
data.credentials.projectLanguage - the language of the project in the widget (en, fr)
data.credentials.projectLanguageRegion - (deprecated - will be removed soon)
data.credentials.projectName - the name of the app
data.credentials.projectType - the type of app (quiz, memory...)
data.credentials.publisherID - the publisher id
data.credentials.sessionID - the session id of the current player
Was this article helpful?
Cancel
Thank you!