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

Widget Exemplo de Código

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

   <!-- Configure 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/Rf6aGmBR/',
               fixed: false,
               altura:['auto'],
               sharingurl: 'https://apps.drimify.com/Rf6aGmBR/',
               largura: '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órios

Opcionais

Carregar

Depois de configurar um Widget, você 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 Evento

onReady

Após widget.load() ser chamado, ele carregará e inicializará o widget. Quando o widget tiver concluído este processo, invocará um callback opcional onReady.

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

onError

Após widget.load() ser chamado, ele carregará e inicializará o widget. Quaisquer erros fatais ocorridos após esse ponto invocarão um callback opcional onError.

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

onComplete

Uma vez que o jogo tenha sido concluído e o utilizador esteja olhando para a tela final. Também fornece um data object descrevendo o que ocorreu no jogo.

Nota: se deseja atuar sobre isso, pode querer dar um tempo limite dentro do callback para que o utilizador tenha tempo para ler a Tela Final, já que ocorre instantaneamente ao alcançar a tela final. Também pode usar onClose.

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

onResize

Ocorre quando a Engine foi redimensionada, 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);
};

onFirstInteraction

Quando o utilizador interage (toca/clica) 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 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 undefined
   console.log("Utilizador navegou para uma nova tela");
};

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 o scroll não seja disparado (CORS) ou precise ser ajustado. 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:

Credenciais

Tratamento de Erros

Existem duas maneiras principais para detectar erros e obter informações sobre problemas ocorrendo dentro do widget:

Callback onError

O callback onError captura quaisquer erros fatais que ocorrem depois que o widget é carregado. Isso pode ser útil para identificar quando uma página não existe ou se um erro crítico ocorre.

widget.onError = function (event) {
    if (typeof event.data.message !== 'undefined') {
        switch (event.data.message) {
            default:
                // Não fazer nada
                break;
            case 'ERR_15':
                console.log("Página não existe");
                break;
        }
    }
};

Callback onRouteChange

O callback onRouteChange é acionado quando a aplicação navega entre diferentes telas dentro do widget. Isso é útil para rastrear erros relacionados ao estado da aplicação e à disponibilidade do conteúdo.

widget.onRouteChange = function (event) {
    if (typeof event.data.errorCode !== 'undefined') {
        switch (event.data.errorCode) {
            default:
                // Não fazer nada
                break;
            case 'ERR_01':
                console.log("Nenhum plano disponível");
                break;
            case 'ERR_02':
                console.log("Conteúdo ainda não disponível");
                break;
            case 'ERR_03':
                console.log("Conteúdo expirado");
                break;
            case 'ERR_04':
                console.log("Sem mais visualizações");
                break;
            case 'ERR_05':
                console.log("Erro de segurança");
                break;
            case 'ERR_07':
                console.log("Aplicação não publicada");
                break;
            case 'ERR_08':
                console.log("Aplicação Premium não disponível");
                break;
            case 'ERR_09':
                console.log("UID da sessão não detectado");
                break;
            case 'ERR_10':
                console.log("UID da sessão já utilizado");
                break;
            case 'ERR_11':
                console.log("Plano não ativado");
                break;
            case 'ERR_12':
                console.log("Dados incorretos recebidos");
                break;
            case 'ERR_13':
                console.log("Falha na chamada SSO");
                break;
            case 'ERR_14':
                console.log("Idioma indisponível");
                break;
        }
    }
};

Utilizando tanto onError quanto onRouteChange, pode-se efetivamente rastrear e lidar com problemas que possam ocorrer dentro do widget, garantindo uma melhor experiência do utilizador.

Obtendo Informações do Utilizador na Tela Final (onRouteChange)

Ao usar Dynamic Path™, Calendário do Advento, ou Combo™, pode-se obter informações do utilizador ao final de qualquer jogo através do callback onRouteChange.

Este método é necessário porque o evento padrão onComplete só é disparado uma vez que toda a experiência multi-etapas é finalizada, não quando cada jogo embutido termina.

Isso permite que seu sistema receba os resultados completos de cada jogo (via gameInfo) quando o utilizador chega à tela final da experiência.

Configuração

Depois de criar seu widget:

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

Adicione o listener onRouteChange:

widget.onRouteChange = function (event) {
    console.log(event.type);   // "routechange"
    console.log(event.data);   // { ... } ou undefined
    console.log("Utilizador navegou para uma nova tela");
};

Detectando a Tela Final

Quando o utilizador atinge a tela final do jogo, o widget retornará uma rota correspondente:

event.data.screen === 'screen_end-YOUR_APP_ID'

Substitua YOUR_APP_ID pelo seu id de aplicação real.

Obtendo as Informações do Utilizador (gameInfo)

Assim que a tela final é detectada, pode-se extrair os dados:

event.data.gameInfo

gameInfo contém um array de informações do utilizador, que pode incluir:

• Dados de entrada do utilizador
• Resultados ou pontuações do jogo
• Campos coletados durante a experiência

Esse payload está disponível somente na tela final para experiências usadas dentro de Dynamic Path, Calendário do Advento, ou Combo.

Exemplo

widget.onRouteChange = function (event) {
    if (event.data && event.data.screen === 'screen_end-12345') {
        const dados = event.data.gameInfo;
        console.log("Informações da tela final:", data);
        // Processe ou encaminhe esta informação conforme necessário
    }
};

Actualizado em: 02/10/2026