Customise

Design it before you sign up

Every setting here is a real dashboard setting. Change anything, watch the preview follow, then take the snippet and the configuration with you.

Appearance

Button position

Size

Shape

Horizontal offset

Vertical offset

Accent and icon colour

#5B4BFF

#FFFFFF

5.39:1 passes the 3:1 non-text contrast minimum of WCAG 1.4.11.

Panel theme

Adjustments

14 / 14

Switch one off and it disappears from the panel entirely — no greyed-out control.

Live preview

Tiles are clickable

yourwebsite.example

Accessibility

Display options

Your snippet

Create an account and the placeholder is replaced by your real site key. Nothing else changes.

index.html

<script
  src="https://siteaccessible.com/w/YOUR_SITE_KEY.js"
  defer
  crossorigin="anonymous"
></script>

Configuration as JSON

Handy if you are briefing a developer, or want to reproduce this exact setup on several sites.

widget.config.json

{
  "position": "bottom-right",
  "offset": {
    "x": 24,
    "y": 24
  },
  "size": "md",
  "shape": "circle",
  "accentColor": "#5B4BFF",
  "iconColor": "#FFFFFF",
  "theme": "auto",
  "defaultLocale": "fr",
  "locales": [
    "en",
    "fr"
  ],
  "features": [
    "contrast",
    "text-size",
    "text-align",
    "line-height",
    "text-spacing",
    "blue-light",
    "reading-mask",
    "reading-guide",
    "large-cursor",
    "slow-cursor",
    "link-highlight",
    "highlight-titles",
    "dyslexia",
    "hide-images"
  ],
  "showBranding": true,
  "draggable": true,
  "rememberState": true,
  "hideOnMobile": false,
  "openOnLoad": false,
  "keyboardShortcut": "alt+a"
}

Take this design live

Start the 7-day trial and your first site is created with exactly these settings.

Start your free trial Read the configuration docs