accessify-widget

The public Accessify-Widget package for script-tag installs and npm-based integrations.

Included Feature Set

The public widget focuses on the adjustments that are most useful in day-to-day usage:

• contrast with light, dark, and high
• text-size
• keyboard-nav
• focus-highlight
• link-highlight
• reading-guide
• reading-mask
• animation-stop
• hide-images
• big-cursor
• page-structure
• tts
• text-simplify
• alt-text
• auto-scan

The widget UI ships with a built-in language selector for the top 20 world languages.

CDN Install

For Framer, Webflow, Shopify theme code, and plain HTML, use the public widget bundle:

<script
  src="https://cdn.jsdelivr.net/npm/accessify-widget@latest/dist/widget.js"
  data-accessify
  data-position="bottom-right"
  data-theme="auto"
  defer
></script>

Supported data attributes:

• data-position
• data-theme
• data-lang
• data-features
• data-openrouter-key
• data-site-key
• data-proxy-url
• data-compact
• data-z-index

If this URL returns 404, wait a minute for CDN propagation, then confirm the package was published to npm.

Framer

1. Open Site Settings > General > Custom Code.
2. Paste the snippet above into End of </body> tag.
3. Publish your site.

You do not need to clone this repo or run a local build just to use the widget in Framer.

npm Usage

npm install accessify-widget

import { init } from 'accessify-widget';

init({
  position: 'bottom-right',
  theme: 'auto',
  lang: 'en',
  features: ['contrast', 'text-size', 'focus-highlight'],
});

Managed Mode

If you are using a dashboard-issued site key, the all-in-one bundle can also auto-configure proxy-backed AI features:

<script
  src="https://cdn.jsdelivr.net/npm/accessify-widget@latest/dist/widget.js"
  data-site-key="sk_site_your_key"
  defer
></script>

Recommended flow:

1. Open https://accessify-dashboard.pages.dev
2. Register your site domain
3. Add an AI provider key in the dashboard
4. Paste the generated data-site-key snippet into your site

In this mode, the browser only sees the public site key. The provider key stays behind the Accessify proxy on Cloudflare Workers.

There is currently no separate AI translation feature. text-simplify and alt-text are the supported AI flows today.

Direct AI Mode

For local testing or short-lived demos, you can also pass an OpenRouter key directly:

<script
  src="https://cdn.jsdelivr.net/npm/accessify-widget@latest/dist/widget.js"
  data-accessify
  data-openrouter-key="sk-or-your-key"
  defer
></script>

This is less secure because the key is visible in the frontend source.

Guides

• Quick Start
• Framer
• Custom HTML
• Webflow
• Shopify

Source Layout

• Widget source: packages/core/src
• Dashboard source: apps/dashboard/index.html
• API proxy source: packages/api/src