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.).
Get your project ID
Login to the Pointer dashboard
Create a new project or select an existing one
Copy your project ID from the setup section
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 >
);
}
Framework-specific setup
import { PointerProvider } from "pointer-sdk" ;
export default function RootLayout ({
children ,
} : {
children : React . ReactNode ;
}) {
return (
< html >
< body >
< PointerProvider projectId = "pt_proj_your-project-id" >
{ children }
</ PointerProvider >
</ body >
</ html >
);
}
import { PointerProvider } from "pointer-sdk" ;
import type { AppProps } from "next/app" ;
export default function App ({ Component , pageProps } : AppProps ) {
return (
< PointerProvider projectId = "pt_proj_your-project-id" >
< Component { ... pageProps } />
</ PointerProvider >
);
}
import { PointerProvider } from "pointer-sdk" ;
export default function App () {
return (
< html >
< body >
< PointerProvider projectId = "pt_proj_your-project-id" >
< Outlet />
</ PointerProvider >
</ body >
</ html >
);
}
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import { PointerProvider } from 'pointer-sdk' ;
import App from './App' ;
ReactDOM . createRoot ( document . getElementById ( 'root' ) ! ). render (
< React . StrictMode >
< PointerProvider projectId = "pt_proj_your-project-id" >
< App />
</ PointerProvider >
</ React . StrictMode >
);
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 .
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.
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:
On the playground page , toggle “Set custom trigger” to true and set the trigger ID.
In your code, set the triggerId
in the PointerProvider
component.
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.
"use client" ;
import { useRouter } from "next/navigation" ;
import { PointerProvider } from "pointer-sdk" ;
export default function Layout ({ children } : { children : React . ReactNode }) {
const router = useRouter ();
return (
< PointerProvider
projectId = "pt_proj_your-project-id"
router = { router }
>
{ children }
</ PointerProvider >
);
}
import { useRouter } from "next/router" ;
import { PointerProvider } from "pointer-sdk" ;
export default function App ({ Component , pageProps }) {
const router = useRouter ();
return (
< PointerProvider
projectId = "pt_proj_your-project-id"
router = { router }
>
< Component { ... pageProps } />
</ PointerProvider >
);
}
import { useNavigate } from "react-router-dom" ;
import { PointerProvider } from "pointer-sdk" ;
function App () {
const navigate = useNavigate ();
return (
< PointerProvider
projectId = "pt_proj_your-project-id"
router = {{ push : navigate }}
>
< YourApp />
</ PointerProvider >
);
}
Next steps
After successfully integrating Pointer into your product:
Add knowledge sources
Upload your product documentation, help articles, and other relevant content in the knowledge section to train your AI assistant.
Customize the experience
Use the playground to customize your widget’s appearance, behavior, and responses to match your brand and user needs.
Set up analytics
Monitor how users interact with your AI assistant in the analytics dashboard to identify common questions and improve your knowledge base.
Configure team access
Invite team members and set up appropriate permissions in your team settings to collaborate on your AI assistant.