Artigos sobre: Programadores e API
Este artigo também está disponível em:

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

Amostra de código do Widget



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

   <!-- Configurar o widget em 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);


Configuração de opções



Obrigatório



OpçãoTipoDescrição
options.elementstring - HTMLElementO widget será injetado neste HTMLElement. Você pode passar acesso direto a um HTMLElement existente ou fornecer o ID da string para esse elemento. Se você não fornecer essa propriedade, tentará encontrar um ID de “digitaservice-widget” na página.
options.enginestringO URL absoluto para a aplicação que será carregado no widget.


Opcional



OpçãoTipoPadrãoDescrição
options.heightstringautoO widget tem uma altura padrão de zero antes de ser carregado. Você pode substituir isso com um valor de marcador para evitar saltos de página, dependendo de onde o widget é usado na página pai. O valor está em pixels, como “600px”. Quando usar options.fixed = true o valor da altura será bloqueado ao valor fornecido introduzindo barras de rolagem.
options.autoscrollbooleantrueDependendo do comprimento do conteúdo do Widget e da exibição do usuário, pode ser necessário que a página contendo o widget requer rolagem da página hospedada. O comportamento padrão quando um usuário está usando o Widget, é rolar a página hospedada para o topo do Widget para auxiliar a usabilidade. Para desativar isso, defina autoscroll como falso. Esta propriedade será falsa se options.fixed for verdadeiro.
options.sharingurlstringO URL de hospedagem contendo o widgetAo usar o compartilhamento social, este é o URL que as pessoas compartilharão nas redes sociais para trazê-las para sua campanha. Se compartilhar é uma string vazia, usará a página de hospedagem (contendo o widget) como o URL.
options.fixedbooleanfalseNormalmente o widget irá 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 algo 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.widthstring“100%”A largura do Widget. Pode ser definido para uma medida CSS como “%” ou “px” por exemplo.


Carregar



Uma vez que um widget está configurado, você deve carregá-lo. Você pode carregar o widget a qualquer momento.

Nota: Certifique-se de configurar qualquer uma das chamadas de retorno abaixo antes de carregar para que você possa pegar todos os eventos.

widget.load();


CallBacks de Eventos



onReady


Uma vez que widget.load() foi chamado, isso irá carregar e inicializar o widget. Quando o widget concluiu esse processo, ele invocará uma 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() foi chamado, isso irá carregar e inicializar o widget. Quaisquer erros fatais ocorrendo depois desse ponto invocarão uma callBack onError opcional.

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


onComplete


Uma vez que o jogo foi concluído e o usuário está olhando para a última tela. Ele também fornece um objeto de dados descrevendo o que ocorreu no jogo.

Nota: se você quiser agir nisso, é possível que queira dar um tempo limite dentro da callBack para que o usuário tenha tempo para ler a tela final já que ocorre instantaneamente ao chegar à última tela. Você também pode usar onClose.

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


onResize


Ocorre quando o motor foi redimensionado, fornecendo a altura como um valor de pixel.

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 fechamento dedicado que permite ao usuário fechar a experiência implicitamente. Se este botão estiver configurado e o usuário interagir com ele, o evento de fechamento será enviado. Este é um bom momento para destruir o widget da sua página e finalizar 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 as 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) // {} or undefined
   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:

ChaveDescrição
data.gameMetrics.CurrentAttemptAs tentativas do usuário uma vez que ele completou o jogo.
data.gameMetrics.prizeIDO ID do prêmio.
data.gameMetrics.prizeImageA imagem do prêmio.
data.gameMetrics.prizeNameO nome do prêmio.
data.gameMetrics.totalPossibleAttemptsA quantidade total de tentativas possíveis.
data.gameMetrics.userWonverdadeiro/falso dependendo do status do usuário.
data.gameMetrics.scoreA quantidade total de pontos agregados que este usuário completa o jogo com.


Credenciais


ChaveDescrição
data.credentials.isPreviewModeVerifique se o jogo está no modo de visualização.
data.credentials.projectIDO ID do projeto da aplicação atual que foi jogada.
data.credentials.projectLanguageA língua do projeto no widget (en, fr).
data.credentials.projectLanguageRegion(Será removido em breve.)
data.credentials.projectName O nome da aplicação.
data.credentials.projectTypeO tipo de aplicação (quiz, memória...).
data.credentials.publisherIDO ID do publicador.
data.credentials.sessionIDO ID da sessão do jogador atual.

Actualizado em: 09/02/2024

Esse artigo foi útil?

Partilhe o seu feedback

Cancelar

Obrigado!