Añade un agente de voz con IA a Netlify

Cómo añadir AnveVoice a un sitio alojado en Netlify

Netlify puede inyectar la etiqueta de AnveVoice en tus páginas en el momento de servirlas, en Project configuration (configuración del proyecto), Developer settings (ajustes de desarrollador), Post processing (posprocesado), Snippet injection (inyección de fragmentos). Surte efecto de inmediato, sin redespliegue, pero omite el contenido con proxy y las páginas renderizadas en el servidor. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Project configuration → Developer settings → Post processing → Snippet injection → Add Snippet
• Colocación: Antes de la etiqueta de cierre </head> o antes de la etiqueta de cierre </body>
• Redespliegue: No hace falta; el fragmento se inyecta cuando se sirven las páginas
• No se aplica a: Contenido con proxy, rutas gestionadas por funciones y páginas SSR

¿Es Snippet Injection la vía adecuada?

Netlify aloja el sitio, pero el HTML de la página suele venir de tu propio proyecto: una compilación estática, un sitio Next.js, Astro o Hugo, o una carpeta HTML escrita a mano. Si puedes editar ese proyecto, poner la etiqueta de AnveVoice en el código fuente (consulta la guía de instalación de tu framework) es el enfoque más previsible, y viaja con el código. Snippet Injection resulta útil cuando no puedes o no quieres cambiar el repositorio, o cuando hay que añadir la misma etiqueta a varios contextos de despliegue rápidamente. Necesitas tu embed ID de app.anvevoice.app. El plan Free cuesta 0 US$ y no requiere tarjeta. La página de snippets de Netlify no indica ninguna restricción de plan para la función, así que busca la sección Post processing en los ajustes de tu propio proyecto.

Añade el fragmento

• 1. Abre los ajustes del proyecto — En la aplicación de Netlify, abre tu proyecto y ve a Project configuration → Developer settings (configuración del proyecto → ajustes de desarrollador). Las guías antiguas de Netlify llaman a esta área Build & deploy (compilación y despliegue), así que búscala ahí si no ves Developer settings.
• 2. Busca Post processing — Desplázate hasta la sección Post processing y localiza Snippet injection (inyección de fragmentos).
• 3. Añade un fragmento — Haz clic en Add Snippet (añadir fragmento). Ponle un nombre como AnveVoice.
• 4. Pega la etiqueta y elige la colocación — Pega la etiqueta de abajo como contenido del fragmento. Netlify te deja elegir entre inyectar antes de la etiqueta de cierre head o antes de la etiqueta de cierre body; antes de la etiqueta de cierre body es una opción natural. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>
• 5. Guarda — Guarda el fragmento. Netlify indica que se inyecta de inmediato y que no es necesario redesplegar.

Dónde funciona la inyección y dónde no

Netlify explica que los fragmentos se inyectan cuando se sirve una página, no cuando se compila el sitio, y que la función está pensada para HTML estático. Tres casos quedan fuera:

• Contenido con proxy: si una ruta se envía con proxy a otro servicio, ese servicio debe devolver el HTML completo por sí mismo, incluida la etiqueta de AnveVoice.
• Rutas gestionadas por funciones: si una ruta la gestiona una Netlify Function, no se inyectan fragmentos.
• Páginas renderizadas en el servidor: como el SSR de Netlify se ejecuta en Netlify Functions, los fragmentos no se inyectan en las páginas SSR. En una aplicación de framework con SSR, añade la etiqueta en el propio framework (las guías de Next.js, Nuxt o SvelteKit) en su lugar.

Previews, ramas y protección con contraseña

Un fragmento se aplica al proyecto tal como se sirve, así que los previews de despliegue y los despliegues de ramas de los sitios estáticos también muestran el agente de voz, y se usará el mismo embed ID. Si no quieres que los despliegues de preview cuenten para el consumo ni aparezcan en la actividad de tu agente, envuelve la etiqueta en las condiciones Liquid de Netlify sobre la variable CONTEXT, que Netlify documenta para los fragmentos, de modo que el script solo se renderice en producción. Netlify también indica que los fragmentos inyectados aparecen en la pantalla de protección con contraseña. Es útil para probar: puedes confirmar que el script se carga antes de quitar la contraseña.

Comprueba que funciona

• 1. Abre la URL en vivo en una ventana privada — Usa tu subdominio de Netlify o tu dominio personalizado.
• 2. Busca el botón del micrófono — Aparece abajo a la derecha por defecto. Haz clic en él, permite el acceso al micrófono y haz una pregunta sobre el sitio.
• 3. Mira el código fuente de la página — Busca anvevoice.app/embed.js en el HTML servido. Si falta, lo más probable es que la ruta sea una función, un proxy o una página SSR.

Problemas habituales

• El fragmento está guardado pero falta en una página: esa página es SSR, tiene proxy o la gestiona una función. Añade la etiqueta en el código de la aplicación en su lugar.
• El botón aparece dos veces: la etiqueta también está en el código fuente del sitio. Conserva una sola copia.
• Variables no disponibles en el fragmento: las variables de entorno personalizadas necesitan el ámbito de Post processing para que los fragmentos puedan leerlas.
• Micrófono bloqueado: Netlify sirve HTTPS por defecto; revisa el certificado del dominio personalizado si el navegador indica una página no segura.

Fuentes

• Documentación de Netlify: Snippet injection (inyección de fragmentos) (https://docs.netlify.com/build/post-processing/snippet-injection/) — consultado el 2026-10-14
• Blog de Netlify: cómo añadir funciones a tu sitio mediante inyección de fragmentos (https://www.netlify.com/blog/2021/12/20/how-to-add-features-to-your-site-via-snippet-injection/) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio web HTML sencillo
• Cómo añadir AnveVoice a una aplicación Next.js
• Cómo añadir AnveVoice a un sitio de Astro
• Cómo añadir AnveVoice con Google Tag Manager

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.