Lo que necesitas
Un plan de Webflow y permisos de edición con acceso al código personalizado. En Accessonaut, crea primero un proyecto con el dominio real de tu web y abre en el proyecto la página de instalación.
Paso a paso
- Abre Site settings → Custom code.
- Pega el código de inserción en el campo global Footer code. El código de los ajustes de una sola página solo se aplica a esa página.
- Guarda y publica la web en el dominio registrado en tu proyecto de Accessonaut.
- Prueba la web publicada. Que el Designer o la vista previa funcionen no confirma todavía la inserción pública.
Así es la inserción
Usa el código listo de tu proyecto. El ejemplo necesita tu ID de proyecto real y la dirección del servicio accesible públicamente.
<script src="https://accessonaut.com/widget.js"
data-project-id="TU_ID_DE_PROYECTO"
data-language="es" defer></script>Adapta el diseño a tu web
En tu proyecto de Accessonaut, abre «Widget de ayudas de lectura». Cinco plantillas y una vista previa en directo te ayudan con el diseño: colores, tipografías, ancho del menú, esquinas, sombras, icono o botón de apertura con texto y textos propios. La posición y los márgenes se ajustan por separado para escritorio y smartphone. Al guardar, tu código de inserción actual adopta automáticamente el diseño del proyecto; la configuración pública se guarda en caché hasta un minuto.
En el plugin de WordPress puedes elegir ajustes locales en su lugar. Estos tienen prioridad sobre el diseño del proyecto. El diseño está disponible en todos los planes. En el plan Free, el aviso de Accessonaut sigue visible. Los ajustes de lectura personales de tus visitantes tienen prioridad sobre las indicaciones de diseño.
Ten en cuenta
Revisa de nuevo el código global tras cambios en el plan del sitio, cambios de dominio y publicaciones. El widget no reestructura el contenido integrado en marcos de terceros.
Preguntas frecuentes sobre Webflow
¿El código se ejecuta en el Designer o solo en la web publicada?
Según Webflow, el código personalizado tiene efecto en los modos de vista previa y de comentarios, pero no en la vista de lienzo ampliada (expand canvas view). Solo se activa en la web tras publicarla. Si quieres mantener el widget fuera de la vista previa, enciérralo entre <!-- EXCLUDE FROM PREVIEW: START --> y <!-- EXCLUDE FROM PREVIEW: END -->.
¿Qué plan necesito?
Los roles Site manager y Designer pueden añadir código personalizado si tu Workspace es Core, Growth, Agency o Freelancer, o si la web tiene un Site plan activo. El campo Footer code admite hasta 50.000 caracteres; el código de inserción solo necesita una mínima parte.
¿Qué muestra el widget en el subdominio webflow.io?
Puedes publicar solo en el subdominio de pruebas. El widget aparece allí, pero no carga la configuración de tu proyecto, porque ese dominio no figura en el proyecto. Verás entonces el diseño estándar y el aviso de Accessonaut. Prueba el diseño definitivo en tu propio dominio.
¿Funciona con Webflow Localization?
Webflow define automáticamente el código de idioma de la página para cada locale. Con data-language="auto", el widget sigue ese atributo lang, siempre que no elijas un idioma fijo en el diseño del proyecto. Habla alemán, inglés y español.
Si algo no funciona
El widget no aparece después de guardar.
Causa: Guardaste el código pero no publicaste, o solo publicaste en el subdominio de pruebas.
Solución: Vuelve a publicar e incluye también tu propio dominio.
El widget falta solo en algunas páginas.
Causa: El código está en el campo Before </body> tag de los ajustes de una página en lugar de en Site settings. Entonces solo se aplica a esa página.
Solución: Muévelo a Site settings → Custom code → Footer code y borra la entrada de la página, para que no se cargue un script duplicado.
Quieres quitar el widget.
Causa: El Footer code global sigue activo hasta que vuelvas a publicar la web.
Solución: Borra el código de inserción del Footer code, guarda y publica en todos los dominios.
Comprueba la instalación
- Abre la web pública en una ventana privada. El widget se muestra exactamente una vez.
- Llega al botón con el teclado. Abre el panel, cambia el tamaño del texto y vuelve a cerrarlo.
- Revisa la página de inicio, una subpágina, un formulario y la vista móvil. El widget no debe tapar ningún control importante.
- En la pestaña Red, comprueba que widget.js y la configuración del proyecto se cargan desde la dirección de tu servicio. Si hay errores, revisa el dominio, el ID del proyecto y la CSP.
- En los proyectos Free, el aviso visible de Accessonaut sigue formando parte del widget. Los permisos dependen de tu proyecto.
Privacidad y límites
Al cargarse, el navegador del visitante obtiene el script y la configuración del proyecto del servicio de Accessonaut. Con ello se tratan la dirección IP, los datos de la solicitud del navegador y el nombre de host de la web. Las preferencias de visualización se guardan localmente en el navegador. Ten en cuenta la integración en tu política de privacidad y revisa tu configuración concreta.
Las ayudas de lectura no garantizan la conformidad. Revisa además las barreras en el código fuente y los recorridos completos de los usuarios, de forma automática y manual.