Articles on: Developers & API
This article is also available in:

HTML embed code (widget) advanced integration

Widget sample code

   window.addEventListener("load", function () {
       var widget = new Drimify.Widget({
           autofocus: true,
           height: "600px",
           element: "drimify-container",
           engine: "",
           style: "border:0px solid #d1d1d1;",
       widget.onCompletion = function (data) {
           console.log("Game Data", data);


Create a Widget passing an Options object to the constructor:

var widget = new Drimify.Widget(options);

Setup Options


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.


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.


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.



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


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


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


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

For this game here are the sample game metrics returned:

data.gameMetrics.CurrentAttempt - The attempts 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


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, etc.)
data.credentials.publisherID - The publisher ID
data.credentials.sessionID - The session ID of the current player

Updated on: 24/11/2022

Was this article helpful?

Share your feedback


Thank you!