Exemple de code du widget

<html>
<head>
   <!-- Inclure les bundles -->
   <script src="https://cdn-apps.drimify.com/prod/widget/index.js" type="text/javascript"></script>

   <!-- Configurer le widget au chargement de la page -->
   <script>
       fenêtre.addEventListener('load', function () {
           var widget = DigitaService.Widget.Create({
               autoscroll: true,
               element: 'gamification-widget',
               engine: 'https://apps.drimify.com/Rf6aGmBR/',
               fixed: false,
               hauteur:['auto'],
               sharingurl: 'https://apps.drimify.com/Rf6aGmBR/',
               largeur: '100%',
           });
           widget.onReady = function (event) {};
           widget.onComplete = function (event) {};
           widget.onFirstInteraction = function () {};
           widget.onRouteChange = function (event) {};
           widget.onScrollToTop = function () {};
           widget.onClose = function () {};
           widget.onError = function (errorEvent) {};
           widget.load();
       });
   </script>
</head>
<body>
<div id="gamification-widget"></div>
</body>
</html>

Configuration

Créez un widget en passant un objet d’options à la fonction Create :

var widget = DigitaService.Widget.Create(options);

Options de configuration

Obligatoires

Facultatives

Chargement

Une fois le widget configuré, vous devez le charger. Vous pouvez le faire à tout moment.

Remarque : veillez à configurer les fonctions de rappel ci-dessous avant le chargement pour ne manquer aucun événement.

widget.load();

Fonctions de rappel des événements

onReady

L’appel à widget.load() lance le chargement et l’initialisation du widget. Une fois cette étape terminée, le widget appelle la fonction de rappel facultative onReady.

Remarque : onReady est déclenché avant l’affichage du premier écran. Le premier événement onRouteChange indique que le participant peut voir du contenu. Si l’expérience ne peut pas démarrer, onReady n’est pas déclenché et onError est appelé à la place.

widget.onReady = function (event) {
   // Chargé et prêt à l’emploi
   console.log(event.type); // “ready”
   console.log(event.data); // {}
};

onError

L’appel à widget.load() lance le chargement et l’initialisation du widget. Toute erreur fatale survenant à partir de ce moment déclenche la fonction de rappel facultative onError.

widget.onError = function (event) {
   console.log(event.data.message); // Par exemple : "ERR_15"
};

onComplete

Cette fonction est appelée lorsque le jeu est terminé et que l’utilisateur consulte le dernier écran. Elle fournit également un objet de données décrivant ce qui s’est passé pendant le jeu.

Remarque : si vous souhaitez lancer une action à ce stade, prévoyez un délai dans la fonction de rappel pour laisser à l’utilisateur le temps de lire l’écran de fin. En effet, cet événement se déclenche dès l’arrivée sur le dernier écran. Vous pouvez également utiliser onClose.

widget.onComplete = function (event) {
   console.log(event.type); // “complete”
   console.log(event.data); // {}
   console.log("Score de l’utilisateur : " + event.data.gameMetrics.score);
};

onResize

Cet événement se déclenche lorsque l’application est redimensionnée et fournit sa hauteur en pixels.

widget.onResize = function (event) {
   console.log(event.type); // “resize”
   console.log(event.data); // {}
   console.log("Hauteur de l’application : " + event.data.height);
};

onFirstInteraction

Cet événement se déclenche lorsque l’utilisateur interagit pour la première fois avec l’application chargée, par un toucher ou un clic.

widget.onFirstInteraction = function () {
   console.log("L’utilisateur a interagi avec l’application pour la première fois");
};

onRouteChange

Cet événement se déclenche lorsque l’application change de route dans le widget, c’est-à-dire lorsqu’elle passe d’un écran à un autre. Selon le contexte, l’événement peut contenir ou non un objet de données.

widget.onRouteChange = function (event) {
   console.log(event.type) // “routechange”
   console.log(event.data) // {} ou undefined
   console.log("L’utilisateur est passé à un nouvel écran");
};

onScrollToTop

Cet événement se déclenche lorsque l’application tente de faire défiler la page vers le haut. Il peut être utilisé sur la page parente pour gérer les cas où le défilement ne se déclenche pas en raison des restrictions CORS, ou lorsqu’il doit être ajusté. Cet événement ne contient pas d’objet de données.

widget.onScrollToTop = function () {
   console.log("Défilement vers le haut de la page");
};

Indicateurs

Voici les principaux indicateurs disponibles selon le type de jeu :

Informations d’identification

Gestion des erreurs

Il existe deux méthodes principales pour détecter les erreurs et obtenir des informations sur les problèmes qui surviennent dans le widget :

Fonction de rappel onError

La fonction de rappel onError intercepte les erreurs fatales : l’expérience ne peut pas démarrer ou ne peut pas se rétablir après une erreur. Le code d’erreur est disponible dans event.data.message. Dans ces cas, onReady n’est pas déclenché.

