The Pointer playground provides a visual editor for customizing your widget and command menu appearance and behavior in real-time.
Pointer playground interface
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
  • Title: Descriptive link text
  • URL: Destination link
  • 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-trigger or help-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.

​
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

  • 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