Añade un agente de voz con IA a una app de Softr (guía 2026)

Cómo añadir AnveVoice a una app de Softr

Softr ofrece código personalizado a nivel de app en Settings (Configuración), donde el campo footer se ejecuta antes de la etiqueta de cierre body, y código personalizado a nivel de página en Page Settings (Ajustes de página). Pega la etiqueta de AnveVoice en el footer de la app, guarda y publica. Las apps de Softr pueden comportarse como single-page apps, lo que cambia la forma en que se cargan los scripts. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Settings (Configuración) → Custom Code (Código personalizado) → campo footer (en toda la app), o Page Settings (Ajustes de página) → Custom Code (Código personalizado) (una página)
• Programación necesaria: Ninguna; pega una etiqueta de script, guarda y publica
• Límites del plan: Las docs de Softr indican que el bloque Custom code necesita un plan de pago (Pro y superiores); los campos a nivel de app no tienen plan indicado en las páginas que revisamos
• Tiempo: Unos 2 minutos

Antes de empezar

Softr crea aplicaciones web y portales sobre fuentes de datos como Airtable o la base de datos propia de Softr. El agente de AnveVoice responde preguntas sobre el contenido de las páginas de tu sitio, así que decide qué páginas deben incluirlo: normalmente, todas las públicas. Obtén tu ID de incrustación en app.anvevoice.app. El plan Free de AnveVoice no necesita tarjeta. En el lado de Softr, revisa el plan de tu workspace antes de empezar, porque las funciones de código de Softr dependen del plan.

• 1. Copia la etiqueta — Esta línea es la instalación completa. Sustituye YOUR_EMBED_ID por el ID de tu panel de AnveVoice; se puede añadir &position=bottom-left o &theme=dark a la URL. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Límites del plan en Softr

La página de documentación de Softr «Custom Code Block Overview» indica en dos lugares que el código personalizado está disponible desde el plan Pro en adelante, y que necesitas un plan de pago para usar el bloque Custom code. Esa nota se refiere al bloque que arrastras a una página. La documentación de Settings → Custom Code (Configuración → Código personalizado) y de Page Settings (Ajustes de página) describe los campos de cabecera y pie sin nombrar ningún plan, así que no podemos garantizar que funcionen en todos los niveles. Consejo práctico: abre los Settings de tu app y busca la sección Custom Code. Si está ahí y se guarda, úsala. Si Softr te pide que mejores el plan, eso confirma la restricción; compara la página de precios actual de Softr antes de elegir un nivel. La página de precios y planes de Softr describe los planes de autoservicio Free, Basic, Pro y Business, además de un plan Enterprise personalizado.

Método 1: código del pie a nivel de app (recomendado)

La documentación de General Settings de Softr indica que la sección Custom Code de la app tiene dos partes: la primera se aplica antes de la etiqueta de cierre head, la segunda antes de la etiqueta de cierre body, y la segunda está pensada para scripts. La etiqueta de AnveVoice va en el segundo campo.

• 1. Abre los Settings de la app — En Softr Studio, abre tu app y haz clic en Settings (Configuración).
• 2. Busca Custom Code — Desplázate hasta la sección Custom Code (Código personalizado) en General settings (Ajustes generales). Verás el campo de cabecera y el campo de pie.
• 3. Pega en el campo de pie — Inserta la etiqueta de script de AnveVoice en el cuadro de código del pie y deja intactos los fragmentos existentes, encima o debajo de ella.
• 4. Guarda y publica — Haz clic en Save (Guardar) y después publica la app. Las instrucciones de casos de uso de Softr terminan con el recordatorio de no olvidar publicar.

Método 2: código a nivel de página

Page Settings (Ajustes de página) tiene una sección Custom Code (Código personalizado) donde puedes añadir HTML, CSS y JavaScript vanilla a la cabecera o al pie de la página actual únicamente. Úsalo si el agente de voz debe aparecer en una página de precios y en ninguna otra. Los pasos son los mismos: abre la página, abre sus Page Settings, pega la etiqueta en el campo de pie, guarda y publica. No uses el bloque Custom code (Blocks (Bloques) → Static (Estático) → Custom code) para esto. Inserta código en una posición visual del body de la página, está diseñado para widgets incrustados, como un formulario en línea de Calendly, y requiere un plan de pago.

Modo single-page app: el detalle a tener en cuenta

Las directrices de SPA de Softr indican que, en modo SPA, no hay recargas completas de la página. Los scripts del código personalizado de cabecera y pie de la app se ejecutan una vez, en la primera carga, y no se vuelven a ejecutar cuando los visitantes cambian de página. Para AnveVoice eso es bueno: el botón de voz se crea una vez y persiste mientras el visitante navega, en lugar de volver a crearse en cada clic. Las mismas directrices recomiendan mantener el código específico de página fuera del código personalizado a nivel de app. Esa es la razón para evitar copias a nivel de página de la misma etiqueta: con la navegación SPA, un script a nivel de página puede sobrevivir o chocar con otras páginas. Usa una sola entrada a nivel de app.

Comprueba que funciona

• 1. Abre la URL publicada de la app — Usa el subdominio o el dominio propio de tu app en vivo en una ventana privada. La vista previa de Softr es útil, pero verifica en la dirección publicada.
• 2. Navega entre páginas — Pasa por dos o tres páginas. El botón debería mantenerse en su lugar si el modo SPA está activado.
• 3. Prueba el micrófono — Haz clic en el botón, permite el acceso al micrófono y haz una pregunta. Se requiere HTTPS.

Problemas comunes en Softr

• No aparece la opción Custom Code: revisa tu plan. Softr indica que el código personalizado requiere un plan de pago.
• Funciona en la vista previa, pero no en la versión en vivo: la app no se volvió a publicar después de guardar el código.
• Marcado no válido en el head: un hilo de la comunidad de Softr advierte contra poner documentos HTML completos o elementos div en el campo head. La etiqueta de AnveVoice es una etiqueta script y pertenece al pie.
• Solo en páginas con sesión iniciada: si añades la etiqueta a una página restringida por grupo de usuarios, los visitantes que no pueden ver la página nunca cargan el script.
• Dos botones del micrófono: la etiqueta existe a nivel de app y de nuevo en una página. Elimina la copia a nivel de página.

Fuentes

• Docs de Softr: Custom Code Block Overview (resumen del bloque de código personalizado) (https://docs.softr.io/custom-code/custom-code-block-overview) — consultado el 2026-10-14
• Docs de Softr: General Settings (sección Custom Code) (https://docs.softr.io/application-settings/general-settings) — consultado el 2026-10-14
• Docs de Softr: Page Settings (ajustes de página) (https://docs.softr.io/application-settings/page-settings) — consultado el 2026-10-14
• Docs de Softr: SPA Custom Code Guidelines (directrices de código personalizado para SPA) (https://docs.softr.io/custom-code/spa-custom-code-guidelines) — consultado el 2026-10-14
• Docs de Softr: Pricing and Plans (precios y planes) (https://docs.softr.io/workspace-and-billing/pricing-and-plans) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de Bubble
• Cómo agregar AnveVoice a un sitio de Webflow
• Cómo añadir AnveVoice a un sitio de Framer
• Cómo añadir AnveVoice a un sitio web de Duda

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.