​
What you’ll get

When you integrate Pointer into your product, your users will have access to:

  • AI copilot: an intelligent assistant that can help users navigate your app, understand features, and complete tasks
  • Answer engine: instant answers to user questions based on your product documentation and knowledge base

​
Prerequisites

  • A web application (any framework or vanilla JavaScript)
  • Node.js 16.0+ (for React/npm-based projects)
  • A Pointer project with your project ID

​
Installation

Perfect for React and React-based frameworks (e.g. Next.js, Remix, Vite, etc.).

1

Install the Pointer SDK

npm install pointer-sdk
2

Get your project ID

  1. Login to the Pointer dashboard
  2. Create a new project or select an existing one
  3. Copy your project ID from the setup section
3

Add the PointerProvider

Wrap your application with the PointerProvider component. Place it as high as possible in your component tree.

import { PointerProvider } from 'pointer-sdk';

function App() {
  return (
    <PointerProvider 
      projectId="pt_proj_your-project-id"
      triggerId="custom-help-button"
    >
      <YourApp />
    </PointerProvider>
  );
}
4

Framework-specific setup

5

Verify the integration

Start your development server and look for the Pointer widget in the bottom-right corner of your application. You can test the connection in your project settings.

6

Add router (only when using command menu view)

If you want to enable Pointer’s command menu you must pass your router to the PointerProvider. View more below.

​
Best practices

​
Allowed origins

Always configure allowed origins in your project settings to prevent unauthorized use of your project ID.

Allowed origins

​
Performance

  • Pointer automatically lazy loads to minimize impact on your app’s initial load time.
  • Place the PointerProvider as close as possible to the components that need it, but high enough to cover your entire app.

​
User experience

  • Pointer works best when it has context about your app. Consider adding knowledge sources to help the AI understand your product.
  • Use the playground to customize the widget’s appearance to match your brand.

​
Advanced configuration

​
Conditional loading

You might want to load Pointer only in production or for specific user segments:

function App() {
  const shouldLoadPointer = process.env.NODE_ENV === 'production';
  
  if (shouldLoadPointer) {
    return (
      <PointerProvider projectId="pt_proj_your-project-id">
        <YourApp />
      </PointerProvider>
    );
  }
  
  return <YourApp />;
}

​
Custom triggers

If you want the Pointer widget to appear on a specific button, follow these steps:

  1. On the playground page, toggle “Set custom trigger” to true and set the trigger ID.
Custom trigger
  1. In your code, set the triggerId in the PointerProvider component.
  2. In your app, add a button with the ID of the trigger ID.
import { PointerProvider } from 'pointer-sdk';

// In your root file
function App() {
  return (
    <PointerProvider 
      projectId="pt_proj_your-project-id"
      triggerId="help-button"
    >
      <YourApp />
    </PointerProvider>
  );
}
// In your app
function HelpButton() {
  return (
    <button id="help-button">
      Need Help?
    </button>
  );
}

The Pointer widget will not be visible by default, but will appear when the button is clicked.

​
Router setup for command menu

If you want to use Pointer’s command menu view to allow users to navigate through your application, you need to pass a router instance to enable smooth navigation.

​
Next steps

After successfully integrating Pointer into your product:

1

Add knowledge sources

Upload your product documentation, help articles, and other relevant content in the knowledge section to train your AI assistant.

2

Customize the experience

Use the playground to customize your widget’s appearance, behavior, and responses to match your brand and user needs.

3

Set up analytics

Monitor how users interact with your AI assistant in the analytics dashboard to identify common questions and improve your knowledge base.

4

Configure team access

Invite team members and set up appropriate permissions in your team settings to collaborate on your AI assistant.