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

Cómo añadir AnveVoice a la tienda de Shopware 6

Shopware 6 no tiene un campo de administración para scripts de terceros. Añade la etiqueta extendiendo base.html.twig de la parte pública en un plugin pequeño y usando el bloque base_body_script. La documentación de Shopware pide defer o async en los scripts externos, y la etiqueta de AnveVoice ya lo incluye. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: El bloque base_body_script de storefront/base.html.twig, sobrescrito en un plugin
• Programación necesaria: Sí: un plugin mínimo con un archivo Twig; no hace falta escribir JavaScript
• Límites del plan: Necesitas una instalación de Shopware en la que puedas instalar tu propio plugin (autoalojada, o una plataforma gestionada que permita plugins personalizados)
• Tiempo: Unos 20 minutos para un desarrollador, incluidos los pasos de compilación y caché

Antes de empezar

Regístrate en app.anvevoice.app (plan Free: 0 US$, 50.000 tokens al mes, un bot, sin tarjeta) y copia tu ID de incrustación. También necesitas acceso por línea de comandos a tu proyecto de Shopware, o a un desarrollador que lo tenga, porque la sobrescritura de la plantilla se entrega como parte de un plugin. La guía para desarrolladores de Shopware sobre añadir JavaScript como etiqueta script es explícita sobre cuándo usar esta vía: por ejemplo, cargar un script desde un CDN externo, y solo cuando hay una razón técnica para colocarlo fuera del JavaScript empaquetado de la tienda. Un widget de terceros es exactamente ese caso. Si tu hosting es una plataforma gestionada de Shopware, confirma con el proveedor que se pueden desplegar plugins personalizados.

• 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 opcionales de URL son &position=bottom-left y &theme=dark. Shopware recomienda evitar las etiquetas script externas sin defer o async, porque bloquean el renderizado; la etiqueta de AnveVoice ya incluye async. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Crea o reutiliza un plugin

Pon el cambio en un plugin propio (o en un plugin de proyecto existente) en lugar de editar los archivos core de Storefront, que una actualización de Shopware sobrescribiría. El material de aprendizaje del hub muestra el comando de creación, bin/console plugin:create, que genera la carpeta en custom/plugins/<PluginName>. Después de añadir la plantilla de abajo, registra y activa el plugin con los comandos de los pasos.

• 1. Genera el plugin — Desde la raíz del proyecto, ejecuta bin/console plugin:create AnveVoiceEmbed (cualquier nombre sirve). Crea custom/plugins/AnveVoiceEmbed con la estructura estándar.
• 2. Añade la sobrescritura de la plantilla — Crea src/Resources/views/storefront/base.html.twig dentro del plugin y extiende la plantilla de Storefront. Llama siempre a parent(), como indica la guía de Shopware, para que el JavaScript propio de Storefront siga renderizándose. {% sw_extends '@Storefront/storefront/base.html.twig' %} {% block base_body_script %} {{ parent() }} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> {% endblock %}
• 3. Registra y activa — Ejecuta bin/console plugin:refresh y después bin/console plugin:install AnveVoiceEmbed --activate.
• 4. Vacía la caché — Ejecuta bin/console cache:clear (o bórrala desde Settings (Configuración) > System (Sistema) > Caches & indexes (Cachés e índices) en la Administración). Los cambios de Twig no se ven hasta que se reconstruye la caché.

Dónde se sitúa el script en la página

El bloque base_body_script de src/Storefront/Resources/views/storefront/base.html.twig se renderiza cerca del final del body, donde se imprime el JavaScript de Storefront. Colocar tu etiqueta después de parent() la pone después de los scripts propios de Shopware, lo que recomienda la guía de Shopware salvo que tu script necesite acceder al código de Storefront. El widget de AnveVoice es autocontenido, así que el orden no afecta a su funcionamiento. Los bloques de Twig son el único punto de extensión compatible. Si el nombre de un bloque difiere en tu versión (las guías existen para las versiones 6.5, 6.6 y 6.7, y las anteriores aparecen marcadas como desactualizadas), abre la plantilla base que viene con tu Storefront instalado y comprueba los nombres de los bloques antes de confiar en ellos.

Consentimiento y ajustes de cookies

Un script colocado en base_body_script se carga para todos los visitantes en cuanto se renderiza la página. Si tu política de privacidad exige consentimiento antes de que cargue un asistente de voz, eso debe gestionarse en tu configuración de consentimiento de cookies. Es independiente de esta instalación y depende de tu asesoramiento legal y de las herramientas de consentimiento que uses.

Comprueba que funciona

• 1. Abre la tienda en una ventana privada — Usa una sesión de invitado para evitar las vistas previas de la Administración y las páginas en caché.
• 2. Busca el botón — El botón redondo del micrófono aparece abajo a la derecha por defecto. Haz clic, permite el acceso al micrófono (se requiere HTTPS) y pregunta por un producto.
• 3. Revisa el código fuente — Busca anvevoice.app/embed.js en el código fuente de la página. Si no aparece, el plugin no está activo o no se vació la caché.

Problemas comunes en Shopware

• El bloque no se imprime: el plugin está instalado pero no activado, o la ruta de la plantilla es incorrecta. Debe ser src/Resources/views/storefront/base.html.twig.
• Desaparecen otros scripts de la tienda: se omitió parent() en el bloque, lo que sustituye la salida por defecto.
• El cambio no se ve: ejecuta bin/console cache:clear y, si tu proyecto usa un CDN o un proxy inverso, purgarlo.
• Funciona en desarrollo pero no en producción: el plugin debe estar instalado y activado también en producción, y la tienda debe reconstruirse según tu proceso de despliegue.

Fuentes

• Documentación para desarrolladores de Shopware: añadir JavaScript como etiqueta script (https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-javascript-as-script-tag.html) — consultado el 2026-10-14
• Shopware Hub (aprendizaje): JavaScript personalizado para el Storefront (https://hub.shopware.com/learn/unit/custom-javascript.md) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a Magento y Adobe Commerce
• Cómo añadir AnveVoice a una tienda PrestaShop
• 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.