Añade un agente de voz con IA a tu sitio de Framer (2026)

Cómo añadir AnveVoice a un sitio de Framer

En Framer abre Site Settings, elige la pestaña Custom Code, añade un script, pega la etiqueta de AnveVoice, elige una ubicación al final del body y publica. Framer no ejecuta el código personalizado en el lienzo ni en la vista previa del editor, así que prueba en el sitio publicado. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Site Settings, pestaña Custom Code, Add Script
• Opciones de ubicación: Inicio o final del head, inicio o final del body
• Límite del plan: La ayuda de Framer indica que el código personalizado requiere un plan de pago; confírmalo en tu pestaña Plans
• Ajuste de ejecución: Una vez, o en cada visita a la página; con una vez basta
• Se activa: Tras publicar el sitio

Cómo funciona el Custom Code de Framer

Framer trata un script inyectado como un elemento con nombre y con sus propios ajustes, en lugar de un único cuadro de texto grande. Cada script que añades tiene un nombre, una ubicación, una lista opcional de páginas y una regla sobre la frecuencia con la que se ejecuta. Esa estructura resulta útil porque puedes activar el agente de voz de AnveVoice para todo el sitio o solo para algunas páginas, sin editar un bloque de código compartido. El artículo de ayuda de Framer sobre esta función enumera como usos típicos las herramientas de analítica y marketing, los widgets de chat y de soporte, el CSS y el JavaScript personalizados, y los datos estructurados. Un widget de voz pertenece al mismo grupo que un widget de chat. Crea primero tu ID de incrustación en app.anvevoice.app; el plan gratuito cuesta $0, con 50.000 tokens al mes y sin tarjeta.

• 1. Copia la etiqueta — Usa tu propio ID de incrustación en lugar de YOUR_EMBED_ID. Parámetros opcionales de URL: &position=bottom-left o &theme=dark. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Añade el script

• 1. Abre los ajustes — En tu proyecto de Framer abre Project Settings (Site Settings en algunas versiones) y selecciona la pestaña Custom Code en la barra lateral izquierda.
• 2. Añade un script — Si todavía no hay código, haz clic en Add Script. Si no, haz clic en el icono de más. Dale un nombre reconocible, como AnveVoice.
• 3. Elige la ubicación — Elige el final del body. Framer ofrece el inicio o el final del head y el inicio o el final del body, y la posición adecuada depende del script. En un widget, el final del body evita que compita con tu contenido.
• 4. Elige las páginas — Deja la lista de páginas vacía para todo el sitio, o selecciona páginas concretas. En una página de CMS también puedes añadir datos estructurados, que aquí no hacen falta.
• 5. Elige con qué frecuencia se ejecuta — Framer ofrece Once, que se ejecuta una sola vez, por ejemplo para añadir listeners de eventos, y Run on every page visit. AnveVoice se instala solo una vez e ignora una segunda copia, así que Once es la opción sensata.
• 6. Publica — Publica tu sitio. Framer indica que el Custom Code no se carga en la vista previa del lienzo, así que el cambio solo es visible en la página publicada.

Una página, una sección o todo el sitio

Para todo el sitio es lo más sencillo. Framer también permite que una sola página tenga su propia sección de Custom Code: abre los ajustes de esa página y añade el script allí en lugar de en la pestaña global, de modo que no se cargue en páginas que no lo necesitan. Un ajuste a nivel de página sustituye lo que define el nivel de sitio para el mismo elemento, lo cual ayuda si quieres otra ubicación para AnveVoice en una sola página de aterrizaje. La propia lección de Framer sugiere pensar antes de añadir cualquier script de terceros: confirmar su origen, la ubicación que requiere y los requisitos de consentimiento, decidir qué páginas deben ejecutarlo y eliminar el código que el sitio ya no usa, porque los scripts adicionales pueden afectar a la privacidad y al rendimiento.

Puntos específicos de Framer

• Plan de pago. La ayuda de Framer describe el código personalizado como disponible con un plan de pago. Framer ha cambiado recientemente su oferta de planes, así que abre tu pestaña Plans y busca el código personalizado antes de construir nada que dependa de él.
• Sin validación. Framer no comprueba lo que pegas. Un error tipográfico puede romper un script en silencio, así que copia la etiqueta exactamente y prueba la página en vivo.
• Etiquetas permitidas. Framer admite HTML, CSS y JavaScript, con etiquetas link, script, meta y style; no puede ejecutar lenguajes de servidor. La etiqueta de AnveVoice es una etiqueta script simple, que sí está permitida.
• Consentimiento. Si tu sitio muestra un banner de cookies, decide si el agente de voz debe cargarse antes o después del consentimiento, y configúralo en tu herramienta de banner.
• La vista previa no es una prueba. El lienzo y la vista previa del editor no ejecutan el script, así que un botón ausente allí es lo esperado.

Comprueba que funciona

• 1. Abre la URL en vivo — Usa una ventana privada en tu dominio publicado, o en la dirección framer.website mientras pruebas.
• 2. Busca el micrófono — Aparece abajo a la derecha, salvo que hayas configurado bottom-left.
• 3. Revisa la consola si falta — La lección de Framer recomienda abrir la consola del navegador en la página en vivo. Una petición bloqueada o un error tipográfico en la URL aparecerá allí.

Problemas frecuentes

• Nada tras guardar: no has publicado, o estás viendo la vista previa.
• Sin contenido en la pestaña Custom Code, o aparece un aviso para mejorar el plan: el proyecto está en un plan sin código personalizado.
• Solo en una página: el script se limitó a páginas concretas; borra la lista de páginas para que sea de todo el sitio.
• Se ejecuta dos veces: el script está configurado para ejecutarse en cada visita y existe un duplicado. AnveVoice ignora la segunda copia, pero conviene eliminar los duplicados para mantener el orden.

Fuentes

• Ayuda de Framer: cómo añadir código personalizado (https://www.framer.com/help/articles/how-to-add-custom-code/) — consultado el 2026-10-14
• Framer Learn: Custom Code (a nivel de sitio y de página) (https://www.framer.com/learn/custom-code/) — consultado el 2026-10-14

Relacionado

• Cómo agregar AnveVoice a un sitio de Webflow
• Cómo agregar AnveVoice a un sitio de Wix Studio
• Cómo añadir AnveVoice a un sitio de Carrd
• Cómo añadir AnveVoice a un sitio de Squarespace

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.