​
Prerequisites

  • Node.js 16.0 or later

  • A React-based application (React 18+)

​
Installation

1

Grab an API key from the Pointer dashboard.

Login to the Pointer dashboard, then create a project. Two keys will be automatically generated for you — a production and development key. Copy the development key and store it.

2

Install the Pointer SDK using your preferred package manager.

3

Configure your environment variables.

Add the appropriate Pointer API key into your .env file.

POINTER_API_KEY=pt_dev_*********************

Note that there are two types of API keys: development and production.

  • Development keys (pt_dev_*):

    • For local development only
    • No origin restrictions
    • Stricter rate limits

  • Production keys (pt_live_*):

    • Required for deployed applications
    • Must specify allowed origin domains
    • Domains must be valid (e.g., example.com)

API keys are only shown in full during creation. After that, only the last 4 characters will be visible.

API keys are public on the client-side. Further authentication occurs in the background to verify each user and prevent session hijacking. For more information, read our Security page.

4

Wrap your app with the PointerProvider.

In your root file, (e.g., layout.tsx, index.tsx, _app.tsx) wrap your app with the PointerProvider.

If you want to set up onboarding flows, see the Onboarding section.

import { PointerProvider } from 'pointer-sdk';

function App() {
  return (
      <PointerProvider apiKey={process.env.POINTER_API_KEY!}>
        {children}
      </PointerProvider>
  );
}

For optimal performance, place the PointerProvider as close as possible to its child components.

5

Test the integration.

Once you run your app, Pointer widget should now appear in the bottom-right corner. Head to the Developers page in the dashboard and click “Verify connection” to ensure everything is working correctly.

​
Styling

You have complete control over the styling of the onboarding flow. For more information, see the Styling section.

​
Framework-specific setup

Pointer currently works with any React-based application. Support for Vue, Svelte, and other frontend frameworks is in development.

​
Next.js

If using the app router:

app/layout.tsx
import { PointerProvider } from "pointer-sdk";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <PointerProvider apiKey={process.env.NEXT_PUBLIC_POINTER_API_KEY!}>
          {children}
        </PointerProvider>
      </body>
    </html>
  );
}

If using the pages router:

pages/_app.tsx
import { PointerProvider } from "pointer-sdk";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <PointerProvider apiKey={process.env.NEXT_PUBLIC_POINTER_API_KEY!}>
      <Component {...pageProps} />
    </PointerProvider>
  );
}

​
Remix

app/root.tsx
import { PointerProvider } from "pointer-sdk";

export default function App() {
  return (
    <html>
      <body>
        <PointerProvider apiKey={process.env.POINTER_API_KEY!}>
          <Outlet />
        </PointerProvider>
      </body>
    </html>
  );
}
IntroductionRoadmap