Pular para o conteúdo principal

Integração Frontend

version: 2

Os widgets são snippets de código que podem ser usados para exibir certas informações do player. Algumas configurações específicas são necessárias para obter o código responsável por exibir os dados.

Para usar os widgets, existem algumas etapas que devem ser seguidas:

  1. Um script deve ser adicionado para obter o código minificado para os widgets, assim:
<script src="https://{cdn-region}.gamanzaengage.com/casino-ui-widgets-v2/bundle.v2.min.js"></script>
  1. Uma vez que o pacote é carregado, os widgets devem ser inicializados com um objeto de configuração.
<script>
  const config = {...} // Isso será explicado na próxima página

  GamanzaEngageClient.init(config, function(GamificationWidgets){})
</script>

A função init requer um retorno de chamada como seu segundo argumento. Essa função de retorno de chamada é invocada assim que a biblioteca do cliente estiver pronta, servindo como um ponto de entrada seguro para usar os UI Widgets. O retorno de chamada recebe o GamificationWidgets como seu parâmetro, que fornece acesso a várias funções documentadas na interface API do GamificationWidgets.

Para recuperar a instância do GamificationWidgets, você pode usar a função GamanzaEngageClient.getInstance da seguinte forma:

GamanzaEngageClient.getInstance(function (GamificationWidgets) {
  if (GamificationWidgets) GamificationWidgets.reloadOne('...');
  else {
    // Fallback, se o GamanzaEngageClient não estiver inicializado, proceda para chamar a função GamanzaEngageClient.init.
  }
};

Observe que a função getInstance requer um retorno de chamada para fornecer a instância do GamificationWidgets. Se os widgets não estiverem inicializados, o GamificationWidgets será nulo.

  1. Para cada widget aparecer, você deve adicionar uma div com uma classe específica e data-type.

Você deve especificar algumas propriedades para exibir corretamente cada widget respectivo.

Exemplos:

<div class="gamification_widget" data-type="avatar"></div>
<div class="gamification_widget" data-type="reward-shop"></div>

Interfaces API do GamanzaEngageClient e GamificationWidgets​

GamanzaEngageClient​

Uma vez que você carrega corretamente o script da biblioteca do cliente Gamanza Engage em seu site, um objeto global chamado GamanzaEngageClient é criado no runtime do seu site, esse objeto expõe as seguintes funções:

* init(config: Object, callback: (GamificationWidgets) => void)​

Inicialize a biblioteca do cliente Gamanza Engage, consulte Configuração para obter mais detalhes.

Assim que a biblioteca do cliente for inicializada, a função de retorno de chamada será chamada, passando a instância da biblioteca do cliente GamificationWidgets.

* getInstance(callback: (GamificationWidgets) => void)​

Você deve usar essa função para recuperar de forma segura a instância da biblioteca do cliente Gamanza Engage para interagir com os widgets. Se por algum motivo a biblioteca do cliente não estiver devidamente inicializada, o GamificationWidgets será passado como null.

Métodos disponíveis no GamificationWidgets​

Usando o GamanzaEngageClient.getInstance você pode recuperar a instância da biblioteca do cliente Gamanza Engage. Essa instância contém os seguintes métodos:

recarregar​

const reload: (newLocale?: string) => void

Permite carregar vários widgets que não foram carregados, geralmente quando você está usando carregamento de conteúdo assíncrono ou aplicações web de página única que carregam novos nós em sua página da web e precisam renderizar widgets nesses novos nós DOM.

Esse método também é útil quando você precisa atualizar o local do jogador.

Importante Essa função força o recarregamento de todos os widgets visíveis.

Exemplo:

<script>
    GamanzaEngageClient.getInstance(function(GamificationWidgets){
        if(GamificationWidgets)
            GamificationWidgets.reload();
        else {
            // Fallback, if the GamanzaEngageClient is not initialized proceed to call the GamanzaEngageClient.init function.
        }
    })
</script>

recarregarUm​

const recarregarUm: (widgetId: string, newLocale?: string) => void

Permite carregar um widget por id. Isso deve ser um id adicionado ao elemento gamification_widget.

Este método também é útil quando você precisa atualizar o local do jogador.

Exemplo:

<script>
    GamanzaEngageClient.getInstance(function(GamificationWidgets) {
        if(GamificationWidgets)
            GamificationWidgets.recarregarUm('my-widget-id');
        else {
            // Fallback, if the GamanzaEngageClient is not initialized proceed to call the GamanzaEngageClient.init function.
        }
    })
</script>

...


<div class="gamification_widget" data-type="avatar" id="my-widget-id"></div>

obterJogador 🆕​

const obterJogador = (callback: (data: any | null) => void) => {
  if (callback && typeof callback === 'function') {
    callback(playerData);
  }
};

Permite obter informações básicas do jogador, como o status de adesão à gamificação. Você precisa passar um callback para a função, a fim de obter os dados do jogador e fazer algo com eles (recomendamos salvá-los em seu próprio estado)

Adicionamos um evento personalizado chamado GamanzaEngage_Client_Initialized que será executado assim que a chamada para a API de informações do jogador tiver sido concluída. Você pode implementá-lo dessa maneira, quando os widgets forem inicializados pela primeira vez, para ter certeza de que a chamada para a nossa API já retornou as informações necessárias.

<script>
    obterJogadorFunction(function(data) {
        // Armazenar os dados do jogador recebidos
    })

    document.addEventListener('GamanzaEngage_Client_Initialized', (event) => {
      const { detail } = event as CustomEvent
      detail.obterJogador(obterJogador)
    })
</script>

E você pode usá-lo assim, assim que os widgets tiverem sido inicializados:

<script>
    obterJogadorFunction(function(data) {
        // Armazenar os dados do jogador recebidos
    })

    GamanzaEngageClient.getInstance(function(GamificationWidgets) {

        if(GamificationWidgets)
            GamificationWidgets.obterJogador(obterJogadorFunction);
        else {
            // Fallback, if the GamanzaEngageClient is not initialized proceed to call the GamanzaEngageClient.init function.
        }
    })
</script>

destruir 🆕​

Permite destruir/limpar todas as informações relacionadas aos widgets salvas no redux toolkit, no armazenamento local, na instância do socket e remover a função GamificationWidgets.

Importante Esta função foi pensada para ser usada quando o jogador sai do casino.

Exemplo

<script>
    GamanzaEngageClient.getInstance(function(GamificationWidgets) {
        if(GamificationWidgets)
            GamificationWidgets.destruirWidgets();
        }
    })
</script>

versão: 1

A versão inicial da biblioteca do Gamanza Engage Widget Client está agora obsoleta.

info

Se você tiver alguma dúvida, não hesite em entrar em contato com o seu Representante de Sucesso do Cliente ou solicitar ajuda em um de nossos canais de suporte.