Install once. Configure everything.

Install

Add these lines before the closing </body> tag, or through your tag manager. Your siteId is registered the moment you check out, and your install kit shows the exact embed for each of your sites.

<link rel="stylesheet" href="https://cdn.nirvani.dev/access/v1/nirvani-access.css">
<script src="https://cdn.nirvani.dev/access/v1/nirvani-access.js" defer></script>
<script>
  window.addEventListener("DOMContentLoaded", function () {
    if (window.NirvaniAccess) window.NirvaniAccess.init({
      siteId: "acme-corp",
      brandName: "Acme Corp",
      brandTheme: "mint",
      position: "bottom-left",
      statementUrl: "/accessibility",
      privacyUrl: "/privacy"
    });
  });
</script>

• Always guard the call. if (window.NirvaniAccess) means a blocked or unreachable CDN never throws on your page.
• Use defer. The widget never blocks rendering and mounts after your content.
• One siteId per site. Visitor preferences are stored per site under nirvani_access_v1_{siteId}.
• Single-page apps. Call init once. If your app swaps the whole <body> (Turbo, pjax), call init again after each swap and the widget remounts cleanly.

Configuration

Pass any of these fields to init. Unknown or malformed values are dropped and the default applies.

Identity and placement

Links and contact

Tool groups

Security, privacy and operations

Brand themes

Set brandTheme to the id closest to your brand. accentColor and headerBgColor still override the solid colors; the gradient follows the theme. Any color you set is darkened or lightened as needed so the text and controls drawn on it keep at least 4.5:1 contrast (7:1 for header text), in light and dark mode.

Quick profiles

Seven one-tap profiles bundle the right settings. Each has a keyboard shortcut while the panel is open.

Visitors open and close the panel with Alt+A by default.

JavaScript API

The bundle registers one global, window.NirvaniAccess. Every method below is verified on each release in a real browser context before it ships.

yourBanner.onAccept(function () {
  if (window.NirvaniAccess) window.NirvaniAccess.grantConsent();
});
yourBanner.onReject(function () {
  if (window.NirvaniAccess) window.NirvaniAccess.revokeConsent();
});

Strict CSP and SRI

Allow the Nirvani CDN and API in your policy:

script-src 'self' https://cdn.nirvani.dev;
style-src  'self' https://cdn.nirvani.dev 'nonce-{per-request}';
connect-src 'self' https://access-api.nirvani.dev;

Three injection modes

• cspMode: "auto" (default) injects inline styles, stamped with styleNonce when you pass one.
• cspMode: "nonce" requires styleNonce and fails closed without it. Generate the nonce per request on your server.
• cspMode: "hash" writes all dynamic CSS into one style element. Read window.NirvaniAccess.getStyleHashes() and add each 'sha384-...' value to style-src.

Subresource integrity

The Nirvani Snippet Generator outputs integrity="sha384-..." and crossorigin="anonymous" attributes for the current bundle, so your security team can pin the exact file. A pinned hash locks that exact release: when Nirvani ships an update, refresh the hash from your install kit. Until you do, the browser declines the newer file and the guarded call keeps your page untouched. Unpinned installs update automatically.

Consent mode

With requireConsent: true, the widget works fully but keeps settings in memory only. Nothing is read from or written to storage, including usage counts, until the visitor accepts the inline prompt or you call grantConsent(). Healthcare and government presets turn this on by default.

Cloud voices and AI

Out of the box, the AI Read-Aloud Narrator uses the browser's built-in voices and the AI Accessibility Assistant runs on the visitor's device. To use studio-quality voices or a larger AI model, point the widget at endpoints you control:

window.NirvaniAccess.init({
  siteId: "acme-corp",
  brandName: "Acme Corp",
  cloudTts: { provider: "proxy", endpoint: "https://api.acme.com/tts", apiKey: "", defaultLocale: "en-US" },
  cloudAi: { endpoint: "https://api.acme.com/assistant" }
});

Health reporting

Once a day, each install sends Nirvani an aggregate summary: counts, the widget version and basic configuration details. It never includes visitor settings, page content, audio or personal data, and it respects requireConsent. This feeds your AI Site Monitor. Set enableHealthReporting: false to opt out.

Debugging

Add ?nirvani-debug=1 to any page URL, or pass diagnostic: true, to log the resolved configuration and detected environment to the browser console. It is silent in production otherwise.

Versions and updates

The /access/v1/ path always serves the current release of version 1. Improvements reach every site on the next page load with no redeploy. Each release must pass a real-browser check before it ships, and the live bundle, stylesheet, language packs and API are checked every hour.