​
Prerequisites

  • For React: Node.js 16.0 or later and a React-based application (React 18+)
  • For JavaScript: Any website or web application

​
Installation

1

Grab the project ID from the Pointer dashboard.

Login to the Pointer dashboard, then create a project. Your project ID will be automatically generated for you. Copy this ID and store it.

The Setup section of your project settings in the dashboard will have code snippets with your project ID already filled in for easy copying.

2

Install the Pointer SDK using your preferred package manager.

npm install pointer-sdk
3

Wrap your app with the PointerProvider.

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

import { PointerProvider } from 'pointer-sdk';

function App() {
  return (
    <PointerProvider projectId="pt_proj_********-****-****-************">
      <YourApp />
    </PointerProvider>
  );
}

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

4

Verify that Pointer is working.

Once you run your app, the Pointer widget should appear in the bottom-right corner. Go to the Setup section in your project settings on the dashboard and click “Check connection” to ensure everything is working correctly.

5

Go to the Playground to customize your widget.

Head to the Playground in the Pointer dashboard to customize your widget’s appearance, content, and behavior.

​
Allowed Origins

For security reasons, you should specify which domains are allowed to use your project ID. Go to your project settings in the Pointer dashboard, find the General tab, and add your domains to the Allowed Origins section. This prevents unauthorized websites from using your project ID.

​
Styling and Customization

All styling and customization is now done through the Playground in the Pointer dashboard. This visual editor provides a more user-friendly interface for customizing your widget’s appearance, content, and behavior.

​
Framework-specific setup for React

​
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 projectId="pt_proj_********-****-****-************">
          {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 projectId="pt_proj_********-****-****-************">
      <Component {...pageProps} />
    </PointerProvider>
  );
}

​
Remix

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

export default function App() {
  return (
    <html>
      <body>
        <PointerProvider projectId="pt_proj_********-****-****-************">
          <Outlet />
        </PointerProvider>
      </body>
    </html>
  );
}