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

Guía paso a paso para sitios web de Kirby 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 al snippet de Kirby (Recomendado)

Kirby es un CMS PHP basado en archivos planos que utiliza snippets para partes reutilizables de plantillas. El enfoque recomendado es crear un snippet dedicado para el chatbot:

Cree un nuevo archivo de snippet en site/snippets/asyntai-widget.php
Pegue su código de inserción en el archivo:

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

Luego incluye el snippet en su plantilla principal (por ejemplo, site/templates/default.php) o en su layout, justo antes de la etiqueta de cierre </body>:

<?php snippet('asyntai-widget') ?>
</body>
</html>

Consejo: Si usas un layout compartido o un snippet de pie de página, puede agregar la llamada al snippet ahi para que aparezca automáticamente en cada página. Por ejemplo, agregalo a su snippet de pie de página justo antes de </body>.

Método alternativo 1: Añadir al snippet del pie de página

Si su sitio Kirby use un snippet de pie de página, puede agregar el código de inserción directamente ahi:

Abra site/snippets/footer.php (crealo si no existe)
Agrega el código de incrustación antes de la etiqueta de cierre </body>:

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

Asegúrese de que sus plantillas incluyan el snippet del pie de página:

<?php snippet('footer') ?>

Nota: Si el snippet de pie de página ya esta incluido en todas sus plantillas, agregar el chatbot aquí garantiza que aparezca en cada página sin modificar archivos de plantilla individuales.

Método alternativo 2: Usar un plugin de Kirby

Puede crear un plugin de Kirby para inyectar automáticamente el script del chatbot en cada página sin modificar ninguna plantilla:

Cree el directorio y archivo del plugin en site/plugins/asyntai/index.php
Agrega el siguiente código para usar los hooks de Kirby e inyectar el script:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

Consejo: El enfoque de plugin es ideal si deseas que el chatbot se cargue en cada página automáticamente sin editar ningun archivo de plantilla o snippet. También mantiene la integración del chatbot modular y fácil de activar o desactivar.

Método alternativo 3: Usar el helper js() de Kirby

Kirby proporciona un helper integrado js() para cargar archivos JavaScript. Puede usarlo en su plantilla o snippet:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

O agrega el script directamente en su archivo PHP de plantilla antes de </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

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

Nota: Si usas el helper js(), asegurate de que este colocado dentro de la sección <body> de su plantilla para garantizar que el chatbot se cargue correctamente.

Paso 3: Verificar la instalación

Después de agregar el código de inserción a su sitio Kirby, 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 reemplazado YOUR_WIDGET_ID con su ID de widget real del panel de control. Verifique que el archivo de snippet o plugin este guardado en el directorio correcto. Si usas el método de plugin, asegurate de que la estructura del directorio del plugin sea site/plugins/asyntai/index.php. Limpie la cache del navegador o pruebe en modo incognito. Revise la consola de desarrollador del navegador (F12) en busca de errores.