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

Guía paso a paso para SilverStripe 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: Añadir a la plantilla de SilverStripe (Recomendado)

La forma mas simple de agregar el chatbot a su sitio SilverStripe es editando directamente el archivo de plantilla principal de su tema:

Abra el archivo de plantilla de su tema (por ejemplo, themes/yourtheme/templates/Page.ss)
Agrega el código de inserción justo antes de la etiqueta de cierre </body>:

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

Guarde el archivo y vacíe la caché de SilverStripe agregando ?flush=1 a la URL de su sitio

Consejo: SilverStripe usa archivos de plantilla .ss con un sistema de herencia de plantillas. Colocar el script en su plantilla base Page.ss asegura que el chatbot aparezca en cada página de su sitio. Si su tema usa una carpeta Includes, también puede colocar el script en un archivo include compartido.

Método alternativo 1: Usar la clase Requirements en el controlador

SilverStripe proporciona una clase Requirements para gestionar dependencias de JavaScript y CSS de forma programatica. Este es el enfoque recomendado para desarrolladores:

Abra app/src/PageController.php (o su archivo de controlador de página)
En el método init(), use Requirements::customScript() para cargar dinamicamente el widget:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            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.head.appendChild(script);
        JS);
    }
}

Guarde el archivo y vacíe la caché visitando yourdomain.com?flush=1

Nota: La clase Requirements es la forma estándar de SilverStripe para incluir scripts y hojas de estilo. Usar Requirements::customScript() genera JavaScript en linea. Este método asegura que el widget se cargue en cada página manejada por su PageController.

Método alternativo 2: Usar Requirements en la plantilla

También puede usar la sintaxis de plantilla de SilverStripe para requerir archivos JavaScript directamente en su plantilla .ss:

Abra el archivo de plantilla de su tema (por ejemplo, themes/yourtheme/templates/Page.ss)
Agrega lo siguiente cerca del final de la plantilla, antes de </body>:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

Consejo: La sintaxis <% require %> es la forma a nivel de plantilla de SilverStripe para incluir recursos. Ten en cuenta que este método no admite nativamente agregar atributos data personalizados a la etiqueta de script, por lo que agregamos un pequeno fragmento de inicializacion para establecer el ID del widget.

Método alternativo 3: Usar la configuración de SilverStripe (YAML)

Para un enfoque basado en configuración, puede usar la configuración YAML de SilverStripe para agregar requisitos globales:

Abra o cree el archivo app/_config/app.yml
Agrega configuración para incluir el widget a traves de una extension personalizada o configuración de controlador:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

Cree el archivo de extension app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            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.head.appendChild(script);
        ");
    }
}

Aplica la extension a su PageController en app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Ejecuta ?flush=1 para reconstruir la caché de configuración

Nota: Usar configuración YAML y extensiones es el enfoque mas modular de SilverStripe. Mantiene la integración del chatbot separada de la logica principal de su controlador y facilita activar o desactivar sin cambiar código.

Paso 3: Verificar la instalación

Después de agregar el código y vaciar la caché de SilverStripe, abra su sitio en una nueva pestaña del navegador. 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 la caché agregando ?flush=1 a la URL de su sitio. Verifique que haya reemplazado YOUR_WIDGET_ID con su ID de widget real del panel de control. Limpie la caché del navegador o visualice en modo incógnito. Abra la consola del navegador (F12) para verificar si hay errores de JavaScript. Si usa la clase Requirements, verifique que el método init() de su PageController se esté llamando correctamente.