Skip to content

Step 5: SDK Setup

With your API Key in hand, you are ready to integrate the Nveal SDK into your website.

Installation

Choose the method that best fits your project:

The easiest way to get started. Add the Nveal script tag directly to your HTML <head>. This works with any backend — PHP, Spring Boot, Django, Rails, or plain HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Application</title>

    <!-- Nveal SDK -->
    <script src="https://cdn.nveal.com/v1/nveal.js"></script>
    <script>
      Nveal.init({
        apiKey: 'YOUR_API_KEY'
      });
    </script>
</head>
<body>
    <h1>Welcome to My App</h1>
</body>
</html>

For JavaScript/TypeScript projects using a bundler like Vite, Webpack, or Next.js.

1. Install the package:

npm install @nveal/browser

2. Initialize in your app's entry point (e.g., main.ts, _app.tsx, or main.js):

import { nveal } from '@nveal/browser';

await nveal.init({
  apiKey: 'YOUR_API_KEY',
});

Tip

For Next.js, initialize inside a Client Component ('use client') or inside a useEffect hook to ensure it only runs in the browser.

yarn add @nveal/browser

Then initialize the same way as the npm example above.

What happens next?

As soon as Nveal.init() runs, the SDK:

  1. Validates the API Key and Origin Domain.
  2. Takes an initial snapshot of the DOM.
  3. Begins quietly recording subsequent mutations, mouse movements, and clicks in the background.