Añade un agente de voz con IA a una app de Rails

Cómo añadir AnveVoice a una aplicación de Ruby on Rails

Rails renderiza cada página dentro de app/views/layouts/application.html.erb. Añade allí el script de AnveVoice con javascript_include_tag y una URL completa, que el asset pipeline deja intacta. Si tienes un inicializador de Content Security Policy, permite anvevoice.app en script_src. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: app/views/layouts/application.html.erb, dentro de head o justo antes de </body>
• Programación necesaria: Una línea ERB; editar el inicializador de CSP solo si aplicas una política estricta
• Límites del plan: Ninguno por parte de Rails; funciona donde sea que despliegues (Kamal, Heroku, Render, tu propio servidor)
• Tiempo: Unos 3 minutos

Cómo funciona el layout

La guía de layouts y renderizado de Rails explica que el cuerpo principal de una vista se renderiza en el yield sin nombre del layout, y que una app recién generada ya incluye un yield con nombre para el head. Los helpers de recursos, como javascript_include_tag y stylesheet_link_tag, suelen colocarse en el head del layout. La guía también señala que estos helpers generan enlaces sin comprobar que el recurso exista. Ese comportamiento es útil aquí. Si pasas a javascript_include_tag una URL completa en lugar de un nombre de archivo empaquetado, Rails escribe la etiqueta tal cual. La documentación de la API del helper de etiquetas de recursos incluye un ejemplo con una dirección completa y la opción async: true, que produce un elemento script con el atributo async. Un nombre simple como 'main' se buscaría en el asset pipeline y se serviría desde /assets, que es el lugar equivocado para un script de terceros. La guía está escrita para Rails 8.1, y la estructura del layout es la misma en las versiones 7.x recientes.

• 1. Obtén tu etiqueta de instalación — Crea el bot en el panel de AnveVoice, en app.anvevoice.app, y copia el ID de incrustación. Mantén el resto de la URL exactamente como está, incluida la cadena de consulta. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: usar javascript_include_tag en el layout

Si prefieres HTML simple, pega la etiqueta script literal en el archivo ERB. ERB imprime el texto que está fuera de los marcadores <% %> sin cambios, así que ambos enfoques producen la misma página.

• 1. Abre el layout — Edita app/views/layouts/application.html.erb. Si tienes otros layouts (por ejemplo, admin.html.erb), decide cuáles deben incluir el agente de voz.
• 2. Añade el helper antes de la etiqueta de cierre body — La opción async evita que bloquee el renderizado de la página. Rails escribe el atributo como async="async", lo cual es equivalente. <%= javascript_include_tag "https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID", async: true %> </body> </html>
• 3. Reinicia o recarga — En desarrollo, los cambios de ERB se aplican en la siguiente petición. En producción, vuelve a desplegar; esta etiqueta no necesita ningún paso de precompilación de recursos.

Método 2: añadirla por página con content_for

La guía de Rails describe content_for como la forma en que una vista rellena un yield con nombre, útil para elementos script o link específicos de cada página dentro de un head genérico. Para que el agente de voz aparezca solo en algunas páginas, da al layout un yield con nombre y añade la etiqueta desde esas vistas.

• 1. Añade un yield con nombre — En el layout, añade esto antes de </body>. <%= yield :voice_agent %>
• 2. Rellénalo en las vistas seleccionadas — En una vista como app/views/pages/pricing.html.erb: <% content_for :voice_agent do %> <%= javascript_include_tag "https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID", async: true %> <% end %>

Content Security Policy y Turbo

• CSP: las apps de Rails pueden definir una política en config/initializers/content_security_policy.rb. La guía de seguridad muestra policy.script_src :self, :https, que ya permite cualquier host de script HTTPS. Si la tuya es más estricta, añade el origen: policy.script_src :self, "https://anvevoice.app". La guía también describe el modo solo de informe, para que primero observes las infracciones.
• Turbo Drive: las apps de Rails 7 y 8 usan Turbo, que sustituye el body al navegar sin recargar la página completa. Una etiqueta script colocada en el body del layout se evalúa una vez y persiste, que es el comportamiento deseado; además, el script de AnveVoice ignora una segunda copia en la página.
• Caché de fragmentos y de página: si almacenas en caché todo el layout (por ejemplo, con una regla de CDN), purga la caché después del primer despliegue.
• Entornos: envuelve el helper en <% if Rails.env.production? %> para no mostrar el botón en desarrollo ni en pruebas.

Comprueba que funciona

• 1. Inspecciona el HTML generado — Abre el sitio en una ventana privada, revisa el código fuente y busca embed.js con el atributo async.
• 2. Usa el botón — Haz clic en el botón del micrófono, permite el acceso (HTTPS o localhost) y di o escribe una pregunta sobre tu sitio.

Problemas comunes

• La petición va a /assets/...: el argumento era un nombre de archivo simple. Usa la dirección https completa para que Rails no la resuelva a través del pipeline.
• Bloqueado por CSP: la consola indica script-src. Añade el host o cambia la política a solo informe mientras investigas.
• Aparece dos veces: la etiqueta existe tanto en el layout como en un bloque content_for; conserva una.
• No se ve en las páginas de administración: usan otro archivo de layout; añade la etiqueta allí si la quieres.

Fuentes

• Guías de Rails: layouts y renderizado (etiquetas de recursos, yield, content_for) (https://guides.rubyonrails.org/layouts_and_rendering.html) — consultado el 2026-10-14
• API de Rails: ActionView AssetTagHelper (javascript_include_tag, async) (https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html) — consultado el 2026-10-14
• Guías de Rails: asegurar aplicaciones Rails (Content Security Policy) (https://guides.rubyonrails.org/security.html) — consultado el 2026-10-14

Relacionado

• 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
• Cómo añadir AnveVoice a un sitio de Express (Node.js)

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.