Recorder Installation

The Reccy recorder captures user sessions including actions and network requests/responses. Recorded network requests may include authorization tokens, so only add trusted users to your Reccy organization.

Create an account at app.reccyai.com/signup. You’ll be prompted to create an organization, link a Git repository, and create a project.

2. Install the Recorder

Script Tag

The script tag method guarantees the recorder initializes before other scripts, ensuring all network responses are captured.

Add the recorder as the first script in your <head> tag:

<head>
  <script
    data-token="<<RECORDING_TOKEN>>"
    src="https://app.reccyai.com/v1/reccy.js">
  </script>

  <!-- Your other scripts below -->
  <script src="main_app.js"></script>
</head>

Framework-Specific Setup

Add to your root layout.tsx:

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {process.env.NODE_ENV !== 'production' && (
          <script
            data-token={process.env.RECCY_TOKEN}
            src="https://app.reccyai.com/v1/reccy.js"
          />
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}

Add to your _document.tsx:

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        {process.env.NODE_ENV !== 'production' && (
          <script
            data-token={process.env.RECCY_TOKEN}
            src="https://app.reccyai.com/v1/reccy.js"
          />
        )}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Modify your index.html:

<!DOCTYPE html>
<html>
  <head>
    <script id="reccy"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Then update your Vite config to inject the script:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import type { PluginOption } from 'vite'

const injectReccyRecordingScript: PluginOption = {
  name: "html-transform",
  transformIndexHtml(html) {
    return html.replace(
      /<script\s+id="reccy"[\s\S]\*?<\/script>/,
      `<script
                src="http://localhost:5173/v1/reccy.js"
                data-recording-token="00ced0711f9d2f6fc7fcf39ef92b197b449c84473cd357e78e5bb73b4537506f"
              ></script>`,
    );
  },
};

export default defineConfig(({ mode }) => {

return {
    plugins: [react(), mode !== "production" && injectReccyRecordingScript],
  };
})

3. Validate Installation

After adding the snippet:

Open your app (locally or in the target environment)
Click around to record a session
Check your Reccy dashboard under Sessions

When sessions appear, installation is complete!

Troubleshooting

No Sessions Appearing

Common causes:

Script not loading first — Ensure no other scripts precede the Reccy snippet
CSP blocking — Add Reccy domains to your Content Security Policy
Wrong recording token — Verify the token matches your project

CSP Configuration

If you have a Content Security Policy, add these exceptions:

script-src: https://app.reccyai.com
connect-src: https://app.reccyai.com

Next Steps

Once sessions are being recorded, set up tests in CI.