Cómo abrir el widget de Inclusif desde tu propio botón

Por defecto, el widget de Inclusif muestra un botón flotante de accesibilidad en tu sitio web. Sin embargo, puedes ocultar este botón predeterminado y abrir el widget desde tu propio botón o enlace personalizado. Esto te da control total sobre el diseño y la ubicación del punto de acceso a la accesibilidad.

Resumen

Esta guía cubre dos funcionalidades que trabajan juntas:

hidden: true — Oculta el botón flotante predeterminado de Inclusif
data-inclusif-trigger — Abre el widget cuando se hace clic en tu elemento personalizado

Paso 1: Ocultar el botón predeterminado

En tu panel de Inclusif, ve a Widget y activa la opción "Ocultar botón del widget". Esto ocultará el botón flotante predeterminado mientras mantiene el widget completamente cargado y listo para abrirse.

Alternativamente, si prefieres configurarlo directamente en el código, puedes establecer hidden: true en la llamada Inclusif("init", ...). Ten en cuenta que la configuración en el script tiene prioridad.

Paso 2: Añadir `data-inclusif-trigger` a tu botón

Añade el atributo data-inclusif-trigger a cualquier elemento HTML de tu página. El widget lo detectará automáticamente y se abrirá cuando se haga clic en ese elemento.

<button data-inclusif-trigger>Accesibilidad</button>

Eso es todo lo que necesitas. No se requiere JavaScript adicional.

Ejemplo completo

<!-- La navegación de tu sitio web -->
<nav>
  <a href="/">Inicio</a>
  <a href="/nosotros">Nosotros</a>
  <a href="/contacto">Contacto</a>

  <!-- Tu botón de accesibilidad personalizado -->
  <button type="button" data-inclusif-trigger>
    Accesibilidad
  </button>
</nav>

<!-- Script del widget de Inclusif (colocar antes de </body>) -->
<script>
  !(function (e, n, i, t, s, c, u) {
    (e[t] =
      e[t] ||
      function () {
        (e[t].q = e[t].q || []).push(arguments);
      }),
      (c = n.createElement(i)),
      (u = n.getElementsByTagName(i)[0]),
      (c.src = "https://plugin.inclusif.life/widget.js"),
      (c.async = 1),
      u.parentNode.insertBefore(c, u);
  })(window, document, "script", "Inclusif"),
    Inclusif("init", { apiKey: "TU_API_KEY" });
</script>

Funciona con cualquier elemento HTML

El atributo data-inclusif-trigger no está limitado a botones. Puedes usarlo en cualquier elemento:

<!-- Botón -->
<button data-inclusif-trigger>Accesibilidad</button>

<!-- Enlace -->
<a href="#" data-inclusif-trigger>Configuración de accesibilidad</a>

<!-- Imagen -->
<img src="mi-icono-accesibilidad.png" data-inclusif-trigger alt="Abrir menú de accesibilidad" />

<!-- Cualquier elemento -->
<div data-inclusif-trigger>Abrir opciones de accesibilidad</div>

Funciona con contenido dinámico

Si tu sitio web añade elementos a la página de forma dinámica (por ejemplo, usando React, Vue o cualquier framework de JavaScript), el widget detectará automáticamente los nuevos elementos con data-inclusif-trigger a medida que aparezcan, sin necesidad de configuración adicional.

Puedes usar múltiples disparadores

Puedes añadir data-inclusif-trigger a tantos elementos como quieras. Por ejemplo, uno en la navegación del encabezado y otro en el pie de página:

<header>
  <button data-inclusif-trigger>Accesibilidad</button>
</header>

<!-- ... el contenido de tu página ... -->

<footer>
  <button data-inclusif-trigger>Configuración de accesibilidad</button>
</footer>

Preguntas frecuentes

¿Puedo mantener el botón predeterminado de Inclusif y también usar `data-inclusif-trigger`?

Sí. Si no activas la opción "Ocultar botón del widget", tanto el botón flotante predeterminado como tus elementos disparadores personalizados funcionarán al mismo tiempo.

¿Necesito añadir JavaScript para que `data-inclusif-trigger` funcione?

No. Mientras el script del widget de Inclusif esté instalado en tu página, cualquier elemento con data-inclusif-trigger abrirá automáticamente el widget al hacer clic.

¿Funciona en dispositivos móviles?

Sí. El disparador funciona tanto en escritorio como en dispositivos móviles.

Cómo abrir el widget de Inclusif desde tu propio botón