Cómo añadir el chatbot de IA de Asyntai a Statamic

Guía paso a paso para sitios web de Statamic CMS

Plataforma:

Paso 1: Obtén su código de inserción

Primero, ve a tu Panel de control de Asyntai y desplázate hasta la sección "Código de inserción". Copia tu código de inserción único que se verá así:

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

Nota: El código anterior es solo un ejemplo. Debe copiar su propio código de inserción único desde su Panel de control ya que contiene su ID de widget personal.

Paso 2: Elija el método de instalación

Statamic admite tanto Antlers como Blade para plantillas. Elija el método según el motor de plantillas que esté usando:

Método 1: Layout de Antlers (Recomendado)

La forma más fácil de agregar el chatbot es incluirlo en su archivo de layout principal. Statamic usa Antlers como su motor de plantillas predeterminado.

Navegue al directorio resources/views de su proyecto Statamic
Abre tu archivo de diseño (generalmente layout.antlers.html)
Encuentra la etiqueta de cierre </body>
Pegue su código de inserción de Asyntai justo antes de la etiqueta </body>
Guarde el archivo

<!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>

Consejo: 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 de Blade

Si usas plantillas Blade en lugar de Antlers, siga estos pasos:

Navegue al directorio resources/views de su proyecto Statamic
Abre tu archivo de diseño Blade (ej., layout.blade.php)
Encuentra la etiqueta de cierre </body>
Pegue su código de inserción de Asyntai justo antes de la etiqueta </body>
Guarde el archivo

<!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: Usar un Partial

Para una mejor organización, puede crear un partial reutilizable para el chatbot:

Paso 1: Crear el Partial

Cree un nuevo archivo en resources/views/partials/_chatbot.antlers.html
Añada su código de inserción de Asyntai a este archivo:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Paso 2: Incluir en su layout

Abra su archivo de layout (layout.antlers.html)
Añada la etiqueta del partial antes de </body>:
{{ partial:chatbot }} </body>

¿Por qué usar un partial? Los partials facilitan gestionar scripts externos en un solo lugar. Si alguna vez necesita actualizar el código del chatbot, solo necesita editar un archivo.

Usar múltiples layouts

Si su sitio Statamic utiliza múltiples layouts (por ejemplo, diferentes layouts para publicaciones de blog, páginas de destino, etc.), asegúrese de agregar el script del chatbot a cada archivo de layout donde desee que aparezca el widget.

Puede establecer qué layout utiliza una página de varias formas:

En la entrada: Añada layout: your_layout al front matter
En la colección: Establezca un layout predeterminado en el archivo YAML de configuración de su colección
En un blueprint: Añada un campo de layout que los editores puedan elegir

Para los Starter Kits de Statamic

Si está usando un Starter Kit de Statamic, la ubicación del layout puede variar. Las ubicaciones comunes incluyen:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html con partials en resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Paso 3: Limpiar caché y verificar

Después de agregar el código, vacíe la caché de Statamic para asegurar que los cambios surtan efecto:

php artisan cache:clear
php please stache:refresh

Luego visite su sitio web en una nueva pestaña del navegador o en una ventana de incógnito. Debería ver el botón del widget de chat en la esquina inferior derecha. Haga clic en él para asegurarse de que se abra y funcione correctamente.

¿No ves el widget? Asegúrese de haber vaciado tanto la caché de Laravel como el Stache de Statamic. Si está usando caché estática, ejecute php please static:clear también. Revise la consola del navegador (F12) en busca de errores de JavaScript.

Importante: Si está usando el generador de sitios estáticos de Statamic (ssg), asegúrese de regenerar sus archivos estáticos después de agregar el script del chatbot ejecutando php please ssg:generate.

Documentación