Integración

Integrar el widget de accesibilidad en HubSpot CMS.

Cárgalo en todas las páginas de HubSpot de un dominio mediante el HTML del pie de página del sitio. Las ayudas de lectura complementan tu trabajo por una web accesible.

Guía revisada el

Lo que necesitas

Contenido alojado en HubSpot en un dominio conectado y el permiso para la configuración del sitio web. Según HubSpot, las opciones de edición del HTML del pie de página dependen de la suscripción y del tipo de contenido. 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 cuenta de HubSpot, haz clic en el icono de configuración (rueda dentada) y abre la configuración de contenido para las páginas en la barra lateral izquierda.
  2. Elige en el desplegable el dominio de tu web. La configuración predeterminada para todos los dominios se aplica a todo el contenido alojado en HubSpot.
  3. En la sección del HTML del pie de página del sitio, haz clic en la opción para anular la configuración predeterminada si editas un solo dominio. Pega el código de inserción sin cambios una sola vez y guarda.
  4. Abre páginas web, landing pages y entradas del blog del dominio en una ventana privada. El widget aparece exactamente una vez.

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

Tras anularla, el código de la configuración predeterminada deja de aplicarse a este dominio. Si hace falta, copia los fragmentos que ya hubiera allí. El HTML del pie de página para todos los dominios también aparece en las cotizaciones. Las plantillas propias deben generar {{ standard_footer_includes }} justo antes de la etiqueta de cierre body. Las páginas fuera de HubSpot necesitan su propia inserción.

Preguntas frecuentes sobre HubSpot CMS

¿Bloquea el banner de cookies de HubSpot el widget?

No de forma automática. HubSpot explica que no puede controlar las cookies de scripts de terceros. El widget no instala cookies y guarda los ajustes de lectura localmente en el navegador. Si solo debe cargarse tras el consentimiento lo decides tú, según tu evaluación de privacidad.

¿Qué pasa con el contenido multilingüe?

Las plantillas de arrastrar y soltar definen automáticamente el idioma de la página. Las plantillas programadas necesitan <html lang="{{ html_lang }}" {{ html_lang_dir }}>. Con data-language="auto", el widget sigue entonces el idioma de la página.

Tengo varios dominios en HubSpot.

El HTML del pie de página se define para todos los dominios o por dominio. Si cada dominio tiene su propio proyecto de Accessonaut, anula la configuración predeterminada en cada dominio y pega allí el código de inserción correspondiente. En ese caso, no lo incluyas en la configuración predeterminada para todos los dominios.

¿Aparece el widget también en las cotizaciones?

Sí, si el código está en la configuración predeterminada para todos los dominios o en la configuración del dominio de cotizaciones. HubSpot genera este HTML del pie de página también en las cotizaciones. Si no lo quieres, añade el código solo para los dominios de tu web.

¿Cómo vuelvo a quitar el widget?

Borra el código de inserción del HTML del pie de página del sitio y guarda. Revisa la configuración predeterminada y todos los dominios con la configuración anulada.

Si algo no funciona

En una plantilla propia falta el widget.

Causa: La plantilla no genera {{ standard_footer_includes }}. HubSpot cuenta esta variable entre las variables de plantilla obligatorias.

Solución: Añádela justo antes de la etiqueta de cierre body.

Tras anular la configuración faltan otros fragmentos.

Causa: En un dominio con la configuración anulada deja de aplicarse el código de la configuración predeterminada.

Solución: Copia los fragmentos necesarios en la configuración del dominio.

En otro dominio, el widget muestra el diseño estándar con el aviso de Accessonaut.

Causa: La configuración del proyecto solo se aplica al dominio registrado en el proyecto de Accessonaut.

Solución: Crea un proyecto aparte para cada dominio y pega su código de inserción en la configuración de ese dominio.

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

HubSpot: Usar fragmentos de código en el contenido de HubSpot

Conocimiento práctico para tus próximos pasos

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