Developer Docs

Build accessibility
into your platform.

One script tag, a config object, and you're live. Full REST API, webhooks, and framework components for teams who want programmatic control.

Quickstart API Reference

// 3-line install
<script
  src="https://cdn.clovitek.com/cloviable/clovi-able.min.js"
  async
></script>
<script>
  window.CloviAble = {
    plan:     "pro",
    position: "right",
    color:    "#0d9488",
    language: "en"
  };
</script>

// Done. Widget is live.
        

CDN Embed Quickstart

Up and running in 60 seconds.

Paste these three lines before the closing </body> tag. The widget loads asynchronously — zero impact on page performance.

<!-- Step 1: Load the CloviAble script (async, non-blocking) -->
<script
  src="https://cdn.clovitek.com/cloviable/clovi-able.min.js"
  async
></script>

<!-- Step 2: Configure before the script loads -->
<script>
  window.CloviAble = {
    plan:      "free",       // "free" | "pro" | "agency"
    position:  "right",      // "left" | "right"
    language:  "en"          // ISO 639-1 code
  };
</script>

<!-- Step 3: Reload your page. Done. -->
    

Async loading

Zero impact on your Core Web Vitals or LCP score

CSP compatible

Works with strict Content-Security-Policy headers

CDN-delivered

Served from cdn.clovitek.com — global edge nodes

Config Object Reference

window.CloviAble options

All properties on the window.CloviAble config object. Set these before the script tag loads, or update them at runtime.

Property	Type	Default	Description	Plan
plan	string	"free"	Your plan tier. Controls which features are available. Values: `"free"`, `"pro"`, `"agency"`.	All
position	string	"right"	FAB button position on screen. Values: `"left"`, `"right"`.	All
color	string	"#0d9488"	Primary brand color for the FAB and panel header. Any valid CSS color hex.	Pro+
language	string	"en"	Widget UI language. ISO 639-1 code. Supported: en, es, fr, de, pt, ar, zh.	All
reportUrl	string	null	URL or `mailto:` address for the "Report an Issue" link. Leave null to hide the link.	All
brand	string	"CloviAble"	White-label brand name shown in the widget panel header.	Agency+
brandUrl	string	null	URL for the brand link in the panel footer. Set to your agency or client site.	Agency+
profiles	string[]	all	Array of profile keys to show. Options: motor, blind, colorblind, dyslexia, lowvision, cognitive, seizure, adhd.	All
internal	boolean	false	Set true for intranet or internal tools. Disables usage telemetry and rate-limit checks.	Pro+

REST API — Phase 2

Programmatic scan access.

The REST API lets you trigger scans, retrieve reports, and integrate accessibility data into your CI/CD pipeline or dashboard. Available on Enterprise tier.

Phase 2 — Join the early access list below

Method	Endpoint	Description	Auth
GET	/api/v1/scan?url=	Trigger a new WCAG scan for the given URL. Returns a scan ID immediately; results available via the report endpoint.	Bearer
GET	/api/v1/report/:id	Retrieve a completed scan report by ID. Returns score, issues array, passed checks, and metadata.	Bearer
POST	/api/v1/scan	Schedule a scan with advanced options (rules subset, viewport size, authentication headers for protected pages).	Bearer
GET	/api/v1/scans	List all scans for your account. Paginated. Filter by domain, date range, or status.	Bearer
DELETE	/api/v1/report/:id	Delete a scan report and its associated data from your account permanently.	Bearer

Example response — GET /api/v1/report/:id

{
  "id":       "scan_a3f9c2d1",
  "url":      "https://example.com",
  "score":    74,
  "scanned_at": "2026-06-11T09:14:22Z",
  "issues": [
    {
      "id":        "image-alt",
      "severity": "critical",
      "wcag":     "1.1.1",
      "selector": "img[src='/hero.jpg']",
      "count":    14
    }
  ],
  "passed": 58,
  "total_rules": 72
}
    

Webhook Integration

Push scan results to your endpoint.

Register a webhook URL and CloviAble will POST the full scan report JSON to your endpoint whenever a scheduled or on-demand scan completes. Use it to trigger Slack alerts, update your dashboard, or open Jira tickets automatically.

Scan complete events

Fired when any scan — manual or scheduled — finishes processing.

Regression alerts

Fired when a new critical or serious issue appears compared to the previous scan.

Score milestones

Fired when a site reaches 90+, 95+, or 100 accessibility score thresholds.

Platform Integrations

Embed anywhere.

WordPress Plugin

Coming Soon

One-click install from the WordPress plugin directory. Automatic embed in site header, admin dashboard with scan history and issue reports.

Shopify App

Coming Soon

Native Shopify app with theme integration. Scans your storefront, tracks product page accessibility, and generates compliance reports per locale.

Code Examples

Framework integrations.

Copy-paste examples for the three most common setups.

<!-- index.html — paste before </body> -->
<script>
  window.CloviAble = {
    plan:      "pro",
    position:  "right",
    color:    "#0d9488",
    language:  "en",
    reportUrl: "mailto:a11y@example.com",
    profiles:  ["motor", "blind", "dyslexia", "cognitive"]
  };
</script>
<script
  src="https://cdn.clovitek.com/cloviable/clovi-able.min.js"
  async
></script>
      

// src/components/CloviAbleLoader.tsx
import { useEffect } from 'react';

interface CloviAbleConfig {
  plan:      string;
  position:  string;
  color?:    string;
  language?: string;
  reportUrl?: string;
  profiles?:  string[];
}

export default function CloviAbleLoader({ config }: { config: CloviAbleConfig }) {
  useEffect(() => {
    (window as any).CloviAble = config;
    const script = document.createElement('script');
    script.src   = 'https://cdn.clovitek.com/cloviable/clovi-able.min.js';
    script.async = true;
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, []);
  return null;
}

// Usage in App.tsx or _app.tsx
<CloviAbleLoader config={{
  plan: 'pro', position: 'right',
  color: '#0d9488', language: 'en'
}} />
      

// plugins/cloviable.client.ts  (Nuxt 3 / Vue 3)
export default defineNuxtPlugin(() => {
  if (process.client) {
    (window as any).CloviAble = {
      plan:     'pro',
      position: 'right',
      color:    '#0d9488',
      language: 'en'
    };
    const script    = document.createElement('script');
    script.src   = 'https://cdn.clovitek.com/cloviable/clovi-able.min.js';
    script.async = true;
    document.head.appendChild(script);
  }
});

// nuxt.config.ts — register the plugin
export default defineNuxtConfig({
  plugins: ['~/plugins/cloviable.client']
});
      

Build accessibility into your platform.