Lo que necesitas
Acceso a un layout global o a un campo para scripts propios. La web pública debe permitir JavaScript. 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 en tu CMS la plantilla común del pie de página o de la página y guarda una copia del estado actual.
- Copia el código de inserción completo de tu proyecto de Accessonaut.
- Pégalo una vez antes de la etiqueta de cierre body y publica el cambio.
- Vacía las cachés y abre varias subpáginas públicas en una ventana privada. Revisa también una vista móvil estrecha.
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
Guarda tus cambios en un tema hijo o en una extensión prevista para ello, para que se conserven con las actualizaciones. Una cabecera Content Security Policy puede bloquear scripts y conexiones externas; permite de forma específica el origen de tu servicio.
Preguntas frecuentes sobre HTML / CMS propio
¿El script va en el head o antes de la etiqueta de cierre body?
Ambas opciones funcionan. Con defer, el navegador ejecuta el script cuando termina de analizar la página, antes del evento DOMContentLoaded. Por eso, copia el código de inserción sin cambios, con defer.
¿Qué pasa con varios dominios o subdominios?
El widget solo carga la configuración de tu proyecto en el dominio registrado en él. El prefijo www da igual, pero shop.example.com cuenta como dominio propio. Crea un proyecto aparte para él. El navegador guarda los ajustes de lectura por dominio; no pasan de un dominio a otro.
¿Qué debe permitir mi Content Security Policy?
La dirección de tu servicio en script-src para widget.js y en connect-src para la solicitud de configuración. Además, el widget inserta elementos style y no admite un nonce para ellos. Por eso, style-src debe permitir 'unsafe-inline'. Prueba los cambios primero con la cabecera Content-Security-Policy-Report-Only.
¿Puedo probar en un entorno de pruebas?
Sí, el widget aparece allí. Pero sin un dominio coincidente muestra el diseño estándar y el aviso de Accessonaut. La detección de la instalación en el panel también reacciona solo al dominio del proyecto.
Si algo no funciona
No aparece ningún botón.
Causa: El script no se carga: dirección incorrecta, una errata en el código, una regla de CSP o un bloqueador.
Solución: Abre la consola del navegador y la pestaña Red. Comprueba si widget.js se carga con el estado 200 y lee los mensajes de error de CSP.
El botón aparece, pero con el diseño estándar y el aviso de Accessonaut a pesar de tener un plan de pago.
Causa: No se ha cargado la configuración. Normalmente, el dominio no coincide con el proyecto o el ID del proyecto es incorrecto.
Solución: Compara el dominio y data-project-id con tu proyecto. En la pestaña Red, la solicitud a /api/widget/config debe completarse correctamente.
Quieres quitar el widget.
Causa: El script está en la plantilla común.
Solución: Borra el código de inserción, publica y vacía las cachés. Los ajustes de lectura guardados permanecen en el navegador de tus visitantes, pero sin el widget ya no tienen efecto.
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.