Styling
Customize your Pointer widget and command menu appearance using the visual playground editor with real-time preview.
The Pointer playground provides a visual editor for customizing your widget and command menu appearance and behavior in real-time.
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
Display section
Content blocks
When using the widget interface, you can configure up to 5 content blocks:
Chat block (required)
- Chat avatar: Upload an avatar image
- Title: Display name for your AI assistant
- Description: Brief explanation of capabilities
External link block
- Title: Descriptive link text
- URL: Destination link
Featured item block
- Title: Headline for featured content
- Description: Announcement or information text
- URL: Link for more details
- Image: Visual element
Email block
- Title: Label for email action
- Email address: Target email for messages
In the playground, you can drag and drop blocks to reorder them as needed.
Welcome section
Conversation launch
- Launch into conversation: Toggle to automatically open chat view
- Home view: When disabled, shows blocks and options first
Welcome messages
- Heading: Primary greeting message (e.g., “Hi there 👋”)
- Subheading: Supporting text or call-to-action (e.g., “How can we help?”)
Try asking suggestions
Questions appear in the home view before entering chat:
- Include different types of inquiries
- Real-time character count indicators
- Tailor examples to your specific product or service
Sample questions help reduce user hesitation and demonstrate your AI assistant’s capabilities.
Triggers section
Custom trigger toggle
- Default behavior: Widget appears with standard launcher button
- Custom integration: Hide default launcher and use your own trigger element
Trigger ID setup
When custom triggers are enabled:
- Specify the ID of the HTML element that should trigger the widget
- Example:
pointer-triggerorhelp-button - Your development team adds this ID to the appropriate element
For more information on how to set up custom triggers, see the custom triggers section of the product integration guide.
Custom triggers are ideal for integrating Pointer into existing help sections or navigation menus.
Design section
Color customization
Configure colors for consistent branding:
Primary colors
- Primary color: Main brand color for buttons and key elements
- Secondary color: Supporting color for accents
- Tertiary color: Additional color for backgrounds
Interactive elements
- Accent color: Highlight color for special emphasis
- Interactive color: Color for clickable elements
- Background color: Main widget background
- Border color: Color for dividers and outlines
Colors update in real-time with HEX code display.
Your colors automatically adapt between light and dark themes. Learn more about customizing theme-specific elements in our Themes guide.
Logo customization
- File formats: .png, .jpeg (max 2MB)
- Placement: Appears in widget header
- Best practices: Use high-resolution images with transparent backgrounds
Launcher customization
Customize the floating chat button’s appearance:
- Background color: Custom color for the launcher button
- Icon selection: Choose from
zap,question,chat,sparkles, or standard Pointer icon
Test color and icon choices across different devices to ensure accessibility and visibility.
Display section
Content blocks
When using the widget interface, you can configure up to 5 content blocks:
Chat block (required)
- Chat avatar: Upload an avatar image
- Title: Display name for your AI assistant
- Description: Brief explanation of capabilities
External link block
- Title: Descriptive link text
- URL: Destination link
Featured item block
- Title: Headline for featured content
- Description: Announcement or information text
- URL: Link for more details
- Image: Visual element
Email block
- Title: Label for email action
- Email address: Target email for messages
In the playground, you can drag and drop blocks to reorder them as needed.
Welcome section
Conversation launch
- Launch into conversation: Toggle to automatically open chat view
- Home view: When disabled, shows blocks and options first
Welcome messages
- Heading: Primary greeting message (e.g., “Hi there 👋”)
- Subheading: Supporting text or call-to-action (e.g., “How can we help?”)
Try asking suggestions
Questions appear in the home view before entering chat:
- Include different types of inquiries
- Real-time character count indicators
- Tailor examples to your specific product or service
Sample questions help reduce user hesitation and demonstrate your AI assistant’s capabilities.
Triggers section
Custom trigger toggle
- Default behavior: Widget appears with standard launcher button
- Custom integration: Hide default launcher and use your own trigger element
Trigger ID setup
When custom triggers are enabled:
- Specify the ID of the HTML element that should trigger the widget
- Example:
pointer-triggerorhelp-button - Your development team adds this ID to the appropriate element
For more information on how to set up custom triggers, see the custom triggers section of the product integration guide.
Custom triggers are ideal for integrating Pointer into existing help sections or navigation menus.
Design section
Color customization
Configure colors for consistent branding:
Primary colors
- Primary color: Main brand color for buttons and key elements
- Secondary color: Supporting color for accents
- Tertiary color: Additional color for backgrounds
Interactive elements
- Accent color: Highlight color for special emphasis
- Interactive color: Color for clickable elements
- Background color: Main widget background
- Border color: Color for dividers and outlines
Colors update in real-time with HEX code display.
Your colors automatically adapt between light and dark themes. Learn more about customizing theme-specific elements in our Themes guide.
Logo customization
- File formats: .png, .jpeg (max 2MB)
- Placement: Appears in widget header
- Best practices: Use high-resolution images with transparent backgrounds
Launcher customization
Customize the floating chat button’s appearance:
- Background color: Custom color for the launcher button
- Icon selection: Choose from
zap,question,chat,sparkles, or standard Pointer icon
Test color and icon choices across different devices to ensure accessibility and visibility.
Display section
Content structure
When using the command menu interface, organize your help content into sections and action items:
Sections
Organize your navigation into logical categories:
- Section names: Custom labels like “Quick actions”, “Navigation”, or “Resources”
- Multiple sections: Create as many sections as needed for your help structure
Action items
Each section contains individual action items:
- Item titles: Clear, descriptive names for each action
- Icons: Visual indicators using the Lucide icon library
- Destinations: Links to pages in your product or external resources
Welcome section
Search functionality
- Search placeholder: Default is “Search or ask…”
- AI integration: “Ask AI” functionality with accent color highlighting
Full search functionality across your application and resources will be available soon.
Navigation experience
- Category organization: Structure your help content logically
- Quick access: Users can navigate with arrow keys and Enter selection
- Search integration: Seamless transition from search to AI assistance
Try asking suggestions
Questions appear in the home view when startin a new conversation:
- Include different types of inquiries
- Real-time character count indicators
- Tailor examples to your specific product or service
Sample questions help reduce user hesitation and demonstrate your AI assistant’s capabilities.
Triggers section
Keyboard shortcuts
- Primary shortcut:
⌘K(macOS) /Ctrl+K(Windows/Linux) - Global access: Works from anywhere when SDK is initialized
Custom trigger toggle
- Default behavior: Widget appears with standard launcher button
- Custom integration: Hide default launcher and use your own trigger element
Trigger ID setup
When custom triggers are enabled:
- Specify the ID of the HTML element that should trigger the widget
- Example:
pointer-triggerorhelp-button - Your development team adds this ID to the appropriate element
For more information on how to set up custom triggers, see the custom triggers section of the product integration guide.
Custom triggers are ideal for integrating Pointer into existing help sections or navigation menus.
Design section
Color customization
Configure colors for consistent branding:
Primary colors
- Primary color: Main brand color for buttons and key elements
- Secondary color: Supporting color for accents
- Tertiary color: Additional color for backgrounds
Interactive elements
- Accent color: Highlight color for special emphasis
- Interactive color: Color for clickable elements
- Background color: Main widget background
- Border color: Color for dividers and outlines
Colors update in real-time with HEX code display.
Your colors automatically adapt between light and dark themes. Learn more about customizing theme-specific elements in our Themes guide.
Real-time preview
The playground provides instant feedback:
- Interface switching: Toggle between home and chat views
- Keyboard simulation: Preview keyboard navigation behavior
- Category management: Real-time preview of navigation structure changes
- Icon testing: Immediate feedback on icon selections
- Responsive preview: Check appearance on different screen sizes
- Theme testing: Preview in both light and dark modes
Advanced configuration
Navigation behavior
- Router integration: Automatic detection of React Router, Next.js, and other navigation systems
- External links: Automatic handling of external URLs (opens in new tab)
- Email links: Direct mailto: handling for contact items
Keyboard navigation
- Arrow key navigation: Move through menu items
- Enter selection: Activate highlighted items
- Escape handling: Close menu or return to previous view
- Tab management: Proper focus handling within modal
Performance optimization
- Icon caching: Efficient loading and caching of icons
- Lazy loading: Components load on demand
- State persistence: User preferences and session data saved locally
Best practices
Interface selection
Interface selection
- Command menu: Ideal for power users, developer-focused products, and streamlined navigation
- User context: Consider your audience’s technical comfort level
- Integration: Choose based on existing UI patterns in your application
Navigation design
Navigation design
Brand consistency
Brand consistency
- Color harmony: Use existing brand colors
- Typography: Match your application’s design language
- Icon style: Maintain consistent icon weight and style
- Testing: Validate appearance on your actual site
User experience
User experience
- Accessibility: Ensure high-contrast colors for readability
- Keyboard users: Test command menu keyboard navigation thoroughly
- Welcome content: Write clear, helpful welcome messages
- User testing: Gather feedback from real users
Technical considerations
Technical considerations
- Keyboard shortcuts: Test that ⌘K doesn’t conflict with existing shortcuts
- Custom triggers: Verify trigger elements work correctly
- Domain configuration: Ensure proper setup across all environments
- Performance: Optimize images and test loading times
- Documentation: Document customizations and navigation structure for your team