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

Guía paso a paso para sitios web de OpenCart

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: Editar la plantilla del pie de página (Recomendado)

La forma más directa de agregar el chatbot es editando la plantilla de pie de página de su tema:

Acceda a sus archivos de OpenCart vía FTP o administrador de archivos
Navegue a la plantilla del pie de página de su tema:
- OpenCart 3.x/4.x: catalog/view/theme/YOUR_THEME/template/common/footer.twig
- OpenCart 2.x: catalog/view/theme/YOUR_THEME/template/common/footer.tpl
Abra el archivo del pie de página para editarlo
Encuentra la etiqueta de cierre </body>
Pegue su código de inserción de Asyntai justo antes de la etiqueta </body>
Guarde el archivo
Vacíe la caché de OpenCart: Dashboard → Icono de engranaje azul (arriba a la derecha) → Refresh o elimine el contenido de system/storage/cache/

Consejo: Si está usando el tema predeterminado, la ruta sería catalog/view/theme/default/template/common/footer.twig. Siempre cree una copia de seguridad antes de editar archivos de plantilla.

Alternativa: Usar la opción de código personalizado del tema

Muchos temas modernos de OpenCart incluyen una opción integrada para código personalizado:

Inicia sesión en tu panel de administración de OpenCart
Ve a Extensions → Themes (o Extensions → Extensions → Themes)
Haga clic en Edit en su tema activo
Busque una sección de "Custom Code", "Footer Scripts" o "Custom JavaScript"
Pegue su código de inserción de Asyntai
Haga clic en "Save"
Limpie la caché

Nota: No todos los temas tienen esta opción. Si su tema no incluye campos de código personalizado, use el método de edición de plantillas o instale una extensión.

Alternativa: Usar una extensión de código personalizado

Puede instalar una extensión gratuita del OpenCart Marketplace para agregar scripts personalizados:

Ve al OpenCart Marketplace
Busque "Custom Script", "Header Footer Scripts" o "Custom Code"
Descargue e instale una extensión adecuada
En su panel de administración, vaya a Extensions → Extensions → Modules
Busque e instale el módulo de código personalizado
Configure el módulo y pegue su código de inserción de Asyntai en la sección de pie de página
Guarde y limpie la caché

Importante: Se recomienda usar extensiones en lugar de editar archivos del núcleo, ya que sobreviven a las actualizaciones de OpenCart. Las extensiones populares incluyen "Custom Script in Header & Footer" disponible en el marketplace.

Alternativa: Usar el método addScript (Para desarrolladores)

Para desarrolladores, OpenCart 3.x/4.x proporciona una forma programática de agregar scripts:

Abra catalog/controller/common/footer.php
Agrega la siguiente linea antes de $data['scripts'] = $this->document->getScripts('footer');:
$this->document->addScript('https://asyntai.com/static/js/chat-widget.js', 'footer');
Para el atributo data, necesitará modificar el footer.twig para incluirlo manualmente, o agregar JavaScript en línea después del bucle de scripts

Nota: Para que el widget funcione correctamente con el atributo data, el método de plantilla es más simple ya que el método addScript no admite atributos personalizados directamente.

Paso 3: Verificar la instalación

Después de guardar sus cambios y vaciar la caché, visite su tienda 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? Asegurate de vaciar la cache de OpenCart. Ve a su panel de administracion, haga clic en el icono de engranaje azul en la esquina superior derecha y haga clic en los botones de actualizar. También intenta limpiar la cache del navegador o ver la página en una ventana de incognito. Si modificaste el archivo de plantilla incorrecto, verifique que su tema este usando el archivo que editaste.