How to Open the Inclusif Widget from Your Own Button

By default, the Inclusif widget displays a floating accessibility button on your website. However, you can hide this default button and open the widget from your own custom button or link instead. This gives you full control over the design and placement of the accessibility access point.

Overview

This guide covers two features that work together:

hidden: true — Hides the default Inclusif floating button
data-inclusif-trigger — Opens the widget when your custom element is clicked

Step 1: Hide the Default Button

In your Inclusif dashboard, go to Widget and enable the “Hide widget button” option. This will hide the default floating button while keeping the widget fully loaded and ready to open.

Alternatively, if you prefer to configure it directly in code, you can set hidden: true in the Inclusif("init", ...) call. Note that the configuration in the script takes priority.

Step 2: Add `data-inclusif-trigger` to Your Button

Add the data-inclusif-trigger attribute to any HTML element on your page. The widget will automatically detect it and open when that element is clicked.

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

That’s all you need. No additional JavaScript is required.

Full Example

<!-- Your website navigation -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>

  <!-- Your custom accessibility button -->
  <button type="button" data-inclusif-trigger>
    Accessibility
  </button>
</nav>

<!-- Inclusif widget script (place before </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: "YOUR_API_KEY" });
</script>

Works with Any HTML Element

The data-inclusif-trigger attribute is not limited to buttons. You can use it on any element:

<!-- Button -->
<button data-inclusif-trigger>Accessibility</button>

<!-- Link -->
<a href="#" data-inclusif-trigger>Accessibility Settings</a>

<!-- Image -->
<img src="my-accessibility-icon.png" data-inclusif-trigger alt="Open accessibility menu" />

<!-- Any element -->
<div data-inclusif-trigger>Open accessibility options</div>

Works with Dynamic Content

If your website adds elements to the page dynamically (for example using React, Vue, or any JavaScript framework), the widget will automatically detect new elements with data-inclusif-trigger as they appear. No additional configuration is required.

You Can Use Multiple Triggers

You can add data-inclusif-trigger to as many elements as you want. For example, one in the header navigation and another in the footer:

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

<!-- ... your page content ... -->

<footer>
  <button data-inclusif-trigger>Accessibility Settings</button>
</footer>

FAQ

Can I keep the default Inclusif button and also use `data-inclusif-trigger`?

Yes. If you do not enable the “Hide widget button” option, both the default floating button and your custom trigger elements will work at the same time.

Do I need to add JavaScript for `data-inclusif-trigger` to work?

No. As long as the Inclusif widget script is installed on your page, any element with data-inclusif-trigger will automatically open the widget when clicked.

Does it work on mobile devices?

Yes. The trigger works on both desktop and mobile devices.