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

Exemplo 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 na carga 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 Opções para a função Criar:

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


Opções de configuração



Obrigatórias



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


Opcionais



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 espaço reservado para evitar o salto da página, dependendo de onde o widget é usado na página pai. O valor é em pixels, como "600px". Quando usar options.fixed = true, o valor da altura será bloqueado para o valor fornecido, introduzindo barras de rolagem.
options.autoscrollbooleantrueDependendo do comprimento do conteúdo do widget e a exibição do usuário, pode ser necessário que a página contendo o widget precise de rolagem da página de hospedagem. O comportamento padrão quando um usuário está usando o Widget, é rolar a página de hospedagem até o topo do widget para auxiliar a usabilidade. Para desativar isso, defina o autoscroll como falso. Esta propriedade será falsa se options.fixed for verdadeiro.
options.sharingurlstringA URL de hospedagem contendo o widgetAo usar o compartilhamento social, esta é a URL que as pessoas compartilharão nas redes sociais para trazê-las à sua campanha. Se o compartilhamento for uma string vazia, ele usará a página de hospedagem (contendo o widget) como URL.
options.fixedbooleanfalseGeralmente, o widget muda de tamanho automaticamente para se ajustar ao conteúdo do motor e evitar barras de rolagem. Se isso for definido como verdadeiro, 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 que não seja "auto". Se a altura do motor for maior que o valor da altura, as barras de rolagem serão usadas para navegação.
options.widthstring“100%”A largura do widget. Pode ser definido para uma medida CSS como “%” ou “px”, por exemplo.


Carregar



Depois de configurar um Widget, você deve carregá-lo. Você pode carregar o widget a qualquer momento.

Nota: Certifique-se de configurar qualquer um dos callbacks abaixo antes de carregar, para que você possa capturar 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 irá executar um callback onReady opcional.

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


onError


Depois que widget.load() foi chamado, isso irá carregar e inicializar o widget. Quaisquer erros fatais ocorridos após esse ponto irão executar um 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 sobre isso, você 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 à última tela. Você também pode usar onClose.

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


onResize


Ocorre quando o motor redimensionou, fornece 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 fechar dedicado que permite ao usuário fechar implicitamente a experiência. Se este botão estiver configurado e o usuário interagir com ele, o evento de fechamento será disparado. Este é um bom momento para destruir o widget em sua página e terminar 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("O usuário interagiu com a Aplicação pela primeira vez");
};


onRouteChange


Ocorre quando a Aplicação mudou a 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) // “mudança de rota”
   console.log(event.data) // {} ou indefinido
   console.log("O 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.userWontrue/false 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á em modo de visualização.
data.credentials.projectIDO ID do projeto da aplicação atual em que se está a jogar.
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 editor.
data.credentials.sessionIDO ID da sessão do jogador atual.

Actualizado em: 29/02/2024

Esse artigo foi útil?

Partilhe o seu feedback

Cancelar

Obrigado!