Docs

What you’ll get

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

Answer engine: instant answers to user questions based on your documentation content and knowledge base

Prerequisites

A documentation website (any framework: Mintlify, GitBook, Docusaurus, VitePress, etc.)
Access to edit your site’s HTML or add custom scripts
A Pointer project with your project ID

Installation

Perfect for any documentation site where you can add custom HTML/JavaScript.

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 script tag

Add the Pointer script to your documentation site. The exact location depends on your platform:

<script src="https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id"></script>

Platform-specific setup

GitBook

Go to your GitBook space settings
Navigate to “Integrations” → “Custom Scripts”
Add the script in the “Head” section:

<script src="https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id"></script>

Docusaurus

Add the script to your docusaurus.config.js file:

docusaurus.config.js
module.exports = {
  // ... other config
  scripts: [
    {
      src: 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id',
      async: true,
    },
  ],
};

VitePress

Add the script to your .vitepress/config.js file:

.vitepress/config.js
export default {
  head: [
    [
      'script',
      {
        src: 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id',
        async: true
      }
    ]
  ]
}

Nextra

Add the script to your next.config.js file:

next.config.js
const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx',
})

module.exports = withNextra({
  // ... other config
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
        ],
      },
    ]
  },
  // Add script via Head component in _app.tsx instead
})

Then in your pages/_app.tsx:

pages/_app.tsx
import Head from 'next/head'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <script 
          src="https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id"
          async
        />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

ReadMe

This integration requires a ReadMe Business plan or higher, as it relies on custom HTML.

Navigate to Appearance in your project settings
Open the Custom Include Tags tab
Add the script to the HEAD HTML section:

<script
  src="https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id"
  async
></script>

Press Save to apply your changes

Fumadocs

Create a pointer-widget.tsx client component in your Fumadocs project:

pointer-widget.tsx
"use client";

import { useEffect } from "react";

export function PointerWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id';
    script.async = true;
    document.head.appendChild(script);
  }, []);

  return null;
}

Then import it in the <body /> of your root layout.tsx file:

layout.tsx
import { PointerWidget } from "@/app/pointer-widget";
import { RootProvider } from "fumadocs-ui/provider";
import "fumadocs-ui/style.css";
import { Inter } from "next/font/google";
import type { ReactNode } from "react";

const inter = Inter({
  subsets: ["latin"],
});

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={inter.className} suppressHydrationWarning>
      <body>
        <PointerWidget />
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

VuePress

Navigate to the .vuepress directory
Add the script to your config.js file:

config.js
export default {
  head: [
    [
      "script",
      {
        src: "https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id",
        async: true,
        defer: true,
      },
    ],
  ],
};

Verify the integration

Reload your documentation site and look for the Pointer widget in the bottom-right corner. You can test the connection in your project settings.

Perfect for any documentation site where you can add custom HTML/JavaScript.

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 script tag

Add the Pointer script to your documentation site. The exact location depends on your platform:

<script src="https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id"></script>

Platform-specific setup

GitBook

Go to your GitBook space settings
Navigate to “Integrations” → “Custom Scripts”
Add the script in the “Head” section:

<script src="https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id"></script>

Docusaurus

Add the script to your docusaurus.config.js file:

docusaurus.config.js
module.exports = {
  // ... other config
  scripts: [
    {
      src: 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id',
      async: true,
    },
  ],
};

VitePress

Add the script to your .vitepress/config.js file:

.vitepress/config.js
export default {
  head: [
    [
      'script',
      {
        src: 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id',
        async: true
      }
    ]
  ]
}

Nextra

Add the script to your next.config.js file:

next.config.js
const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx',
})

module.exports = withNextra({
  // ... other config
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
        ],
      },
    ]
  },
  // Add script via Head component in _app.tsx instead
})

Then in your pages/_app.tsx:

pages/_app.tsx
import Head from 'next/head'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <script 
          src="https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id"
          async
        />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

ReadMe

This integration requires a ReadMe Business plan or higher, as it relies on custom HTML.

Navigate to Appearance in your project settings
Open the Custom Include Tags tab
Add the script to the HEAD HTML section:

<script
  src="https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id"
  async
></script>

Press Save to apply your changes

Fumadocs

Create a pointer-widget.tsx client component in your Fumadocs project:

pointer-widget.tsx
"use client";

