Integración

Integrar el widget de accesibilidad en Framer.

Carga el código de inserción como Custom Code al final de la etiqueta body de todas las páginas. Las ayudas de lectura complementan tu trabajo por una web accesible.

Guía revisada el

Lo que necesitas

Permisos de edición en los Project Settings de tu proyecto de Framer. Comprueba si tu plan de Framer incluye Custom Code. 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

  1. En tu proyecto de Framer, abre los Project Settings y, dentro, la sección Custom Code.
  2. Elige Add Script o el símbolo más y dale a la entrada un nombre claro, por ejemplo Accessonaut.
  3. Pega el código de inserción sin cambios y elige como posición el final de la etiqueta body. No limites las páginas, para que el script se cargue en todas.
  4. Elige la ejecución única (Once) para que los cambios de página no vuelvan a ejecutar el script. Después publica la web.
  5. Prueba el dominio publicado. Framer no carga el Custom Code en la vista previa del lienzo. Revisa los cambios de página en busca de botones duplicados.

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

Las guías antiguas sitúan esta sección en Site Settings; los nombres pueden cambiar con la interfaz de Framer. El Custom Code de los Page Settings solo se aplica a esa página. El widget no adapta el contenido integrado en marcos de terceros.

Preguntas frecuentes sobre Framer

¿Once o Run on every page visit?

Con Once, Framer ejecuta el código una sola vez. Con Run on every page visit, se vuelve a ejecutar en cada visita de página. Elige Once. Si el script se vuelve a ejecutar, el widget no crea una segunda instancia cuando ya está en la página. Pero se descarga de nuevo sin necesidad.

¿Funciona el widget en la versión de staging?

Según Framer, el staging solo está disponible con un dominio propio conectado y a partir del plan Pro. En la dirección framer.app y en cualquier dominio distinto del registrado en el proyecto, el widget no carga la configuración de tu proyecto. Muestra entonces el diseño estándar con el aviso de Accessonaut.

¿Funciona con Framer Localization?

Framer cambia automáticamente el atributo lang al locale elegido. Con data-language="auto", el widget sigue este atributo al cargarse. Habla alemán, inglés y español.

¿Puedo cargar el widget solo en algunas páginas?

Sí. El Custom Code de los Page Settings solo se aplica a esa página. Pero quien necesita una ayuda de lectura suele necesitarla en todas las páginas. Por eso, es mejor cargar el widget en toda la web. En ese caso, no añadas otra entrada a nivel de página, o el script se cargará dos veces.

¿Cómo vuelvo a quitar el widget?

Borra la entrada en los Project Settings, en Custom Code, y vuelve a publicar la web. Después revisa el dominio publicado.

Si algo no funciona

En el lienzo falta el widget.

Causa: Framer no carga el Custom Code en la vista previa del lienzo.

Solución: Revisa el widget en la web publicada.

El widget falta en algunas páginas.

Causa: La entrada está limitada a ciertas páginas, o está en los Page Settings de una sola página.

Solución: Crea la entrada en los Project Settings para todas las páginas y borra las entradas a nivel de página.

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.

Documentación oficial de la plataforma

Framer: Cómo añadir código personalizado

Conocimiento práctico para tus próximos pasos

Todos los artículos de la sección de conocimiento