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 pacotes -->
   <script src="https://cdn-apps.drimify.com/prod/widget/index.js" type="text/javascript"></script>

   <!-- Configurar o widget durante o 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 Options 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á inserido neste HTMLElement. Podes passar acesso direto a um HTMLElement existente ou fornecer o ID em string para esse elemento. Se não forneceres esta propriedade, tentará encontrar um id “digitaservice-widget” na página.
options.engine	string	A URL absoluta para a 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. Podes alterar isto com um valor de placeholder para evitar saltos de página, dependendo de onde o widget é usado na página principal. O valor está em pixels, como "600px". Ao usar options.fixed = true o valor da altura será fixado ao valor fornecido, introduzindo barras de rolagem.
options.autoscroll	boolean	true	Dependendo do comprimento do conteúdo do widget e da exibição do utilizador, pode ser necessário que a página que contém o widget precise de rolagem na página que o hospeda. O comportamento padrão quando um utilizador está a usar o Widget é de rolar a página hospedada até o topo do widget para facilitar a usabilidade. Para desativar isto, define autoscroll como falso. Esta propriedade será falsa se options.fixed for verdadeiro.
options.sharingurl	string	A URL de hospedagem contendo o widget	Ao usar Partilha Social, esta é a URL que as pessoas irão partilhar nas Redes Sociais para as levar à tua campanha. Se a partilha for uma string vazia, usará a página de hospedagem (contendo o widget) como a URL.
options.fixed	boolean	false	Normalmente, o widget mudará de tamanho automaticamente para se ajustar ao conteúdo do engine e evitar barras de rolagem. Se isto estiver 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 algo diferente de "auto". Se a altura do engine for maior do que o valor da altura, barras de rolagem serão usadas para navegação.
options.width	string	“100%”	A largura do widget. Pode ser definido para uma medida CSS como "%” ou "px", por exemplo.

Carregar

Uma vez que um Widget esteja configurado, deves carregá-lo. Podes carregar o widget a qualquer momento.

Nota: Certifica-te de configurar todos os callbacks abaixo antes de carregar para que possas capturar todos os eventos.

widget.load();

Event Callbacks

onReady

Uma vez chamado widget.load(), isto irá carregar e inicializar o widget. Quando o widget concluir este processo, ele irá invocar um callback opcional onReady.

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

onError

Uma vez chamado widget.load(), isto irá carregar e inicializar o widget. Qualquer erro fatal que ocorra depois deste ponto irá invocar um callback opcional onError.

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

onComplete

Quando o jogo for concluído e o utilizador estiver a visualizar o último ecrã. Também fornece um data object descrevendo o que aconteceu no jogo.

Nota: se quiser agir sobre isto, pode querer colocar um timeout dentro do callback para que o utilizador tenha tempo de ler o Ecrã Final, pois ocorre instantaneamente quando se atinge o último ecrã. Pode também usar onClose.

widget.onComplete = function (event) {
   console.log(event.type); // “complete”
   console.log(event.data); // {}
   console.log("Pontuação do Utilizador foi" + event.data.gameMetrics.score);
};

onResize

Ocorre quando o Engine redimensiona, fornecendo 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 utilizador fechar a experiência. Se este botão for configurado e o utilizador interagir com ele, o evento de fechar será dispatch. Esta é uma boa altura para destruir o widget da sua página e encerrar o ciclo de vida do widget.

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

onFirstInteraction

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

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

onRouteChange

Ocorre quando a Aplicação mudou de rota dentro do widget. (Navegação entre ecrãs). O evento pode ou não conter um data object dependendo do contexto.

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

onScrollToTop

Ocorre quando a Aplicação tenta scrollar de volta para o topo da página. Pode ser usado na página principal para garantir que o scroll não seja acionado (CORS) ou precise ser ajustado. O evento não contém um data object.

```widget.onScrollToTop = function () {
console.log("Scroll Para 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	O número de tentativas do utilizador ao completar 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.prizeRef	A referência do prémio.
data.gameMetrics.totalPossibleAttempts	A quantidade total de tentativas possíveis.
data.gameMetrics.userWon	true/false dependendo do estado do utilizador.
data.gameMetrics.score	A quantidade total de pontos acumulados com que este utilizador termina o jogo.

Credenciais

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

Actualizado em: 01/08/2024

Esse artigo foi útil?

Obrigado!