​
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)
  • A Pointer project with your project ID

​
Installation

Perfect for any application regardless of framework (Vue, Angular, Svelte, React, Next.js, etc.).
1

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
2

Add the script

Add this one-liner to your application:
<script src="https://cdn.pointer.ai/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id"></script>
Where to place it:
3

Verify the integration

Reload your application and look for the Pointer widget in the bottom-right corner. 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.
Allowed origins

​
Performance

  • Pointer automatically lazy loads to minimize impact on your app’s initial load time.
  • The script loads asynchronously and won’t block your page rendering.

​
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

​
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. Update your script URL to include the triggerId parameter:
<script src="https://cdn.pointer.ai/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id&triggerId=help-button"></script>
  1. In your app, add a button with the ID matching your trigger ID:
<button id="help-button">Need Help?</button>
The Pointer widget will not be visible by default, but will appear when the button is clicked.

​
Conditional loading

You might want to load Pointer only in production or for specific user segments: 
<!-- Only load in production -->
<script>
  if (window.location.hostname !== 'localhost') {
    const script = document.createElement('script');
    script.src = 'https://cdn.pointer.ai/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id';
    document.body.appendChild(script);
  }
</script>

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