Como Adicionar o Chatbot IA Asyntai ao CrafterCMS

Guia passo a passo para sites CrafterCMS

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 ao Template FreeMarker (Recomendado)

O CrafterCMS usa templates FreeMarker (.ftl) para renderizar páginas. A maneira mais fácil de adicionar o chatbot a todas as páginas é editando seu template de página principal:

No Crafter Studio, acesse Site Dashboard > Content Types ou navegue até templates
Abra seu template de página principal (por exemplo, /templates/web/pages/home.ftl ou o layout base)
Encontre a tag de fechamento </body>
Cole seu código de incorporação Asyntai logo antes da tag </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Salve o arquivo e publique pelo Crafter Studio

Dica: Adicionar o script antes da tag de fechamento </body> garante que ele carregue após o conteúdo da página, o que é recomendado para widgets de chat e não atrasa o carregamento da sua página.

Método Alternativo 1: Usando Componentes de Template do Crafter

Para melhor organização, crie um template de componente dedicado para o widget de chatbot:

No Crafter Studio, crie um novo arquivo de template em /templates/web/components/asyntai-widget.ftl
Adicione o seguinte conteúdo ao template do componente:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Inclua-o no seu template de layout principal usando uma diretiva de include do FreeMarker:
<#include "/templates/web/components/asyntai-widget.ftl" />
Alternativamente, se estiver usando o sistema de renderização de componentes do Crafter, use:
<@renderComponent component=contentModel.asyntaiWidget />
Salve ambos os arquivos e publique pelo Crafter Studio

Nota: Usar um template de componente separado facilita habilitar ou desabilitar o chatbot em todo o seu site comentando apenas uma linha de include.

Método Alternativo 2: Usando a Configuração de Head/Scripts do Crafter

O CrafterCMS permite que você injete scripts globalmente através da configuração do site:

No Crafter Studio, navegue até Site Config > Configuration
Abra o arquivo Engine Site Configuration (site-config.xml)
Adicione uma configuração de injeção de script personalizada:
<site>   <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
Alternativamente, edite seu layout base FreeMarker para ler a configuração do site e injetar scripts dinamicamente:
<#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
Salve e publique as alterações de configuração

Dica: Usar a configuração do site permite gerenciar o widget de chatbot sem modificar arquivos de template diretamente, facilitando atualização ou remoção posterior.

Método Alternativo 3: Usando Controlador Groovy

O CrafterCMS suporta scripts Groovy para lógica do lado do servidor. Você pode usar um controlador para adicionar dinamicamente o script do chatbot:

Crie um script Groovy em /scripts/pages/ (por exemplo, /scripts/pages/home.groovy ou seu controlador global do site)
Adicione o seguinte código para injetar a URL do script no modelo do template:
// /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
Em seguida, referencie as variáveis do modelo no seu template FreeMarker:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Salve tanto o script Groovy quanto o arquivo de template
Publique as alterações pelo Crafter Studio

Nota: A abordagem do controlador Groovy é útil quando você precisa de lógica condicional (por exemplo, habilitar o chatbot apenas para determinados perfis de usuário ou tipos de página) ou quando deseja buscar valores de configuração de fontes externas.

Etapa 3: Publicar e Verificar

Após fazer suas alterações, publique-as pelo Crafter Studio:

No Crafter Studio, acesse Site Dashboard
Revise suas alterações na seção My Recent Activity ou Pending Approval
Clique em Publish para publicar as alterações
Abra seu site em uma nova aba do navegador ou janela anônima
Você deverá ver o botão do widget de chat no canto inferior direito
Clique nele para confirmar que abre e funciona corretamente

Não está vendo o widget? Certifique-se de ter publicado as alterações pelo Crafter Studio. Verifique se está editando o arquivo de template correto que suas páginas utilizam. Limpe o cache do navegador ou visualize em uma janela anônima. Se estiver usando o cache do Crafter, limpe o cache do Engine pelo painel do Crafter Studio.

Localização do Template: A localização dos templates do CrafterCMS pode variar dependendo da estrutura do seu projeto. Localizações comuns incluem /templates/web/pages/ para templates de página, /templates/web/components/ para templates de componente e /templates/web/ para templates de layout. Verifique seus templates existentes para encontrar onde a tag </body> está definida.