## Citation system
### Inline citation markers
Answers include numbered citation markers (e.g., \[1], \[2], \[3]) that link directly to the sources used to generate the answer. These markers appear throughout the response text wherever specific information is referenced.
### Hover details
When users hover over citation markers, they see detailed information about the source, including the source title and direct quote from the section that was used to generate the answer.
### Source listings
At the bottom of every answer, users can view:
* **Complete source list** with clickable links
* **Public knowledge base** sources only (internal sources remain private)
* **Direct access** to referenced documentation
### Following guide steps
Each guide step includes:
* **Visual cursor**: A second cursor that moves to highlight the relevant element
* **Step instructions**: Clear, contextual guidance for the current action
* **Progress controls**:
* **Auto-detection**: Pointer automatically detects when users complete actions
* **Manual navigation**: Right arrow button to advance manually
* **Exit option**: X icon to close the guide at any time
### Security restrictions
Outside of local development environments, Pointer automatically blocks requests from domains that are not explicitly allowed. This security measure prevents:
* **Unauthorized usage**: Stops other websites from using your Pointer widget
* **Data protection**: Ensures your knowledge base and analytics remain secure
* **Resource control**: Prevents unexpected credit consumption from unauthorized domains
## Adding domains
### Domain format
When adding domains to your allowed list, include:
* **Production domains**: Your live website URLs (e.g., `yourdomain.com`)
* **Development domains**: Staging or testing environments (e.g., `staging.yourdomain.com`)
Choose between two distinct presentation styles:
* **Classic chat widget**: Traditional chat bubble design with standard positioning in the bottom corner
* **Command menu**: Modern, keyboard-driven interface with navigation categories and streamlined design
### Available colors
* **Primary color**: Main brand color for buttons and key elements
* **Secondary color**: Supporting text and secondary elements
* **Tertiary color**: Background elements and subtle accents
* **Accent color**: Special emphasis and highlights
* **Interactive color**: Buttons, links, and clickable elements
* **Background color**: Main widget background
* **Border color**: Dividers and structural elements
### Setup process
1. **Light mode logo**: Upload your primary logo (works on light backgrounds)
2. **Dark mode logo**: Upload a light-colored variant (works on dark backgrounds)
3. **Test visibility**: Use the theme toggle to verify both logos display correctly
4. **Auto-fallback**: If no dark variant is provided, the light logo is used
**Supported formats**: .png, .jpeg (max 2MB)
## Featured image theming
Featured content blocks support theme-specific images for optimal contrast in both modes.
### Configuration
1. **Standard images**: Upload your default featured item images
2. **Dark variants**: Optionally add theme-specific images for dark mode
3. **Preview testing**: Toggle themes to verify image visibility and contrast
4. **Fallback behavior**: Light mode images are used if dark variants aren't provided
### 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](https://app.pointer.so/knowledge) 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:
1. On the [playground page](https://app.pointer.so/playground), toggle "Set custom trigger" to true and set the trigger ID.
2. Create your custom trigger button in your documentation:
```html
```
3. Update your script to include the trigger ID:
```javascript 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:
```javascript
// 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
```javascript 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:
### Performance
* Pointer automatically lazy loads to minimize impact on your help center's load time
* Consider loading the script asynchronously to avoid blocking page rendering
* The widget only loads when needed, keeping your help center fast
### Content optimization
* Pointer works best when it has access to your support documentation
* Add your help center articles as a [knowledge source](https://app.pointer.so/knowledge) to improve answer quality
* Include FAQ content, troubleshooting guides, and common solutions in your knowledge base
### User experience
* Position the widget where users naturally look for help
* Consider the widget as a complement to your existing search functionality
* Monitor common questions to identify content gaps in your help center
## Advanced configuration
### Custom triggers
If you want the Pointer widget to appear on a specific button instead of the default floating widget:
1. On the [playground page](https://app.pointer.so/playground), toggle "Set custom trigger" to true and set the trigger ID.
2. Create your custom trigger button in your help center:
```html
```
3. Update your script to include the trigger ID:
```javascript 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=ai-help-button';
script.async = true;
document.head.appendChild(script);
})();
```
### Conditional loading
Load Pointer only on specific help center sections:
```javascript
// Only load on article pages
if (window.location.pathname.includes('/articles/') || window.location.pathname.includes('/hc/')) {
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);
}
```
### Integration with existing support tools
```javascript
// Load Pointer but hide if other support tools are active
(function() {
// Check if other support widgets are present
const hasIntercom = window.Intercom !== undefined;
const hasZendesk = window.zE !== undefined;
if (!hasIntercom && !hasZendesk) {
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 help center:
### 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](https://app.pointer.so/knowledge) to help the AI understand your product.
* Use the [playground](https://app.pointer.so/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:
```typescript
function App() {
const shouldLoadPointer = process.env.NODE_ENV === 'production';
if (shouldLoadPointer) {
return (
2. In your code, set the `triggerId` in the `PointerProvider` component.
3. In your app, add a button with the ID of the trigger ID.
```typescript
import { PointerProvider } from 'pointer-sdk';
// In your root file
function App() {
return (
### Performance
* Pointer automatically lazy loads to minimize impact on your website's load time
* Consider loading the script asynchronously to avoid blocking page rendering
* The widget only loads when needed, keeping your site fast
### Content optimization
* Pointer works best when it has access to your company knowledge
* Add your website content, FAQs, and product information as [knowledge sources](https://app.pointer.so/knowledge)
* Include pricing information, feature descriptions, and common sales questions
### User experience
* Position the widget where visitors naturally look for help
* Consider the customer journey and where AI assistance would be most valuable
* Monitor conversations to identify common questions and improve your content
### Conversion optimization
* Use Pointer to qualify leads and route them to appropriate sales channels
* Provide instant answers to common pre-purchase questions
* Track which questions lead to conversions in your analytics
## Advanced configuration
### Custom triggers
If you want the Pointer widget to appear on a specific button instead of the default floating widget:
1. On the [playground page](https://app.pointer.so/playground), toggle "Set custom trigger" to true and set the trigger ID.
2. Create your custom trigger button on your website:
```html
```
3. Update your script to include the trigger ID:
```javascript 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=ask-ai-button';
script.async = true;
document.head.appendChild(script);
})();
```
### Conditional loading
Load Pointer only on specific pages or for certain visitors:
```javascript
// Only load on product and pricing pages
if (window.location.pathname.includes('/products/') ||
window.location.pathname.includes('/pricing')) {
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);
}
```
### A/B testing integration
```javascript
// Load different configurations based on A/B test variants
(function() {
const isVariantB = Math.random() < 0.5; // Your A/B testing logic
const projectId = isVariantB ? 'pt_proj_variant-b-id' : 'pt_proj_variant-a-id';
const script = document.createElement('script');
script.src = `https://cdn.pointer.so/pointer-sdk@latest/pointer.browser.js?projectId=${projectId}`;
script.async = true;
document.head.appendChild(script);
})();
```
### Lead tracking integration
```javascript
// Example integration with marketing analytics
(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;
// Track when Pointer loads for analytics
script.onload = function() {
if (typeof gtag !== 'undefined') {
gtag('event', 'pointer_loaded', {
'event_category': 'ai_assistant',
'event_label': 'widget_ready'
});
}
};
document.head.appendChild(script);
})();
```
## Next steps
After successfully integrating Pointer into your website:
Get started with Pointer and turn support into a growth engine. Reduce tickets, lower churn, and guide users to their "aha" moment.