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

Cómo añadir AnveVoice a una aplicación Phoenix (Elixir)

Phoenix envuelve cada página en un layout raíz, root.html.heex, que está en lib/your_app_web/components/layouts. Añade allí la etiqueta de AnveVoice justo antes de la etiqueta de cierre body. Como LiveView no vuelve a renderizar el layout raíz en la navegación en vivo, el botón de voz se mantiene en su sitio mientras los visitantes se desplazan. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: lib/your_app_web/components/layouts/root.html.heex, antes de </body>
• Programación necesaria: Una línea en una plantilla HEEx; ninguna dependencia en mix.exs
• Límites del plan: Ninguno por parte de Phoenix; cualquier alojamiento que ejecute tu release (Fly.io, Gigalixir, contenedores, servidores propios)
• Tiempo: Unos 3 minutos

Layout raíz frente a layout de la aplicación

Las guías de Phoenix dividen la cáscara de la página en dos partes. El layout raíz se describe como un layout básico con sobre todo la etiqueta head y una estructura compartida por todas las páginas, y renderiza tu plantilla mediante @inner_content. El layout de la aplicación contiene funciones más ricas, como barras laterales y menús, y desde Phoenix 1.8 se invoca explícitamente como componente de función, <Layouts.app flash={@flash}>. Ambos viven en lib/your_app_web/components/layouts. Para un script que deba existir en todas las páginas exactamente una vez, el layout raíz es el lugar adecuado. La guía de LiveView explica el motivo: el layout raíz se renderiza solo en la petición inicial, y su contenido permanece igual mientras navegas en vivo entre LiveViews. Un script en el layout de la aplicación, en cambio, pertenece al contenido que LiveView parchea y podría volver a renderizarse. Edita root.html.heex, no app.html.heex, salvo que quieras el agente solo en algunos layouts a propósito. El enfoque funciona con aplicaciones generadas con Phoenix 1.7 y 1.8; ambas usan la misma carpeta.

• 1. Obtén tu etiqueta de instalación — En app.anvevoice.app crea un bot para tu sitio y copia su embed ID en la URL. HEEx pasa la cadena de consulta tal cual, así que no hace falta escapar nada. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: edita root.html.heex

Las aplicaciones Phoenix 1.6 más antiguas usaban un LayoutView y plantillas en lib/your_app_web/templates/layout. La etiqueta va en el mismo tipo de archivo, root.html.heex también allí.

• 1. Abre el archivo — En tu proyecto, abre lib/your_app_web/components/layouts/root.html.heex, el archivo con los elementos html, head y body.
• 2. Añade la etiqueta debajo del contenido interno — Colócala cerca del final del body, después de la línea que renderiza @inner_content, para que nunca bloquee el primer pintado. <body class="bg-white"> {@inner_content} <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </body> </html>
• 3. Recompila — En desarrollo, la recarga de código detecta automáticamente los cambios en las plantillas. Para un release de producción, vuelve a compilarlo (mix release) y redespliégalo. Las plantillas de layout se compilan dentro de la aplicación.

Método 2: añádelo solo para ámbitos concretos

El pipeline :browser del router llama a put_root_layout, y un pipeline o un controlador puede definir un layout raíz distinto para un grupo de rutas. Si quieres el agente de voz solo en las páginas públicas de marketing, crea un segundo layout raíz (por ejemplo root_marketing.html.heex) que contenga la etiqueta, y selecciónalo con put_root_layout en el pipeline de un ámbito dedicado. Las rutas del panel de usuario con sesión iniciada seguirán usando el layout raíz original, sin la etiqueta.

• 1. Crea el layout raíz adicional — Copia root.html.heex a root_marketing.html.heex en la misma carpeta y añade la etiqueta como se indicó. El módulo de layouts normalmente incrusta todas las plantillas de la carpeta mediante embed_templates, así que al recompilar se incluirá el nuevo archivo.
• 2. Selecciónalo en un pipeline — Añade un pipeline que sustituya el layout raíz, y canaliza el ámbito de marketing a través de él después de :browser. pipeline :marketing do plug :put_root_layout, html: {MyAppWeb.Layouts, :root_marketing} end

Particularidades de Phoenix: cabeceras, assets y LiveView

• Cabeceras de seguridad: el pipeline :browser del router incluye put_secure_browser_headers. Su documentación describe el valor predeterminado de content-security-policy como equivalente a base-uri 'self'; frame-ancestors 'self', que no restringe las fuentes de script, así que la etiqueta se carga. Si pasas un mapa content-security-policy más estricto, añade https://anvevoice.app a script-src.
• Assets: Phoenix empaqueta tu propio JavaScript desde assets/js/app.js con esbuild y lo deja en priv/static/assets. Un script de terceros con una dirección completa no pasa por esbuild y no necesita ninguna entrada en app.js. No copies embed.js a priv/static, porque dejaría de recibir actualizaciones.
• Navegación con LiveView: como el layout raíz no se vuelve a renderizar al navegar entre LiveViews, el script no se recarga; además, el script de AnveVoice ignora una segunda copia en la misma página.
• Releases: tras editar, ejecuta tu compilación habitual; el paso de digest (mix phx.digest) solo afecta a tus propios assets.

Comprueba que funciona

• 1. Inspecciona el HTML — Ejecuta la aplicación, carga una página en una ventana privada y mira el código fuente. embed.js debería aparecer una vez, antes de la etiqueta de cierre body.
• 2. Navega y prueba — Recorre algunos enlaces de LiveView para confirmar que el botón permanece; después haz clic en él, permite el micrófono (HTTPS o localhost) y haz una pregunta.

Problemas habituales

• La etiqueta falta solo en producción: el release desplegado se compiló antes del cambio en la plantilla. Vuelve a compilar y a desplegar.
• La etiqueta se añadió en app.html.heex: las páginas que no renderizan <Layouts.app> no la tendrán. Usa el layout raíz.
• Bloqueada por CSP: una cabecera content-security-policy personalizada no incluye anvevoice.app en script-src.
• Error de compilación en HEEx: la etiqueta pegada tenía un elemento sin cerrar; el elemento script necesita su etiqueta de cierre.

Fuentes

• Guías de Phoenix: ciclo de vida de la petición (layouts, layout raíz) (https://phoenix.hexdocs.pm/request_lifecycle.html) — consultado el 2026-10-14
• Documentación de Phoenix LiveView: layouts en vivo (comportamiento del layout raíz) (https://phoenix-live-view.hexdocs.pm/live-layouts.html) — consultado el 2026-10-14
• Documentación de Phoenix: Phoenix.Controller (put_secure_browser_headers) (https://phoenix.hexdocs.pm/Phoenix.Controller.html) — consultado el 2026-10-14
• Guías de Phoenix: gestión de assets (https://phoenix.hexdocs.pm/asset_management.html) — 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 una aplicación Laravel
• Cómo añadir AnveVoice a un proyecto de Django
• Cómo añadir AnveVoice a una aplicación de Flask

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.