Como Adicionar o Chatbot de IA Asyntai ao Hugo

Guia passo a passo para o gerador de sites estáticos Hugo

Plataforma:

Passo 1: Obtenha Seu Código de Incorporação

Primeiro, acesse seu Dashboard Asyntai e role para baixo até a seção "Embed Code". Copie seu código de incorporação exclusivo que se parecerá com isto:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Nota: O código acima é apenas um exemplo. Você deve copiar seu próprio código de incorporação exclusivo do seu Dashboard, pois ele contém seu ID de widget pessoal.

Etapa 2: Adicionar Código ao Partial do Tema (Recomendado)

A melhor maneira de adicionar o chatbot a todas as páginas do seu site Hugo é criando um partial:

Navegue até o diretório layouts/partials/ do seu projeto Hugo
Crie um novo arquivo chamado asyntai-widget.html
Cole seu código de incorporação do Asyntai neste arquivo:

<!-- layouts/partials/asyntai-widget.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Abra o arquivo baseof.html do seu tema (geralmente em layouts/_default/baseof.html)
Adicione o partial antes da tag de fechamento </body>:

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

Salve o arquivo e reconstrua seu site Hugo

Dica: Usar partials é a maneira recomendada pelo Hugo para incluir componentes reutilizáveis. Este método garante que o chatbot apareça em todas as páginas que usam o template baseof.html, que normalmente são todas as páginas do seu site.

Método Alternativo 1: Adicionar ao Partial Head

Se o seu tema tem um partial head, você pode adicionar o código lá:

Localize o partial head do seu tema (geralmente em layouts/partials/head.html)
Se não existir, crie layouts/partials/head.html na raiz do seu projeto
Adicione seu código de incorporação Asyntai a este arquivo:

<!-- layouts/partials/head.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Certifique-se de que seu baseof.html inclui este partial na seção <head>:

<head>
  {{ partial "head.html" . }}
</head>

Nota: Se o seu tema já possui um partial head.html com conteúdo existente, simplesmente adicione seu código do Asyntai ao final. Não substitua o conteúdo existente.

Método Alternativo 2: Pasta Estática com JavaScript Personalizado

Para uma abordagem mais modular usando a pasta estática do Hugo:

Navegue até o diretório static/js/ do seu projeto Hugo
Crie o diretório se ele não existir
Crie um novo arquivo chamado asyntai-loader.js
Adicione o seguinte código para carregar o widget:

// static/js/asyntai-loader.js
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.head.appendChild(script);
})();

Referencie este arquivo no seu baseof.html ou partial de rodapé antes de </body>:

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

Dica: Os arquivos no diretório static/ são copiados como estão para a raiz do seu site publicado. A função relURL gera o caminho relativo correto para sua implantação.

Método Alternativo 3: Configuração do Hugo (config.toml/yaml)

Para alguns temas Hugo que suportam scripts personalizados via configuração:

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

Nota: Este método só funciona se o seu tema suporta o parâmetro customJS. Consulte a documentação do seu tema. Você também pode precisar adicionar o atributo data-asyntai-id através da personalização do tema.

Método Alternativo 4: Front Matter (Específico por Página)

Para adicionar o chatbot apenas a páginas específicas:

Adicione um parâmetro personalizado ao front matter da sua página:

---
title: "My Page"
asyntaiWidget: true
---

No seu baseof.html ou partial, adicione lógica condicional:

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

Dica: Esta abordagem oferece controle granular sobre quais páginas incluem o chatbot. É útil para sites de documentação onde você deseja o widget apenas em determinadas seções.

Método Alternativo 5: Substituir Layouts do Tema

Para substituir o layout do seu tema sem modificar os arquivos do tema:

Copie o baseof.html do tema de themes/your-theme/layouts/_default/
Cole-o no layouts/_default/baseof.html do seu projeto
Adicione seu código de incorporação do Asyntai antes da tag de fechamento </body>
Salve e reconstrua seu site

Importante: Quando você substitui arquivos do tema, não receberá automaticamente atualizações desses arquivos quando o tema for atualizado. Este método oferece controle total, mas requer mais manutenção. Considere usar partials em vez disso para facilitar as atualizações do tema.

Passo 3: Compilar e Implantar

Após adicionar o código, construa seu site Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

O site gerado estará no diretório public/
Implante este diretório na sua plataforma de hospedagem (Netlify, Vercel, GitHub Pages, etc.)

Dica: Durante o desenvolvimento, use hugo server para visualizar seu site localmente em http://localhost:1313. O chatbot deve aparecer no canto inferior direito em todas as páginas.

Passo 4: Verificar a Instalação

Após implantar seu site Hugo, abra-o em uma nova aba do navegador. Você deverá ver o botão do widget de chat no canto inferior direito. Clique nele para garantir que abre e funciona corretamente.

Não está vendo o widget? Certifique-se de que reconstruiu seu site com o comando hugo após fazer alterações. Verifique se substituiu YOUR_WIDGET_ID pelo seu ID de widget real do painel. Limpe o cache do navegador ou visualize em modo anônimo. Se estiver usando um CDN, pode ser necessário invalidar o cache. Abra o console do navegador (F12) para verificar se há erros de JavaScript.

Documentação