Añade un agente de voz con IA a Magento (Adobe Commerce)

Cómo añadir AnveVoice a Magento y Adobe Commerce

Magento y Adobe Commerce tienen un lugar integrado para scripts de terceros: la pantalla Design Configuration (configuración de diseño) del Admin. Pega la etiqueta de AnveVoice en el campo Miscellaneous HTML (HTML varios) del pie, guarda, actualiza la caché y permite anvevoice.app en tu Content Security Policy para que el script no se bloquee. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Content > Design > Configuration > tu vista de tienda > Other Settings > Footer > Miscellaneous HTML
• Programación necesaria: Ninguna para pegar; hace falta un módulo personalizado pequeño si debes permitir el dominio en una Content Security Policy
• Alcance: Se define por vista de tienda, así que las configuraciones con varias tiendas necesitan una entrada por cada tienda que deba mostrar el botón de voz
• Tiempo: Unos 5 minutos, más una actualización de caché

Antes de empezar

Crea primero tu bot de AnveVoice. El plan Free cuesta 0 US$, incluye 50.000 tokens al mes y un bot, y no requiere tarjeta; regístrate en app.anvevoice.app y copia el embed ID del panel. También necesitas un usuario del Admin al que se le permita editar la configuración de Content > Design. Magento Open Source y Adobe Commerce comparten la misma pantalla de Design Configuration. Si tu tienda es headless (por ejemplo, un front end personalizado en React que habla con Magento solo a través de sus API), los campos de abajo no la afectarán, porque el HTML lo genera ese otro front end. En ese caso, pon la etiqueta en el shell HTML del propio front end.

• 1. Copia tu etiqueta de instalación — Sustituye YOUR_EMBED_ID por el ID que aparece en tu panel de AnveVoice (app.anvevoice.app). Los parámetros de URL opcionales son &position=bottom-left y &theme=dark. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: el campo Miscellaneous HTML del pie (recomendado)

La guía de administración de Adobe describe la sección Footer (pie) de la configuración de diseño como el lugar para el texto de copyright y para los scripts que deben ir justo antes de la etiqueta de cierre body. El campo se llama Miscellaneous HTML. Cargar ahí el agente de voz lo mantiene fuera del head y no retrasa la primera pintura de tus páginas de catálogo.

• 1. Abre la configuración de diseño — En la barra lateral del Admin, elige Content (contenido) y después Design > Configuration (diseño > configuración). La tabla muestra filas para el ámbito global, cada sitio web y cada vista de tienda.
• 2. Edita el ámbito correcto — Busca en la tabla la vista de tienda que quieras y haz clic en Edit (editar) en la columna Action (acción). Todos los campos de las secciones HTML Head y Footer se guardan por vista de tienda, así que repite esto para cada tienda que deba mostrar el asistente.
• 3. Despliega Footer — En Other Settings (otros ajustes), despliega la sección Footer. Deja el texto de Copyright como está.
• 4. Pega la etiqueta — Pega la etiqueta de AnveVoice en Miscellaneous HTML. Si ya hay otros scripts en el cuadro, añade el tuyo en su propia línea debajo de ellos.
• 5. Guarda y actualiza la caché — Haz clic en Save Configuration (guardar configuración). Después ve a System > Tools > Cache Management (sistema > herramientas > gestión de caché), selecciona los tipos Configuration y Page Cache (y Layouts y Blocks HTML si se te pide), elige Refresh (actualizar) en el menú Actions (acciones) y haz clic en Submit (enviar).

Método 2: el campo HTML Head

La misma pantalla tiene una sección HTML Head con un cuadro Scripts and Style Sheets (scripts y hojas de estilo). La guía de Adobe indica que el contenido de ese cuadro se inserta antes de la etiqueta de cierre head. Funcionará con la etiqueta de AnveVoice porque el script es asíncrono, pero el campo del pie es el lugar más limpio para un widget que no hace falta para renderizar la página. Usa el campo head solo si tu tema o una extensión de terceros ya sustituye la zona del pie, o si por política guardas todo el código de seguimiento y de widgets en un mismo lugar.

