Como Adicionar o Chatbot de IA Asyntai ao Grav

Guia passo a passo para Grav CMS

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.

Passo 2: Adicionar ao Template do Tema Grav (Recomendado)

A melhor maneira de adicionar o chatbot a todas as paginas do seu site Grav e editando o template base Twig do seu tema:

Navegue ate o diretorio user/themes/yourtheme/templates/ do seu projeto Grav e abra o default.html.twig (ou o template base usado pelo seu tema)
Adicione seu codigo de incorporacao Asyntai antes da tag de fechamento </body>:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Salve o arquivo

Dica: O Grav usa Twig como motor de templates. O template base e normalmente default.html.twig ou partials/base.html.twig dependendo do seu tema. Verifique a estrutura do seu tema para encontrar o arquivo correto que contem a tag de fechamento </body>.

Método Alternativo 1: Usando o Asset Manager do Grav

O Asset Manager integrado do Grav oferece uma maneira limpa de adicionar ativos JavaScript via Twig:

Abra o template base Twig do seu tema (ex.: user/themes/yourtheme/templates/partials/base.html.twig)
Use o Asset Manager para adicionar o JavaScript:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Ou adicione JavaScript inline para criar o elemento script dinamicamente no seu template base:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(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.body.appendChild(script);
})();
</script>
</body>
</html>

Nota: O metodo Asset Manager e a abordagem recomendada pelo Grav para gerenciar ativos JavaScript. Ele oferece suporte integrado para pipeline de ativos, ordenacao e agrupamento.

Método Alternativo 2: Usando Plugin Custom JS

Se você preferir uma abordagem baseada em plugin sem editar os arquivos do tema:

Instale o plugin \"Custom JS\" pelo painel administrativo do Grav ou via CLI:

bin/gpm install custom-js

Vá até Admin > Plugins > Custom JS
Adicione o código do script de incorporação:

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

Salve a configuração do plugin

Dica: Usar um plugin para injetar scripts significa que voce nao precisa modificar nenhum arquivo do tema. Isso facilita trocar ou atualizar temas sem perder a integracao do chatbot.

Método Alternativo 3: Usando Substituição de Bloco em Template Filho

Se seu tema Grav usa heranca de blocos Twig, voce pode substituir o bloco inferior em um template filho:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

Crie ou abra um template filho que estende o template base do seu tema
Adicione a substituição de bloco mostrada acima
A chamada parent() garante que todo o conteúdo existente no bloco seja preservado

Nota: Este metodo usa o sistema de heranca de templates do Twig. Certifique-se de que o nome do bloco (ex.: bottom) corresponda ao bloco definido no template base do seu tema. Nomes comuns de blocos incluem bottom, javascripts ou footer.

Método Alternativo 4: Usando o Plugin Custom Head do Grav

Outra opção baseada em plugin é o plugin Custom Head:

Instale o plugin custom-head via CLI ou painel administrativo:

bin/gpm install custom-head

Vá até Admin > Plugins > Custom Head
Adicione seu código de incorporação do Asyntai na configuração do plugin:

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

Salve a configuração

Dica: O plugin Custom Head permite injetar codigo nas secoes head ou body do seu site sem modificar arquivos do tema. Consulte a documentacao do plugin para a opcao correta de posicionamento para inserir o script antes da tag de fechamento </body>.

Etapa 3: Limpar Cache e Verificar

Apos adicionar o codigo, limpe o cache do Grav e verifique a instalacao:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

Abra seu site Grav em uma nova aba do navegador. Voce deve ver o botao 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 ter limpado o cache do Grav com bin/grav clearcache ou pelo painel administrativo. Verifique se voce substituiu YOUR_WIDGET_ID pelo ID real do seu widget no painel. Limpe o cache do navegador ou visualize no modo anonimo. Abra o console do navegador (F12) para verificar erros de JavaScript. Verifique se o script esta presente no codigo-fonte da pagina clicando com o botao direito e selecionando \"View Page Source\".

Documentação

Como Adicionar o Chatbot de IA Asyntai ao Grav

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

Passo 2: Adicionar ao Template do Tema Grav (Recomendado)

Método Alternativo 1: Usando o Asset Manager do Grav

Método Alternativo 2: Usando Plugin Custom JS

Método Alternativo 3: Usando Substituição de Bloco em Template Filho

Método Alternativo 4: Usando o Plugin Custom Head do Grav

Etapa 3: Limpar Cache e Verificar