Como Adicionar o Chatbot IA Asyntai ao Statamic

Guia passo a passo para sites Statamic 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.

Etapa 2: Escolha o Método de Instalação

O Statamic suporta tanto Antlers quanto Blade para templates. Escolha o método com base no motor de templates que você está usando:

Método 1: Layout Antlers (Recomendado)

A maneira mais fácil de adicionar o chatbot é incluí-lo no seu arquivo de layout principal. O Statamic usa Antlers como seu motor de templates padrão.

Navegue até o diretório resources/views do seu projeto Statamic
Open your layout file (usually layout.antlers.html)
Encontre a tag de fechamento </body>
Cole seu código de incorporação Asyntai logo antes da tag </body>
Salve o arquivo

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

Dica: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

Método 2: Layout Blade

If you're using Blade templates instead of Antlers, follow these steps:

Navegue até o diretório resources/views do seu projeto Statamic
Open your Blade layout file (e.g., layout.blade.php)
Encontre a tag de fechamento </body>
Cole seu código de incorporação Asyntai logo antes da tag </body>
Salve o arquivo

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

Nota: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Método 3: Usando um Partial

Para melhor organização, você pode criar um partial reutilizável para o chatbot:

Passo 1: Criar o Partial

Crie um novo arquivo em resources/views/partials/_chatbot.antlers.html
Adicione seu código de incorporação Asyntai a este arquivo:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Passo 2: Incluir no Seu Layout

Abra seu arquivo de layout (layout.antlers.html)
Adicione a tag do partial antes de </body>:
{{ partial:chatbot }} </body>

Por que usar um partial? Partials facilitam o gerenciamento de scripts externos em um único lugar. Se você precisar atualizar o código do chatbot, basta editar um arquivo.

Usando Múltiplos Layouts

Se o seu site Statamic usa múltiplos layouts (ex.: layouts diferentes para posts do blog, landing pages, etc.), certifique-se de adicionar o script do chatbot a cada arquivo de layout onde deseja que o widget apareça.

Você pode definir qual layout uma página usa de várias formas:

Na entrada: Adicione layout: your_layout ao front matter
Na coleção: Defina um layout padrão no arquivo de configuração YAML da sua coleção
No blueprint: Adicione um campo de layout que os editores possam escolher

Para Starter Kits do Statamic

Se você está usando um Starter Kit do Statamic, a localização do layout pode variar. Localizações comuns incluem:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html com partials em resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Etapa 3: Limpar Cache e Verificar

Após adicionar o código, limpe o cache do Statamic para garantir que as alterações tenham efeito:

php artisan cache:clear
php please stache:refresh

Em seguida, visite 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 verificar se abre e funciona corretamente.

Não está vendo o widget? Certifique-se de que limpou tanto o cache do Laravel quanto o Stache do Statamic. Se estiver usando cache estático, execute php please static:clear também. Verifique o console do navegador (F12) para erros de JavaScript.

Importante: Se você está usando o gerador de site estático do Statamic (ssg), certifique-se de regenerar seus arquivos estáticos após adicionar o script do chatbot executando php please ssg:generate.

Documentação