Widget Customization

Settings

Widget appearance is configured in your customer panel under each website, and the widget loads your saved configuration - no code changes needed.

Customization requires a Starter plan or above. On Free the widget always renders with the defaults below, and any saved values are ignored.

Shopify stores are the exception: a website billed through Shopify is customized from inside the Shopify app, not from the customer panel. The settings are the same ones, in a different place.

Position

• • Bottom Right (default)
• • Bottom Left
• • Top Right
• • Top Left

Open From Your Own Element

If your design cannot accommodate a floating button, you can use one of your own elements instead — an “Accessibility settings” link in your footer or navigation, styled to match everything around it. Set Open from your own element to that element’s id (without the #).

<a href="#" id="footer-accessibility">Accessibility settings</a>

On every page that contains that element, the floating button is not rendered — your link is the only visible trigger. On any page where the element is missing, the floating button comes back in its configured corner, so the widget is never unreachable. That also means you do not need the element on pages you cannot edit, such as checkout.

The element does not have to exist when the page first loads. A footer rendered by your own JavaScript, or a single-page app that mounts its shell later, works without any extra wiring.

Use a <button> or a <a href> where you can. If your theme gives you something else, Inclusify adds role="button" and tabindex="0" so the trigger is still reachable by keyboard and announced correctly.

One thing worth weighing: a link at the bottom of a long page is significantly harder to find for the visitors who most need it. The floating button is the safer default. Whichever you choose, Ctrl/Cmd + U always opens the widget.

Opening It From Anywhere

Any element carrying the data-inclusify-open attribute opens the widget. Unlike the setting above, this never hides the floating button — use it to add extra entry points rather than to replace it.

<button data-inclusify-open>Accessibility settings</button>

There is also a JavaScript API on window.Inclusify:

window.Inclusify.open();       // open the panel
window.Inclusify.close();      // close it
window.Inclusify.toggle();     // open if closed, close if open
window.Inclusify.isOpen();     // -> true | false

window.Inclusify.hideIcon();   // hide the floating button
window.Inclusify.showIcon();   // show it again
window.Inclusify.toggleIcon();

The widget loads asynchronously, so window.Inclusify may not exist yet when your own scripts run. Wait for the inclusify:ready event, which fires on document once the widget is fully wired up:

document.addEventListener('inclusify:ready', function () {
  // window.Inclusify is ready to use
});

Note that the API is not defined at all when the widget has not rendered — a visitor who chose “don’t show again”, or a mobile visitor on a site with mobile display turned off. Guard your calls, or rely on the event above.

Primary Color

Set a brand color for the trigger button and active states. Any six-digit hex value is accepted. The default is #0066ff.

Trigger Size

• • Small (40px)
• • Medium (48px)
• • Default (56px)
• • Large (64px)
• • Extra Large (72px)
• • Huge (80px)

Trigger Icon

Eight glyphs for the trigger button: Accessibility (default), Universal access, Wheelchair, Eye, Hand, Ear, Glasses and Magnifier.

Show on Mobile

On by default. Switch it off and the widget does not render at all on viewports 768px wide or narrower.

Hide Forever Button

Off by default. When enabled, the panel offers visitors a control that hides the trigger permanently in that browser. Requires a Starter plan or above.

Remove Inclusify Branding

The bottom of the widget panel carries a small Inclusify wordmark that links to our site. On Enterprise you can switch it off. Every other plan shows it.

What it removes is the wordmark and its link, and nothing else. The widget cannot be rebranded with your own logo or name, and the floating button keeps its accessibility icon, which is the symbol visitors look for; its colour, size and glyph are the separate settings above. Your accessibility statement link sits in the same footer row and is unaffected.

A site that moves off Enterprise starts showing the wordmark again at the next widget load. The setting is kept, so it applies again if the plan comes back.

Accessibility Profiles

Choose which of the six preset profiles the panel offers: Seizure Safe Profile, Vision Impaired Profile, ADHD Friendly Profile, Cognitive Disability Profile, Keyboard Navigation (Motor) and Blind Users (Screen Reader). Selecting none shows all of them, which is the default.

How It Works

The widget script automatically fetches your configuration based on your domain:

<script src="https://app.inclusifyapp.com/w/example.com.js" async></script>

When you update settings in the panel, the changes are applied to your widget automatically. There's no need to modify any code on your website.

Available Settings