​
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.

​
Best practices

​
Allowed origins

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

​
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.
  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.

​
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.