Instalação em sites Drupal

Seja muito bem-vindo a este passo a passo sobre como configurar o plugin da Hand Talk no ambiente Drupal. Antes de começarmos, é importante observar qual a versão utilizada em seu ambiente, nesse guia teremos dois tipos de instalações disponiveis (Drupal 7 e 10).

Para realizar a instalação você precisará ter em mãos: o seu token. O token é uma chave única que permite que o plugin da Hand Talk funcione corretamente em seu site. Este token será fornecido por uma pessoa consultora do time da Hand Talk, através do e-mail. Portanto, antes de prosseguir com qualquer etapa de instalação, certifique-se de que você já recebeu o seu token.

Configurando o Plugin Hand Talk no seu Projeto Drupal 7

• Inicie abrindo a pasta do seu projeto no ambiente de desenvolvimento de sua escolha.
• Dentro da pasta do projeto, localize e acesse a pasta chamada themes. Esta pasta contém todos os temas disponíveis para o seu projeto.
• Agora, você precisa acessar a pasta do tema que está sendo usado atualmente em seu projeto. No nosso exemplo, estamos usando o tema padrão chamado bartik.

• Dentro da pasta do tema, procure pela pasta templates. Esta pasta contém todos os arquivos de template que definem a estrutura visual do seu tema.
• Nesta etapa, você precisará editar o arquivo responsável pela construção da página, chamado page.tpl. Este arquivo controla a estrutura geral da página.
• Finalmente, você precisará inserir o código de instalação do plugin HandTalk na estrutura de construção do rodapé (footer). Aqui está o código que você precisa inserir:

 Sem o script do plugin

<?php if ($page['footer']): ?>
 <div id="footer" class="clearfix">
 <?php print render($page['footer']); ?>
</div> <!-- /#footer -->
<?php endif; ?>

Com o script do plugin

<?php if ($page['footer']): ?>
 <div id="footer" class="clearfix">
 <?php print render($page['footer']); ?>
 <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
 <script>
 var ht = new HT({
 token: "token"
 });
 </script>
</div>  <!-- /#footer -->
<?php endif; ?>

Configurando o Plugin Hand Talk no seu Projeto Drupal 10

Atenção: Antes de iniciar esse passo a passo é importante realizar o limpeza do cache do drupal.

• Localize a pasta onde o seu projeto Drupal está armazenado no seu sistema.
• Dentro da pasta do projeto, você encontrará uma pasta chamada ‘core’. Esta pasta contém os arquivos essenciais do Drupal.
• Dentro da pasta ‘core’, localize e acesse a pasta ‘themes’. Esta pasta contém todos os temas disponíveis para o seu site Drupal.
• Dentro da pasta ‘themes’, localize a pasta do tema que está atualmente ativo no seu site. No nosso caso, estávamos usando o tema padrão ‘olivero’.

• Dentro da pasta do tema, localize e acesse a pasta ‘templates’. Esta pasta contém os arquivos de template que controlam a aparência do seu site.
• Dentro da pasta ‘templates’, localize e acesse a pasta ‘layout’. Esta pasta contém os arquivos de layout que controlam a estrutura do seu site.
• Dentro da pasta ‘layout’, localize e abra o arquivo ‘page.html’ para edição. Este arquivo controla a estrutura da página do seu site.
• No arquivo ‘page.html’, localize a seção do rodapé e insira o código de instalação do plugin HandTalk. Isso permitirá que o plugin seja carregado em todas as páginas do seu site.

Sem o script do plugin

<footer class="site-footer">
      <div class="site-footer__inner container">
        {{ page.footer_top }}
        {{ page.footer_bottom }}
      </div>
      </footer>
      <div class="overlay" data-drupal-selector="overlay"></div>
   </div>
</div>

Com o script do plugin

<footer class="site-footer">
      <div class="site-footer__inner container">
        {{ page.footer_top }}
        {{ page.footer_bottom }}
      </div>
      <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
 <script>
   var ht = new HT({
    token: "token"
 });
 </script>
      </footer>
      <div class="overlay" data-drupal-selector="overlay"></div>
   </div>
</div>

E pronto! Agora você configurou com sucesso o plugin Hand Talk em seu projeto. Lembre-se de substituir "token" pelo token real fornecido pelo consultor Hand Talk. 

Espero que este tutorial tenha sido útil para você. Se tiver mais perguntas, fique à vontade para entrar em contato conosco.