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 su Panel de control de Asyntai y desplácese hasta la sección "Código de inserción". Copie su 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 soporta tanto Antlers como Blade para plantillas. Elija el método segun el motor de plantillas que estes usando:

Método 1: Layout de Antlers (Recomendado)

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

Navegue al directorio resources/views de su proyecto Statamic
Open your layout file (usually 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
Open your Blade layout file (e.g., 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 use multiples layouts (por ejemplo, diferentes layouts para publicaciones de blog, páginas de destino, etc.), asegurate de agregar el script del chatbot a cada archivo de layout donde desees que aparezca el widget.

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

En la entrada: Agrega layout: your_layout al front matter
En la coleccion: Establece un layout predeterminado en el archivo YAML de configuración de su coleccion
En un blueprint: Agrega un campo de layout que los editores puedan elegir

Para los Starter Kits de Statamic

Si estas 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, vacia la cache 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 pestana del navegador o en una ventana de incognito. Deberias ver el botón del widget de chat en la esquina inferior derecha. Haga clic en el para asegurarte de que se abra y funciona correctamente.

¿No ves el widget? Asegurate de haber vaciado tanto la cache de Laravel como el Stache de Statamic. Si estas usando cache estatica, ejecuta php please static:clear también. Revise la consola del navegador (F12) en busca de errores de JavaScript.

Importante: Si estas usando el generador de sitios estaticos de Statamic (ssg), asegurate de regenerar sus archivos estaticos después de agregar el script del chatbot ejecutando php please ssg:generate.

Documentación