Install with JavaScript

Add the Inclusif production loader to your website when you can edit its HTML or shared application layout.

Add the installation code

Add this code once to the shared layout used by every page where the widget should be available:

<!-- Inclusif accessibility widget -->
<script>
  !(function (w, d, s, n, src, js, first) {
    w[n] =
      w[n] ||
      function () {
        (w[n].q = w[n].q || []).push(arguments);
      };
    js = d.createElement(s);
    first = d.getElementsByTagName(s)[0];
    js.async = true;
    js.src = src;
    first.parentNode.insertBefore(js, first);
  })(
    window,
    document,
    'script',
    'Inclusif',
    'https://plugin.inclusif.life/widget.js'
  );

  Inclusif('init', {
    apiKey: 'YOUR_API_KEY'
  });
</script>

Replace YOUR_API_KEY with the API key shown on your domain's Widget page in the Inclusif dashboard.

:::warning Keep initialization in this order

Call Inclusif('init', ...) immediately after creating the queue, as shown above. Do not move initialization into a script load or onload handler.

:::

Configure the widget

The dashboard configuration is used when an option is omitted. You can override common options in the initialization call:

Inclusif('init', {
  apiKey: 'YOUR_API_KEY',
  language: 'en',
  position: 'bottom-right',
  showSupport: true,
  debug: false
});

Option	Values	Purpose
apiKey	String	Required key used to authorize the widget for the current domain.
language	en, es, fr, it, pt	Language used by the widget interface.
position	top-left, top-right, center-left, center-right, bottom-left, bottom-right	Initial position of the floating button.
showSupport	true or false	Shows or hides the support link.
debug	true or false	Writes diagnostic messages to the browser console. Keep this disabled in normal use.
hidden	true or false	Hides the default floating button so the widget can be opened from a custom button.

Verify the installation

1. Publish the updated website.
2. Open the website on an authorized domain.
3. Confirm that the Inclusif floating button appears.
4. Select the button and confirm that the accessibility panel opens.

If the widget does not appear, confirm that the API key is correct, the current hostname is authorized, and https://plugin.inclusif.life/widget.js loads successfully in the browser network panel.

To hide the floating button, continue with the custom button guide.