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

Plataforma:

PrestaShop

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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í:

Paso 2: Usar el módulo de código personalizado (Recomendado)

La forma más fácil de agregar el chatbot es usando un módulo gratuito de "Custom Code" del marketplace de PrestaShop Addons:

1. Inicie sesión en su Back Office de PrestaShop
2. Vaya a Modules → Module Manager
3. Haga clic en "Upload a module" o busque en el marketplace "Custom Code" o "Header Footer Scripts"
4. Instala un módulo como "Custom JS and CSS" o similar
5. Una vez instalado, ve a la configuración del módulo
6. Encuentra la sección "Footer Scripts" o "Before </body>"
7. Pegue su código de inserción de Asyntai
8. Haga clic en "Save"

Alternativa: Editar la plantilla del tema (PrestaShop 1.7+/8)

Puedes agregar el código directamente a la plantilla del pie de página de tu tema:

1. Accede a tus archivos de PrestaShop por FTP o administrador de archivos
2. Navegue a la carpeta de su tema: themes/your_theme/templates/_partials/
3. Abra el archivo footer.tpl (o en algunos temas, revise templates/layouts/layout-both-columns.tpl)
4. Encuentra la etiqueta de cierre </body> o la sección {block name='javascript_bottom'}
5. Pegue su código de inserción de Asyntai justo antes de la etiqueta de cierre </body>
6. Guarde el archivo
7. Vacíe la caché de PrestaShop: Advanced Parameters → Performance → Clear cache

Alternativa: Usar el archivo JavaScript personalizado del tema

Muchos temas de PrestaShop incluyen un archivo custom.js para tus propios scripts:

1. Navegue a: themes/your_theme/assets/js/
2. Busque un archivo llamado custom.js (créelo si no existe)
3. Añada el siguiente código para cargar dinámicamente el chatbot:
   (function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
})();
4. Reemplaza YOUR_WIDGET_ID con su ID de widget real
5. Limpie la caché de PrestaShop

Alternativa: Crear un módulo simple (Para desarrolladores)

Para desarrolladores, puede crear un módulo simple usando el hook displayFooter:

1. Cree una carpeta: modules/asyntaichatbot/
2. Cree asyntaichatbot.php con este código:
   <?php
class AsyntaiChatbot extends Module {
  public function __construct() {
    $this->name = 'asyntaichatbot';
    $this->version = '1.0.0';
    $this->author = 'Your Name';
    parent::__construct();
    $this->displayName = 'Asyntai Chatbot';
  }
  public function install() {
    return parent::install() && $this->registerHook('displayFooter');
  }
  public function hookDisplayFooter($params) {
    return '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
  }
}
3. Reemplaza YOUR_WIDGET_ID con su ID de widget real
4. Instala el módulo a través de Módulos → Administrador de módulos

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.