Content Security Policy: el paso que falla en la mayoría de las tiendas

La documentación de Adobe indica que el JavaScript añadido mediante Scripts and Style Sheets o Miscellaneous HTML debe estar permitido por la Content Security Policy; si no, no se ejecutará en las páginas de pago. El artículo de solución de problemas de Adobe añade que, desde la versión 2.4.7, las páginas de pago usan la CSP en modo restrict (restrictivo) por defecto, mientras que las demás páginas funcionan en modo report-only (solo informe). En el modo report-only el script sigue cargándose y el navegador solo registra una infracción; en el modo restrict se bloquea un script de un host que no esté en la lista permitida. Para permitir el host de AnveVoice, un desarrollador añade anvevoice.app a la directiva script-src en el archivo csp_whitelist.xml de un módulo personalizado, siguiendo la documentación para desarrolladores de Adobe sobre Content Security Policy. Lo más fácil es comprobar empíricamente si el asistente de voz necesita otros dominios en tu tienda: abre la consola del navegador en una página de pago y añade el host que indique como bloqueado. Si no quieres el asistente en el pago, puedes omitir la lista permitida y aceptar que el botón simplemente no aparezca en las páginas de pago.

Comprueba que funciona

• 1. Recarga en una ventana privada — Abre una página de categoría de tu tienda en una ventana privada para que ni las sesiones del admin ni la caché del navegador interfieran.
• 2. Busca el botón del micrófono — Aparece un botón redondo de micrófono abajo a la derecha, salvo que uses &position=bottom-left. Haz clic en él, concede el acceso al micrófono y pregunta por un producto. La tienda debe servirse por HTTPS para que el micrófono funcione.
• 3. Prueba una página de pago — Repite en el carrito y en el pago. Si el botón falta solo ahí, la causa casi siempre es la Content Security Policy, y la consola mostrará un mensaje de script rechazado con el host bloqueado.

Problemas habituales en Magento

• No cambió nada tras guardar: actualiza los tipos Configuration y Page Cache en Cache Management. Si la tienda sigue igual, usa Flush JavaScript/CSS Cache (vaciar caché de JavaScript/CSS) y borra también la caché del navegador.
• El botón aparece en la página de inicio pero no en el pago: la Content Security Policy está bloqueando anvevoice.app en las páginas de pago; permítelo en el archivo csp_whitelist.xml de un módulo.
• El botón solo aparece en una vista de tienda: los campos se definen por vista de tienda, así que añade la etiqueta a cada vista que la necesite.
• La etiqueta dentro de los archivos .phtml del tema desaparece tras una actualización: mantén la etiqueta en el campo del Admin en lugar de editar las plantillas del tema del proveedor.

Fuentes

• Guía de administración de Adobe Commerce: configuración de página (configuración de diseño de HTML Head y Footer) (https://experienceleague.adobe.com/en/docs/commerce-admin/content-design/design/page-setup) — consultado el 2026-10-14
• Guía de administración de Adobe Commerce: gestión de caché (https://experienceleague.adobe.com/en/docs/commerce-admin/systems/tools/cache-management) — consultado el 2026-10-14
• Solución de problemas de Adobe Commerce: página de pago de la tienda en modo CSP restrictivo (https://experienceleague.adobe.com/en/docs/commerce-knowledge-base/kb/troubleshooting/payments/storefront-checkout-page-in-csp-restricted-mode) — consultado el 2026-10-14

Relacionado

• Cómo agregar AnveVoice a una tienda WooCommerce
• Cómo añadir AnveVoice a una tienda de BigCommerce
• Cómo añadir AnveVoice a una tienda PrestaShop
• Cómo añadir AnveVoice a una tienda Shopify

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.