Cómo añadir el chatbot IA de Asyntai a Adobe Experience Manager

Guía paso a paso para sitios web AEM

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 código usando el componente de página (Recomendado)

El método recomendado es añadir el código del chatbot a la sección head del componente de página de su AEM para instalación en todo el sitio:

Inicia sesión en tu instancia de autor de AEM
Navegue a CRXDE Lite (típicamente en http://su-instancia-aem:4502/crx/de)
Localiza la plantilla de tu componente de página (generalmente en /apps/your-project/components/page)
Encuentra o crea el archivo head.html o headerlibs.html
Añada su código de inserción de Asyntai a este archivo
Haga clic en "Save All" en el menú superior
Replica los cambios en tu instancia de publicación

Consejo: Colocar el código en el archivo head.html asegura que el chatbot aparezca en todas las páginas que usan esa plantilla. Este es el enfoque más limpio para la instalación en todo el sitio.

Método alternativo 1: Bibliotecas de cliente (ClientLibs)

Para un enfoque más estructurado, puede usar el sistema de bibliotecas de cliente de AEM:

Cree una nueva carpeta de biblioteca de cliente en /apps/your-project/clientlibs
Establece el tipo de nodo cq:clientLibraryFolder
Crea un archivo js.txt listando tus archivos JavaScript
Agrega tu código de incrustación de Asyntai a un archivo JavaScript en esta carpeta
Incluye la biblioteca de cliente en tu componente de página usando:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Nota: Este método es recomendado para proyectos con estructura de ClientLib existente y proporciona mejor organización para implementaciones más grandes.

Método alternativo 2: Gestión de etiquetas (Adobe Launch)

Si usas Adobe Launch (anteriormente DTM) u otro administrador de etiquetas:

Inicia sesión en Adobe Experience Platform Launch
Navegue a su propiedad
Ve a Rules y crea una nueva regla
Establece el evento como "Page Bottom" o "DOM Ready"
Añada una acción: Custom Code
Pegue su código de inserción de Asyntai
Guarde y publique la biblioteca

Consejo: Usar Adobe Launch es el enfoque recomendado por Adobe para añadir scripts de terceros. Proporciona mejor control, capacidades de prueba y no requiere despliegues de código.

Método alternativo 3: Fragmento de experiencia

Para una implementación flexible y amigable para autores:

Navegue a Experience Fragments en AEM
Cree un nuevo Experience Fragment
Añada un componente de texto o componente HTML
Cambia al modo de código HTML
Pegue su código de inserción de Asyntai
Incluye este Experience Fragment en el pie de tu plantilla de página

Importante: Asegúrese de tener los permisos adecuados de AEM para modificar plantillas y componentes. Para AEM como servicio en la nube, los cambios pueden necesitar pasar por su pipeline de CI/CD.

Paso 3: Verificar la instalación

Después de implementar tus cambios, limpia la caché de tu navegador y visita tu sitio web. Deberías ver el botón del widget de chat en la esquina inferior derecha. Haz clic en él para asegurarte de que se abra y funcione correctamente.

¿No ves el widget? Revise la consola de su navegador (F12) en busca de errores de JavaScript. Verifique que el código se haya desplegado correctamente en su instancia de publicación. Para AEM como servicio en la nube, asegúrese de que sus cambios pasaron exitosamente por el pipeline de implementación.