'use client' // Add this line for Next.js only

import { VeltProvider } from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="YOUR_API_KEY">
      <YourRootComponent/>
    </VeltProvider>
  );
}
1

Install React package

npm:
npm install @veltdev/react
yarn:
$ yarn add @veltdev/react
2

Install types (optional)

If you’re using TypeScript, you can install the types package.
npm install --save-dev @veltdev/types
3

Grab your Velt API Key

Go to console.velt.dev and grab your Velt API Key
4

Safelist your domain

In the Velt console, add the URL where your app is deployed to the list of Managed Domains.
5

Add the VeltProvider

Add the VeltProvider component to the root of your app.Add your Velt API key.
import { VeltProvider } from '@veltdev/react';

<VeltProvider apiKey="YOUR_API_KEY">
  <YourRootComponent/>
</VeltProvider>
6

(Next.js only) Add 'use client' to your root component

'use client'

import { VeltProvider } from '@veltdev/react';

<VeltProvider apiKey="YOUR_API_KEY">
  <YourRootComponent/>
</VeltProvider>


'use client' // Add this line for Next.js only

import { VeltProvider } from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="YOUR_API_KEY">
      <YourRootComponent/>
    </VeltProvider>
  );
}