Configuration

The script attributes and dashboard settings that control Monitoring.

On this page

Monitoring is configured through attributes on the <script> tag and settings on your dashboard.

Script attributes

HTML

<script src="https://accessible.so/a11y/loader.js" data-site-key="acc_rum_YOUR_SITE_KEY" async></script>

Attribute	Default	What it does
`data-site-key`	none — required	The public key that identifies your site. Safe to ship in page source; there's nothing secret about it.
`data-endpoint`	`https://app.accessible.so`	Where the collector requests its config and sends beacons. You don't need to set it.
`data-engine`	the engine version your Accessible app runs, from `https://accessible.so`; a sibling `engine.js` if you host the loader yourself	The URL of the engine bundle downloaded for sampled sessions. Set this explicitly if you self-host and your CDN serves hashed filenames.
`data-sample`	none — uses the sample rate from your dashboard	Overrides the sample rate (0–1) for local development.
`data-disabled`	not present	Presence disables the loader entirely: no request, no storage, no injection.

Next.js adapter options

AccessibleMonitor (App Router) and AccessibleMonitorPages (Pages Router) take the same props:

Prop	Default	What it does
`siteKey`	none — required	The same site key as the script tag.
`endpoint`	`https://app.accessible.so`	Config and beacon origin. You don't need to set it.
`src`	`https://accessible.so/a11y/loader.js`	The loader script's URL. Set it only to host the loader yourself; the engine is then loaded from `engine.js` next to it.

app/layout.tsx

// app/layout.tsx
import { AccessibleMonitor } from '@accessible-so/monitor-next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <AccessibleMonitor siteKey="acc_rum_YOUR_SITE_KEY" />
      </body>
    </html>
  );
}

Component attribution is optional and needs withAccessible in next.config.mjs:

next.config.mjs

// next.config.mjs
import { withAccessible } from '@accessible-so/monitor-next/config';

export default withAccessible({
  // your existing config
});

Pass withAccessible(nextConfig, { componentAttribution: false }) to skip it. Without the plugin, everything else keeps working and a finding's component is simply left unattributed — see Next.js for what the plugin stamps and what it leaves alone.

Astro integration options

accessibleMonitor() in astro.config.mjs takes the same options:

Option	Default	What it does
`siteKey`	none — required	The same site key as the script tag.
`endpoint`	`https://app.accessible.so`	Config and beacon origin. You don't need to set it.
`src`	`https://accessible.so/a11y/loader.js`	The loader script's URL. Set it only to host the loader yourself; the engine is then loaded from `engine.js` next to it.

astro.config.mjs

// astro.config.mjs
import { defineConfig } from 'astro/config';
import accessibleMonitor from '@accessible-so/monitor-astro';

export default defineConfig({
  integrations: [accessibleMonitor({ siteKey: 'acc_rum_YOUR_SITE_KEY' })],
});

Dashboard settings

These are set on your domain's settings page, not in code — the script tag never carries them:

Monitoring enabled — turns monitoring on and off without losing anything else below.
Site key — the value from the install snippet. Use Rotate site key to invalidate it immediately; pages still carrying the old snippet stop reporting until they're updated.
Sample rate — the share of visits that run the collector.
Allowed hosts — one hostname per line. Beacons from any other hostname are ignored.
Kill switch — stops every collector within five minutes without losing your other settings.
Scoring settings (Exposure weights, Minimum observations) — control how barriers are ranked on your dashboard.
Limits — Daily beacon cap, new URLs per day, and new signatures per day. Your plan may cap these lower; the dashboard shows the cap when it does.