widget.onError = function (event) {
    if (event.data && typeof event.data.message !== 'undefined') {
        basculer (event.data.message) {
            par défaut:
                // Ne rien faire
                break;
            case 'ERR_04':
                console.log("Quota de vues épuisé");
                break;
            case 'ERR_05':
                console.log("Erreur de sécurité");
                break;
            case 'ERR_07':
                console.log("Application non publiée");
                break;
            case 'ERR_08':
                console.log("Application Premium indisponible");
                break;
            case 'ERR_09':
                console.log("Identifiant de session non détecté");
                break;
            case 'ERR_10':
                console.log("Identifiant de session non autorisé");
                break;
            case 'ERR_13':
                console.log("Échec de l’appel SSO");
                break;
            case 'ERR_14':
                console.log("Langue indisponible");
                break;
            case 'ERR_15':
                console.log("La page n’existe pas");
                break;
            case 'ERR_17':
                console.log("Configuration SSO non valide");
                break;
            case 'ERR_21':
                console.log("Aucun jeu associé au Combo ou au Dynamic Path");
                break;
        }
    }
};

Fonction de rappel onRouteChange

La fonction de rappel onRouteChange se déclenche lorsque l’application passe d’un écran à un autre dans le widget. Elle permet notamment de suivre les erreurs liées à l’état de l’application et à la disponibilité du contenu.

widget.onRouteChange = function (event) {
    if (event.data && typeof event.data.errorCode !== 'undefined') {
        basculer (event.data.errorCode) {
            par défaut:
                // Ne rien faire
                break;
            case 'ERR_02':
                console.log("Le contenu n’est pas encore disponible");
                break;
            case 'ERR_03':
                console.log("Le contenu a expiré");
                break;
            case 'ERR_04':
                console.log("Quota de vues épuisé");
                break;
            case 'ERR_16':
                console.log("Aucune question disponible");
                break;
            case 'ERR_18':
                console.log("Entre deux périodes d’activation");
                break;
            case 'ERR_19':
                console.log("En dehors des horaires d’ouverture");
                break;
        }
    }
};

errorCode n’est présent que sur ces écrans d’indisponibilité. Les autres écrans qui empêchent le participant de jouer (participation déjà effectuée, restrictions d’accès, formulaires refusés) ne comportent pas de propriété errorCode : identifiez-les à l’aide du nom d’écran indiqué dans event.data.screen.

Pour consulter la liste complète des noms d’écran, l’ordre des événements au chargement, le fonctionnement de session_uid et les délais d’expiration du chargement, reportez-vous à Cycle de vie du widget et gestion des erreurs.

Récupérer les informations de l’utilisateur sur l’écran de fin (onRouteChange)

Lorsque vous utilisez Dynamic Path™, Advent Calendar ou Combo™, vous pouvez récupérer les informations de l’utilisateur à la fin de chaque jeu à l’aide de la fonction de rappel onRouteChange.

Cette méthode est nécessaire, car l’événement standard onComplete ne se déclenche qu’une fois l’ensemble de l’expérience à plusieurs étapes terminé, et non à la fin de chaque jeu intégré.

Votre système peut ainsi recevoir tous les résultats du jeu (via gameInfo) lorsque l’utilisateur atteint l’écran de fin de l’expérience.

Configuration

Après avoir créé votre widget :

var widget = DigitaService.Widget.Create(options);

Ajoutez l’écouteur d’événement onRouteChange :

widget.onRouteChange = function (event) {
    console.log(event.type);   // "routechange"
    console.log(event.data);   // { ... } ou undefined
    console.log("L’utilisateur est passé à un nouvel écran");
};

```# Détecter l’écran de fin

Lorsque l’utilisateur atteint l’écran de fin du jeu, le widget renvoie une route correspondant à :

event.data.screen === 'screen_end-YOUR_APP_ID'

Remplacez `YOUR_APP_ID` par l’identifiant de votre application.

# Récupérer les informations de l’utilisateur (`gameInfo`)

Une fois l’écran de fin détecté, vous pouvez récupérer les données :

event.data.gameInfo

`gameInfo` contient un **tableau d’informations sur l’utilisateur**, qui peut inclure :
* Les données saisies par l’utilisateur
* Les résultats ou les scores du jeu
* Les champs renseignés au cours de l’expérience

Ces données ne sont disponibles que sur l’écran de fin des expériences utilisées dans **Dynamic Path**, **Advent Calendar** ou **Combo**.

# Exemple

widget.onRouteChange = function (event) {
if (event.data && event.data.screen === 'screen_end-12345') {
const données = event.data.gameInfo;
console.log("End écran info:", data);
// Process ou forward this information as needed
}
};

Mis à jour le : 29/10/2026