Este artigo também está disponível em:

Integração Avançada do Código de Integração HTML (widget) via API

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

   <!-- Configurar o widget no carregamento da página -->
   <script>
       window.addEventListener('load', function () {
           var widget = DigitaService.Widget.Create({
               autoscroll: true,
               element: 'gamification-widget',
               engine: 'https://apps.drimify.com/XBs15jKF/',
               fixed: false,
               height:['auto'],
               sharingurl: 'https://apps.drimify.com/XBs15jKF/',
               width: '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>

Configuração

Crie um Widget passando um objeto de Opções para a função Create:

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

Opções de Configuração

Obrigatório

Opção	Tipo	Descrição
options.element	string - HTMLElement	O widget será injetado neste HTMLElement. Pode passar o acesso direto a um HTMLElement existente ou fornecer o ID da string para esse elemento. Se não fornecer esta propriedade, tentará encontrar um id "digitaservice-widget" na página.
options.engine	string	O URL absoluto da aplicação que será carregada no widget.

Opcional

Opção	Tipo	Padrão	Descrição
options.height	string	auto	O widget tem uma altura padrão de zero antes de ser carregado. Pode substituir isto com um valor de espaço reservado para evitar saltos de página dependendo de onde o widget é usado na página mãe. O valor é em pixels, como "600px". Ao usar options.fixed = true o valor da altura será bloqueado ao valor fornecido introduzindo barras de rolagem.
options.autoscroll	boolean	true	Dependendo do comprimento do conteúdo do widget e da exibição do usuário, pode ser necessário que a página que contém o widget exija a rolagem da página hospedeira. O comportamento padrão quando um usuário está usando o Widget, é rolar a página hospedeira para o topo do widget para auxiliar na usabilidade. Para desativar isso, defina autoscroll como falso. Esta propriedade será falsa se options.fixed for verdadeiro.
options.sharingurl	string	O URL de hospedagem contendo o widget	Ao usar Compartilhamento Social, este é o URL que as pessoas compartilharão nas Redes Sociais para levá-las à sua campanha. Se o compartilhamento for uma string vazia, usará a página de hospedagem (contendo o widget) como URL.
options.fixed	boolean	false	Geralmente o widget mudará de tamanho automaticamente para se ajustar ao conteúdo do motor e evitar barras de rolagem. Se isso for definido como verdadeiro, então a altura do widget será persistente e não mudará. Ao usar esta opção, o valor options.height deve ser definido para qualquer coisa diferente de "auto". Se a altura do motor for maior que o valor da altura, as barras de rolagem serão usadas para navegar.
options.width	string	"100%"	A largura do widget. Pode ser definida para uma medição CSS como "%" ou "px", por exemplo.

Carregar

Uma vez configurado o Widget, deve carregá-lo. Pode carregar o widget a qualquer momento.

Nota: Certifique-se de configurar qualquer um dos callbacks abaixo antes de carregar para que possa capturar todos os eventos.

widget.load();

Callbacks de Eventos

onReady

Uma vez que widget.load() tenha sido chamado, isto carregará e inicializará o widget. Quando o widget completar este processo, invocará um callback onReady opcional.

widget.onReady = function (event) {
   // carregado e pronto para usar
   console.log(event.type); // “ready”
   console.log(event.data); // {}
};

onError

Uma vez que widget.load() tenha sido chamado, isto carregará e inicializará o widget. Quaisquer erros fatais ocorrendo após esse ponto invocarão um callback onError opcional.

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

onComplete

Uma vez que o jogo tenha sido completado e o usuário está olhando para a última tela. Também fornece um objeto de dados descrevendo o que ocorreu no jogo.

Nota: se quiser agir sobre isso, pode querer dar um tempo dentro do callback para que o usuário tenha tempo para ler a Tela Final, pois ocorre instantaneamente ao chegar na última tela. Também pode usar onClose.

widget.onComplete = function (event) {
   console.log(event.type); // “complete”
   console.log(event.data); // {}
   console.log("A pontuação dos Usuários foi" + event.data.gameMetrics.score);
};

onResize

Ocorre quando o Motor foi redimensionado, fornece a altura como um valor em pixels.

widget.onResize = function (event) {
   console.log(event.type); // “resize”
   console.log(event.data); // {}
   console.log("Altura da Aplicação:" + event.data.height);
};

onClose

A aplicação pode ser configurada com um botão de fechar dedicado que permite ao usuário fechar implicitamente a experiência. Se este botão for configurado e o usuário interagir com ele, então o evento de fechamento será despachado. Este é um bom momento para destruir o widget da sua página e termina o ciclo de vida do widget.

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

onFirstInteraction

Quando o usuário interage (toque/clique) com a aplicação carregada pela primeira vez.

widget.onFirstInteraction = function () {
   console.log("Usuário interagiu com a Aplicação pela primeira vez");
};

onRouteChange

Ocorre quando a Aplicação mudou de rota dentro do widget. (Navega entre telas). O evento pode ou não conter um objeto de dados dependendo do contexto.

widget.onRouteChange = function (event) {
   console.log(event.type) // “routechange”
   console.log(event.data) // {} ou indefinido
   console.log("Usuário interagiu com a Aplicação pela primeira vez");
};

onScrollToTop

Ocorre quando a Aplicação está tentando rolar de volta para o topo da página. Pode ser usado na página pai para garantir que a rolagem não seja disparada (CORS) ou precise ser ajustada. O evento não contém um objeto de dados.

widget.onScrollToTop = function () {
   console.log("Rolar Para o Topo");
};

Métricas

Aqui está uma lista das principais métricas que podem ser usadas dependendo do tipo de jogo:

Chave	Descrição
data.gameMetrics.CurrentAttempt	As tentativas do usuário uma vez que ele completou o jogo.
data.gameMetrics.prizeID	O ID do prêmio.
data.gameMetrics.prizeImage	A imagem do prêmio.
data.gameMetrics.prizeName	O nome do prêmio.
data.gameMetrics.totalPossibleAttempts	A quantidade total de tentativas possíveis.
data.gameMetrics.userWon	verdadeiro/falso dependendo do status do usuário.
data.gameMetrics.score	A quantidade total de pontos agregados com que este usuário completa o jogo.

Credenciais

Chave	Descrição
data.credentials.isPreviewMode	Verifica se o jogo está no modo de visualização.
data.credentials.projectID	O id da aplicação do aplicativo atual jogado.
data.credentials.projectLanguage	O idioma do projeto no widget (en, fr).
data.credentials.projectName	O nome do aplicativo.
data.credentials.projectType	O tipo do aplicativo (quiz, memória...).
data.credentials.publisherID	O id do publicador.
data.credentials.sessionID	O id da sessão do jogador atual.

Actualizado em: 18/04/2024

Esse artigo foi útil?

Obrigado!