Skip to main content

Open the widget from a custom button

You can hide the default Inclusif floating button and open the accessibility panel from a button that matches your website's design.

1. Hide the floating button​

JavaScript installation​

Add hidden: true to the initialization options:

Inclusif('init', {
  apiKey: 'YOUR_API_KEY',
  hidden: true
});

Keep this initialization inside the complete loader snippet from the JavaScript installation guide.

WordPress installation​

The WordPress plugin does not have a setting for hiding the floating button. Configure it from the Inclusif dashboard instead:

  1. Open Domains in the Inclusif dashboard.
  2. Select the domain where WordPress is installed.
  3. Open its Widget page.
  4. Enable Hide Floating Button.
  5. Save the configuration.

Dashboard configuration changes can take up to five minutes to appear on your website.

2. Add your button​

Add data-inclusif-trigger to a native HTML button:

<button type="button" data-inclusif-trigger>
  Accessibility settings
</button>

The button can exist before the widget loads or be added dynamically later. Style it with your website's existing classes or CSS.

For WordPress pages, add the markup with a Custom HTML block. For a site-wide header or navigation, add the same attribute through your theme or page builder. Use a Custom HTML block if the editor removes custom attributes from regular button blocks.

Button behavior​

  • The custom button opens the accessibility panel.
  • It does not close or toggle the panel.
  • Users close the panel with the widget's own close control.
  • The widget prevents the trigger's default click action, so do not add the attribute to a navigation link or form submit button.
  • Always give the button a clear accessible name and keep type="button" when it appears inside a form.
note

If a user has active accessibility tools, the floating button may remain visible even when it is configured as hidden. This preserves access to the active controls.

Verify the custom button​

  1. Open a public page after the widget configuration has updated.
  2. Confirm that the default floating button is hidden.
  3. Select your custom button and confirm that the accessibility panel opens.
  4. Confirm that the panel's own close control closes it.