Configuration du Widget

Créez un Widget en passant un objet Options à la fonction Create :

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

Options de Configuration

Obligatoires

Option	Type	Description
options.element	string - HTMLElement	Le widget sera injecté dans cet élément HTML. Vous pouvez soit passer un accès direct à un élément existant, soit fournir l'ID string pour cet élément. Si vous ne fournissez pas cette propriété, il tentera de trouver un ID "digitaservice-widget" sur la page.
options.engine	string	L'URL absolue de l'application qui sera chargée dans le widget.

Optionnelles

Option	Type	Par Défaut	Description
options.height	string	auto	Par défaut, le widget a une hauteur de zéro avant d'être chargé. Vous pouvez remplacer cela par une valeur de remplacement pour éviter les sauts de page en fonction de l'endroit où le widget est utilisé sur la page parente. La valeur est en pixels comme "600px". Lorsque options.fixed = true, la hauteur sera fixe et des barres de défilement seront introduites.
options.autoscroll	boolean	true	La longueur du contenu du widget et l'affichage de l'utilisateur peuvent nécessiter que la page contenant le widget défile. Par défaut, lorsque l'utilisateur utilise le Widget, la page hôte défile jusqu'en haut du widget pour faciliter l'utilisation. Pour désactiver cela, définissez autoscroll sur false. Si options.fixed est true, cette propriété sera false.
options.sharingurl	string	L'URL hôte contenant le widget	Lors de l'utilisation du Partage Social, c'est l'URL que les gens partageront sur les réseaux sociaux pour les ramener à votre campagne. Si le partage est une chaîne vide, il utilisera la page hôte (contenant le widget) comme URL.
options.fixed	boolean	false	Normalement, le widget ajustera sa taille automatiquement pour s'adapter au contenu de l'engine et éviter les barres de défilement. Si ceci est défini sur true, alors la hauteur du widget restera constante et ne changera pas. Lors de l'utilisation de cette option, la valeur options.height doit être fixée à une valeur autre que "auto". Si la hauteur de l'engine est supérieure à la valeur de hauteur, des barres de défilement seront utilisées pour naviguer.
options.width	string	“100%”	La largeur du widget. Peut être définie avec une unité CSS telle que “%” ou “px” par exemple.

Chargement

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

Remarque : Assurez-vous de configurer les callbacks ci-dessous avant de charger pour pouvoir capturer tout événement.

```widget.load();```# Callbacks d'événement

onReady

Une fois que widget.load() a été appelé, cela chargera et initialisera le widget. Lorsque le widget a terminé ce processus, il invoquera un callback optionnel onReady.

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

onError

Une fois que widget.load() a été appelé, cela chargera et initialisera le widget. Toute erreur fatale survenant après ce point invoquera un callback optionnel onError.

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

onComplete

Une fois que le jeu est terminé et que l'utilisateur regarde l'écran final. Cela fournit également un objet données décrivant ce qui s'est passé dans le jeu.

Note : si vous souhaitez agir dessus, vous pourriez vouloir intégrer un délai à l'intérieur du callback pour que l'utilisateur ait le temps de lire l'Écran De Fin, car cela se produit instantanément lorsque l'on atteint le dernier écran. Vous pouvez également utiliser onClose.

widget.onComplete = function (event) {
   console.log(event.type); // “complete”
   console.log(event.data); // {}
   console.log("Le score de l'utilisateur était de" + event.data.gameMetrics.score);
};

onResize

Se produit lorsque le moteur a redimensionné, fournissant la hauteur comme valeur en pixels.

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

onClose

L'application peut être configurée avec un bouton fermer dédié permettant à l'utilisateur de fermer l'expérience implicitement. Si ce bouton est configuré et que l'utilisateur interagit avec, alors l'événement fermer sera déclenché. C'est un bon moment pour détruire le widget de votre page et terminer son cycle de vie.

widget.onClose = function () {
   DigitaService.Widget.Destroy();
};

onFirstInteraction

Lorsque l'utilisateur interagit (touche/clic) avec l'application chargée pour la première fois.

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

onRouteChange

Se produit lorsque l'application a changé de route au sein du widget. (Navigation entre les écrans). L'événement peut ou non contenir un objet données selon le contexte.

widget.onRouteChange = function (event) {
   console.log(event.type) // “routechange”
   console.log(event.data) // {} ou undefined
   console.log("L'utilisateur a interagi avec l'application pour la première fois");
};

onScrollToTop

Se produit lorsque l'application tente de revenir en haut de la page. Peut être utilisé sur la page parente pour s'assurer que le défilement n'est pas exécuté (CORS) ou doit être ajusté. L'événement ne contient pas d'objet données.

widget.onScrollToTop = function () {
   console.log("Défilement en haut");
};

Indicateurs

Voici une liste des indicateurs clés qui peuvent être utilisés en fonction du type de jeu :

Clé	Description
data.gameMetrics.CurrentAttempt	Les tentatives de l'utilisateur une fois qu'il a terminé le jeu.
data.gameMetrics.prizeID	L'ID du prix.
data.gameMetrics.prizeImage	L'image du prix.
data.gameMetrics.prizeName	Le nom du prix.
data.gameMetrics.prizeRef	La référence du prix.
data.gameMetrics.totalPossibleAttempts	Le nombre total de tentatives possibles.
data.gameMetrics.userWon	vrai/faux selon le statut de l'utilisateur.
data.gameMetrics.score	Le nombre total de points cumulés avec lesquels cet utilisateur termine le jeu.

Identifiants

Clé	Description
data.credentials.isPreviewMode	Vérifie si le jeu est en mode prévisualisation.
data.credentials.projectID	L'ID de l'application jouée actuellement.
data.credentials.projectLanguage	La langue du projet dans le widget (en, fr).
data.credentials.projectName	Le nom de l'application.
data.credentials.projectType	Le type d'application (quiz, memory...).
data.credentials.publisherID	L'ID de l'éditeur.
data.credentials.sessionID	L'ID de session du joueur actuel.

Mis à jour le : 22/02/2025