import { useEffect } from "react";

export function PointerWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id';
    script.async = true;
    document.head.appendChild(script);
  }, []);

  return null;
}

Then import it in the <body /> of your root layout.tsx file:

layout.tsx
import { PointerWidget } from "@/app/pointer-widget";
import { RootProvider } from "fumadocs-ui/provider";
import "fumadocs-ui/style.css";
import { Inter } from "next/font/google";
import type { ReactNode } from "react";

const inter = Inter({
  subsets: ["latin"],
});

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={inter.className} suppressHydrationWarning>
      <body>
        <PointerWidget />
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

VuePress

Navigate to the .vuepress directory
Add the script to your config.js file:

config.js
export default {
  head: [
    [
      "script",
      {
        src: "https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id",
        async: true,
        defer: true,
      },
    ],
  ],
};

Verify the integration

Reload your documentation site and look for the Pointer widget in the bottom-right corner. You can test the connection in your project settings.

For better organization and caching, you can create a separate JavaScript file.

Create pointer.js file

Create a new file called pointer.js in your documentation site’s static assets folder:

pointer.js
// Load Pointer SDK
(function() {
  const script = document.createElement('script');
  script.src = 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id';
  script.async = true;
  document.head.appendChild(script);
})();

Reference the file

Add a reference to your pointer.js file in your documentation site:

<script src="/pointer.js"></script>

Or for specific platforms:

Mintlify

Docusaurus

Fern

Open the docs.yml file used to configure Fern
Add the script to the js section:

docs.yml
js:
  - path: ./pointer.js
    strategy: lazyOnload

Create a pointer.js file at the root of your documentation repo with the content from Step 1 above.

Verify the integration

Deploy your changes and verify the Pointer widget appears on your documentation site.

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 documentation site’s load time
Consider loading the script asynchronously to avoid blocking page rendering
The widget only loads when needed, keeping your docs fast

Content optimization

Pointer works best when it has access to your documentation content
Add your documentation as a knowledge source to improve answer quality
Consider adding FAQ content and troubleshooting guides to your knowledge base

Advanced configuration

Custom triggers

If you want the Pointer widget to appear on a specific button instead of the default floating widget:

On the playground page, toggle “Set custom trigger” to true and set the trigger ID.

Create your custom trigger button in your documentation:

<button id="help-button" style="
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
">
  Ask AI Assistant
</button>

Update your script to include the trigger ID:

pointer.js
(function() {
  const script = document.createElement('script');
  script.src = 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id&triggerId=help-button';
  script.async = true;
  document.head.appendChild(script);
})();

Conditional loading

Load Pointer only on specific pages or for certain users:

// Only load on documentation pages
if (window.location.pathname.startsWith('/docs/')) {
  const script = document.createElement('script');
  script.src = 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id';
  script.async = true;
  document.head.appendChild(script);
}

Environment-specific loading

pointer.js
// Only load in production
if (window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
  const script = document.createElement('script');
  script.src = 'https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=pt_proj_your-project-id';
  script.async = true;
  document.head.appendChild(script);
}

Next steps

After successfully integrating Pointer into your documentation:

Add knowledge sources

Upload your documentation content, FAQ, and troubleshooting guides in the knowledge section to train your AI assistant.

Customize the experience

Use the playground to customize your widget’s appearance and responses to match your documentation style.

Monitor usage

Track how users interact with your AI assistant in the analytics dashboard to identify knowledge gaps.

Optimize content

Based on user questions, continuously improve your documentation and knowledge base to provide better answers.

Overview

Add to your:

Core AI features

Knowledge

Analytics

Customization

FAQs

What you’ll get

Prerequisites

Installation

Best practices

Allowed origins

Performance

Content optimization

Advanced configuration

Custom triggers

Conditional loading

Environment-specific loading

Next steps

Overview

Add to your:

Core AI features

Knowledge

Analytics

Customization

FAQs

​What you’ll get

​Prerequisites

​Installation

​Best practices

​Allowed origins

​Performance

​Content optimization

​Advanced configuration

​Custom triggers

​Conditional loading

​Environment-specific loading

​Next steps

What you’ll get

Prerequisites

Installation

Best practices

Allowed origins

Performance

Content optimization

Advanced configuration

Custom triggers

Conditional loading

Environment-specific loading

Next steps