Añade un agente de voz con IA a PrestaShop (guía 2026)

Cómo añadir AnveVoice a una tienda PrestaShop

PrestaShop carga el JavaScript de la parte pública a través de su sistema de recursos, así que la instalación más ordenada es un recurso remoto declarado en theme.yml de tu tema, con el atributo async. La alternativa es pegar la etiqueta en la plantilla de layout del tema. En ambos casos, vacía la caché después. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: themes/<your-theme>/config/theme.yml (assets > js), o la plantilla de layout antes de la etiqueta de cierre body
• Programación necesaria: Unas pocas líneas de YAML o una línea pegada en un archivo .tpl; acceso al panel de administración y a los archivos del tema
• Límites del plan: Ninguno por parte de PrestaShop: el software es autoalojado, así que controlas los archivos del tema
• Tiempo: Unos 10 minutos, incluido el vaciado de la caché

Antes de empezar

Necesitas un ID de incrustación de AnveVoice (plan Free, 0 US$, 50.000 tokens al mes, un bot, sin tarjeta; regístrate en app.anvevoice.app) y una forma de editar archivos en la carpeta de tu tema, ya sea por FTP/SFTP, SSH o el administrador de archivos de tu hosting. PrestaShop no tiene un cuadro integrado en el panel de administración para scripts personalizados, así que esta guía funciona a nivel de tema. Trabaja en un tema hijo o anota tu cambio. Si editas directamente el tema padre, una actualización del tema puede sobrescribir la edición y el botón de voz desaparecerá sin avisar.

• 1. Copia tu etiqueta de instalación — Reemplaza YOUR_EMBED_ID por el ID que aparece en tu panel de AnveVoice (app.anvevoice.app). Los parámetros opcionales de URL son &position=bottom-left y &theme=dark. El sistema de recursos de PrestaShop solo necesita la URL, así que guarda también esa parte: https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: declarar un recurso remoto en theme.yml (recomendado)

La documentación de temas de PrestaShop describe una sección assets en config/theme.yml donde se registran los archivos JavaScript. Para archivos de otro host indica usar server: remote, y establecer el atributo de carga con la clave singular attribute: async en theme.yml. Por defecto, los scripts se colocan antes de la etiqueta de cierre body, lo que encaja con un widget. Los números de prioridad más bajos se cargan antes, y el valor por defecto es 50.

• 1. Abre la configuración del tema — Edita themes/<your-theme>/config/theme.yml con tu editor o con el administrador de archivos.
• 2. Añade el script remoto — Dentro de assets, añade una entrada js que se aplique a todas las páginas. Conserva las entradas existentes y la sangría. assets: js: all: - id: anvevoice-embed path: https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID server: remote priority: 300 attribute: async
• 3. Vacía la caché — En el panel de administración, abre Advanced Parameters (Parámetros avanzados) > Performance (Rendimiento) y haz clic en Clear cache (Vaciar caché). Los cambios de recursos del tema no se aplican hasta que se reconstruye la caché.
• 4. Recarga la tienda — Abre una página de producto en una ventana privada. El script se inyecta mediante la inclusión de JavaScript del tema, así que cualquier layout que tu tema construya a partir de los archivos de layout estándar lo incluirá.

Método 2: pegar la etiqueta en la plantilla de layout

Si prefieres una etiqueta script literal, la referencia de hooks de PrestaShop indica que displayBeforeBodyClosingTag se renderiza desde el archivo de layout del tema, templates/layouts/layout-both-columns.tpl en los temas Classic y Hummingbird, y está pensado para contenido que debe cargarse al final de la página. Puedes colocar la etiqueta justo al lado de esa llamada al hook. Smarty, el lenguaje de plantillas, trata las llaves como sintaxis propia. La etiqueta de AnveVoice no contiene llaves, así que puede pegarse tal cual y no necesita un bloque literal. Otros layouts del mismo tema normalmente extienden layout-both-columns.tpl, pero comprueba que los tuyos también lo hagan; un tema personalizado que no llame al hook no mostrará nada en ese punto.

• 1. Abre el archivo de layout — Edita themes/<your-theme>/templates/layouts/layout-both-columns.tpl.
• 2. Pega la etiqueta — Añade la etiqueta de AnveVoice justo debajo de la línea que contiene {hook h='displayBeforeBodyClosingTag'} y encima de la etiqueta de cierre body.
• 3. Vacía la caché — Advanced Parameters (Parámetros avanzados) > Performance (Rendimiento) > Clear cache (Vaciar caché), y después recarga la tienda.

Comprueba que funciona

• 1. Usa una ventana privada — Una sesión de invitado muestra lo que ven los compradores y evita la caché propia del panel de administración.
• 2. Busca el botón — Un botón redondo de micrófono debería aparecer abajo a la derecha (o abajo a la izquierda si estableces position). Haz clic, permite el micrófono y haz una pregunta sobre un producto.
• 3. Ve el código fuente de la página — Busca anvevoice.app/embed.js en el código fuente. Si no aparece, la caché no se ha reconstruido o la página usa un layout que no incluye tu cambio.

Problemas comunes en PrestaShop

• El recurso no se muestra: la sangría de theme.yml es incorrecta o no se vació la caché. YAML es estricto con los espacios; compara con las entradas vecinas.
• async ignorado: theme.yml usa la clave singular attribute, mientras que la llamada PHP registerJavascript usa los atributos en plural. Confundirlos es un error tipográfico habitual.
• El botón desaparece tras una actualización del tema: el cambio estaba en el tema padre. Muévelo a un tema hijo.
• No aparece en la página de pago: algunas páginas de pago usan un layout simplificado. Si lo necesitas allí, confirma que ese layout también renderiza la inclusión estándar de JavaScript.
• No aparece la solicitud del micrófono: la tienda debe servirse por HTTPS.

Fuentes

• Documentación para desarrolladores de PrestaShop: gestión de recursos del tema (JavaScript remoto, atributos, posición) (https://devdocs.prestashop-project.org/9/themes/concepts/asset-management/) — consultado el 2026-10-14
• Documentación para desarrolladores de PrestaShop: hook displayBeforeBodyClosingTag (https://devdocs.prestashop-project.org/9/modules/concepts/hooks/list-of-hooks/displaybeforebodyclosingtag/) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una tienda OpenCart
• Cómo añadir AnveVoice a Magento y Adobe Commerce
• Cómo agregar AnveVoice a una tienda WooCommerce
• Cómo añadir AnveVoice a una tienda de BigCommerce

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.