DocAccessible
Checking account
Documentation
All documentation

Website monitoring

Install the website script on a custom-built site

Add the generated tag to static HTML, shared server templates, React or Vite entry HTML, or a Next.js root layout without breaking verification.

For
Frontend developers, platform engineers, and web agencies
Typical time
15-30 minutes plus deployment
Copy your website script

Before you start

  • Repository and deployment access for the public website
  • Knowledge of the shared layout or HTML entry point
  • The exact generated installation code for the connected production host

Procedure

Step by step

  1. Find the shared server-rendered entry point

    Locate the HTML file, root layout, base template, or theme that produces every public page. Verification must see the tag in the returned HTML source.

  2. Copy the exact generated tag

    Use the Installation tab for the connected domain. Do not hard-code a key copied from development, staging, or another tenant.

  3. Add the tag once near the end of body

    Place a native script element in the shared layout immediately before the closing body tag. Do not use a framework helper that inserts the final tag only after hydration.

  4. Update Content Security Policy

    Allow the exact DocAccessible origin in script-src, connect-src, and img-src when the site uses a restrictive policy. Preserve all existing directives.

  5. Deploy and inspect production source

    Deploy through the normal pipeline, open a public production page, and verify the key in View page source rather than only in the hydrated DOM.

  6. Trigger and confirm verification

    Reload that public page once, return to Installation, and confirm the script is connected. Add this source check to future layout and domain migrations.

Static HTML and server templates

For a static site, place the generated tag in the shared HTML shell. For Django, Rails, Laravel, ASP.NET, Java, PHP, or another server framework, place it in the base layout used by anonymous public pages.

Shared HTML or base-template placement
<main>
  <!-- Public page content -->
</main>
<script async src="https://docaccessible.com/site/v1.js" data-site-key="YOUR_SITE_KEY"></script>
</body>

Next.js App Router

Add a native asynchronous script element to the root app/layout.tsx so the exact tag appears in the server response for every route. Do not use next/script with afterInteractive or lazyOnload for this installation because those strategies create the final script after hydration and the verification fetch does not execute application JavaScript.

app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script
          async
          src="https://docaccessible.com/site/v1.js"
          data-site-key="YOUR_SITE_KEY"
        ></script>
      </body>
    </html>
  );
}

React, Vite, and other single-page applications

Put the generated tag in the built application's index.html, not inside useEffect or a route component. The script observes dynamically inserted PDF links, while keeping the tag in entry HTML allows the verification fetch to prove installation.

index.html
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script async src="https://docaccessible.com/site/v1.js" data-site-key="YOUR_SITE_KEY"></script>
</body>

Development, staging, and production

Treat each public host as a separate installation boundary. Use the production website's generated key only on its connected host, and do not expose a production key in preview deployments that use unrelated domains.

  • Keep the script URL and key in deployment configuration when environments differ.
  • Render the complete tag on the server rather than constructing it after hydration.
  • Verify redirects do not move the reporting page to a different host.
  • Recheck source after changing the root layout, CDN, reverse proxy, or primary domain.

Official framework reference

For Next.js, the root layout is the shared application boundary that defines the document body for every route.

Related guides