Páginas de Login Personalizado

Neste artigo temos um passo-a-passo para a criação de páginas de login personalizadas, caso o cliente queira configurar uma página além da padrão da instância.

Tela de login padrão:

Tela de login personalizada (segunda tela de login da mesma instância)

Para as configurações a seguir deve-se abrir os arquivos com um editor de texto de sua preferência, nos exemplos foi utilizado o Notepad++.

1. Para cada página deverá ser gerado um “pacote”, contendo os arquivos do exemplo:
    
    Importante, não gerar um arquivo compactado com os arquivos (exemplo:.zip;.rar)
   
   
2. O primeiro arquivo a ser editado será o index.html
   1. Deve ser realizada a correção do título da instância.
       
      
      
   2. Atualizar o background-image (imagem de fundo):
       
       A imagem deve ser carregada através do menu Outras Configurações > Gerenciador de Arquivos.
      
      
   3. Atualizar o logotipo:
       
      Importante, no arquivo index.html de exemplo, esta seção encontra-se “comentada”, portanto é ignorada pelo sistema.
      
      
3. O próximo arquivo a ser atualizado é credentials.json
   1. Atualizar o campo customer_id, preencher com o ID da instância
   2. Atualizar o campo ENGAGE_WEBAPP_URL, preencher conforme exemplo.
   3. Atualizar o campo client_secret. Essa informação pode ser gerada pelo cliente através da tela Outras Configurações > Integrações > Integre com o Engage. Lá o cliente pode gerar um client_id e um client_secret para utilizar em sua integração. O client_id, integracaoscorm, também pode ser utilizado para este fim. 
      
       
4. Após esta etapa o “pacote” deve ser hospedado dentro de seu servidor. Deverão então disponibilizar uma forma dos usuários acessarem o arquivo index.html, exemplo, um botão de redirecionamento.

Carregando arquivos na plataforma através do Gerenciador de Arquivo

1. Acessar o menu Outras Configurações, Gerenciador de Arquivos.
    
2. Selecionar o diretório onde deseja armazenar seu arquivo, aconselhável que seja no diretório custom.
    
3. Selecionar o arquivo a ser carregado.
    
   Importante, o campo destacado em azul deve estar preenchido até o diretório selecionado no passo 2.