Lo que necesitas
Acceso al código fuente y al layout común o punto de entrada HTML de tu aplicación. 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
- En el App Router de Next.js, abre el layout raíz común. Importa
Scriptdesdenext/script. - Usa
next/scriptcon la dirección pública de widget.js,data-project-idystrategy="afterInteractive". Los atributos de datos corresponden a tu código de inserción. - Coloca la integración una sola vez en el layout común. En React sin Next.js puedes copiar el código de inserción normal en el documento HTML.
- Compila y publica la aplicación. Comprueba las cargas completas de página y la navegación en el cliente en busca de botones duplicados o ajustes perdidos.
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.
import Script from 'next/script';
<Script
src="https://accessonaut.com/widget.js"
data-project-id="TU_ID_DE_PROYECTO"
data-language="es"
strategy="afterInteractive"
/>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
Usa como origen del script el dominio público del servicio de Accessonaut. No pases al navegador claves de API ni variables de entorno con secretos. Las reglas CSP deben permitir el script y la solicitud de configuración.
Preguntas frecuentes sobre Next.js / React
¿Se vuelve a cargar el widget con la navegación en el cliente?
No. Según Next.js, un <Script> en el layout raíz se carga una sola vez, aunque los visitantes cambien de ruta. El widget permanece en el body y las ayudas de lectura activas siguen aplicándose. El widget fija su idioma al iniciarse. Los visitantes pueden cambiarlo en el panel.
¿Dónde lo integro en el Pages Router?
En pages/_app.js o pages/_app.tsx. Next.js recomienda ahí next/script para los scripts que deben cargarse en todas las rutas. También ahí el script se carga una sola vez.
¿Qué debe permitir mi Content Security Policy?
La dirección de tu servicio en script-src y connect-src, porque el widget obtiene su configuración con fetch. Si usas nonces como en la guía de CSP de Next.js, pasa el nonce al <Script> con la prop nonce. El widget inserta sus estilos como elementos style y no admite un nonce para ellos. Por eso, style-src debe permitir 'unsafe-inline'. Si allí figura un nonce, el navegador ignora 'unsafe-inline'.
¿Y con React sin Next.js, por ejemplo con Vite?
En Vite, el index.html de la carpeta del proyecto es el punto de entrada de la aplicación. Pega allí el código de inserción normal una sola vez, antes de la etiqueta de cierre body. No lo añadas además en un componente.
Si algo no funciona
En el servidor de desarrollo, el widget muestra el diseño estándar con el aviso de Accessonaut.
Causa: En localhost o en un dominio de vista previa, el widget no carga la configuración de tu proyecto. Solo se aplica al dominio del proyecto.
Solución: Revisa el diseño y las funciones del plan en el dominio de producción.
La consola del navegador muestra una infracción de CSP.
Causa: La política bloquea el script, la solicitud de configuración o los estilos del widget.
Solución: Lee la directiva indicada y añade la dirección del servicio en script-src o connect-src. Para style-src, consulta la respuesta anterior.
Quieres quitar el widget.
Causa: El script está en el layout común.
Solución: Borra el <Script> del layout, compila y publica. Elimina también las excepciones de CSP que añadiste solo para el widget.
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.