Añade un agente de voz con IA a una aplicación Laravel

Cómo añadir AnveVoice a una aplicación Laravel

En Laravel, el esqueleto de la página vive en un layout Blade. Pega la etiqueta de AnveVoice en ese layout, al final del body o a través de un @stack para que cada vista pueda añadirla. Borra las vistas compiladas y el botón de voz aparecerá en todas las rutas que usen el layout. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: resources/views/components/layout.blade.php o resources/views/layouts/app.blade.php, justo antes de </body>
• Programación necesaria: Una línea en un archivo Blade; sin paquete ni paso de compilación con Vite
• Límites del plan: Ninguno por parte de Laravel; funciona en tu propio servidor, Forge, Vapor o cualquier alojamiento
• Tiempo: Unos 3 minutos

¿Qué estilo de layout usa tu aplicación?

La documentación de Blade de Laravel describe dos formas de construir un esqueleto de página compartido, y la etiqueta va en un archivo distinto según la que use tu proyecto. Las aplicaciones nuevas y los kits de inicio suelen definir un componente de layout, un archivo como resources/views/components/layout.blade.php que imprime {{ $slot }} y se aplica con una etiqueta <x-layout>. Los proyectos más antiguos o actualizados suelen usar herencia de plantillas: un padre como resources/views/layouts/app.blade.php con @yield('content'), extendido por las vistas con @extends. Abre una página en la que quieras el agente de voz y mira su primera línea para ver cuál se aplica. En cualquier caso, editarás el layout padre una sola vez y cada vista hija heredará el cambio. Si tu aplicación tiene más de un layout (por ejemplo, uno de marketing y otro de panel), añade la etiqueta a cada layout en el que quieras el botón. Ten en cuenta también que Laravel 13 es ahora la versión actual de la documentación; las funciones de layout y stack Blade que se describen aquí son las mismas en las versiones 12 y 13.

• 1. Obtén tu etiqueta de instalación — Crea un bot para tu sitio en el panel de AnveVoice, en app.anvevoice.app, y copia el embed ID. Sustitúyelo en lugar de YOUR_EMBED_ID. Como la URL no contiene llaves de Blade, no necesita escaparse ni envolverse en @verbatim. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: pon la etiqueta directamente en el layout

• 1. Abre el archivo de layout — Edita el layout padre identificado arriba: resources/views/components/layout.blade.php para el estilo de componente, o resources/views/layouts/app.blade.php para la herencia.
• 2. Inserta la etiqueta encima de la etiqueta de cierre body — Coloca el script después del contenido de la página para que nunca retrase el renderizado. En un layout de componente queda así: <body> {{ $slot }} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </body>
• 3. Recarga — Blade vuelve a compilar una vista cuando cambia su archivo, así que normalmente basta con recargar el navegador en desarrollo local.

Método 2: usa un stack de Blade

Los stacks de Blade permiten que una vista hija añada contenido en un punto con nombre del layout. La documentación describe @push('scripts') en una vista y @stack('scripts') en el layout, y señala que @pushOnce evita duplicados cuando el mismo fragmento podría añadirse desde varias plantillas. Usa este método cuando solo algunas páginas deban llevar el agente de voz, por ejemplo tu página de precios y no tus pantallas de administración.

• 1. Añade un stack al layout — En el layout, añade un stack justo antes de la etiqueta de cierre body. @stack('scripts') </body>
• 2. Empuja la etiqueta desde las vistas seleccionadas — En cada vista que deba mostrar el botón, añade la etiqueta al stack. Usa @pushOnce con un ID único para evitar la doble inclusión. @pushOnce('scripts', 'anvevoice') <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> @endPushOnce

Notas de producción específicas de Laravel

• Vistas compiladas: en producción, ejecuta php artisan view:clear (o vuelve a desplegar con tu paso habitual de optimización) para que los archivos Blade en caché se regeneren con la nueva etiqueta.
• Vite no interviene. La documentación de Vite cubre el empaquetado de tus propios assets mediante @vite; un script de terceros de otro dominio no pertenece a resources/js, y empaquetarlo impediría que se actualice de forma independiente.
• Content Security Policy: si envías una cabecera CSP, añade https://anvevoice.app a la directiva script-src. Si usas el soporte de nonce de Vite en Laravel (Vite::useCspNonce en un middleware), el nonce se aplica a las etiquetas generadas por Vite; para una etiqueta escrita a mano, añade el host a script-src en lugar de depender del nonce.
• Inertia, Livewire y navegación estilo SPA: el layout se renderiza una vez en la primera carga, así que la etiqueta no se vuelve a ejecutar en las navegaciones del lado del cliente, y eso es lo que quieres. El script además ignora una segunda copia en la misma página.
• Varios entornos: envuelve la etiqueta en @production ... @endproduction si no quieres el agente de voz en copias locales o de staging, o usa un embed ID distinto por entorno desde la configuración.

Comprueba que funciona

• 1. Mira el código fuente — Abre una página en una ventana privada, consulta el código fuente y busca embed.js; debería aparecer una vez, antes de la etiqueta de cierre body.
• 2. Prueba el botón — Haz clic en el botón redondo del micrófono abajo a la derecha, permite el micrófono (el sitio debe ser HTTPS o localhost) y haz una pregunta.

Problemas habituales

• La etiqueta falta en algunas rutas: esas vistas usan otro layout. Añade la etiqueta allí o cámbialas al layout compartido.
• El botón aparece dos veces: la etiqueta está tanto en el layout como añadida desde una vista. Conserva una sola, o usa @pushOnce.
• HTML antiguo tras el despliegue: la caché de vistas o una caché de página completa (CDN, caché fastcgi de Nginx) sigue sirviendo la página anterior. Bórrala.
• Bloqueado por CSP: la consola del navegador muestra una infracción de script-src. Permite https://anvevoice.app en tu política.

Fuentes

• Laravel 13.x: plantillas Blade (layouts, stacks, @pushOnce) (https://laravel.com/docs/13.x/blade) — consultado el 2026-10-14
• Laravel 12.x: plantillas Blade (https://laravel.com/docs/12.x/blade) — consultado el 2026-10-14
• Laravel 12.x: empaquetado de assets (Vite) y nonce de CSP (https://laravel.com/docs/12.x/vite) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una aplicación de Ruby on Rails
• Cómo añadir AnveVoice a un proyecto de Django
• Cómo añadir AnveVoice a una aplicación de Flask
• Cómo añadir AnveVoice a un sitio WordPress

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.