​
Overview

Pointer’s UI is fully customizable through the PointerProvider component. You can customize the theme colors, branding elements, and content to match your application’s design system.

​
Theme customization

Customize the visual appearance of the widget by configuring colors and styling:

<PointerProvider
  // Theme colors
  primaryColor="#111827"    // Primary text and headings
  secondaryColor="#6B7280"  // Secondary text
  tertiaryColor="#f5f5f5"   // Tertiary elements
  accentColor="#6366f1"     // Interactive elements
  backgroundColor="#ffffff" // Widget background
  borderColor="#e4e4e7"    // Border color
  borderRadius="12px"      // Border radius for components
>

​
Branding

Customize branding elements to match your company’s identity:

<PointerProvider
  // Branding
  logomark="/path-to-your-logo.png"  // Your company logo, .png or .svg
  triggerIcon="sparkles"                       // Widget trigger icon
>

The logo prop should be a link to your company’s logo.

The triggerIcon can be one of: 'sparkles', 'help', 'message', or 'zap'.

​
Content

Customize the widget’s text content and messaging:

<PointerProvider
  // Content customization
  welcomeMessage="Hi there 👋"              // Initial greeting
  welcomeSubheading="How can we help?"      // Greeting subtext
  inputPlaceholder="Ask AI anything..."     // Chat input placeholder
>

Customize up to three link buttons that appear at the top of the widget. These buttons can be used to direct users to important resources like documentation, community, or contact information:

<PointerProvider
  // Link button customization
  link1Text="Discord" // First button text
  link1Icon="users" // First button icon
  link1Url="https://dub.sh/pointer-community" // First button URL
  link2Text="Documentation" // Second button text
  link2Icon="book" // Second button icon
  link2Url="https://docs.pointer.so" // Second button URL
  link3Text="Email us" // Third button text
  link3Icon="mail" // Third button icon
  link3Url="mailto:team@pointer.so" // Third button URL
>

Each link button is optional and has three customizable properties:

  • text: The button’s label
  • icon: A Lucide icon name (e.g., ‘users’, ‘book’, ‘mail’)
  • url: The URL to open when clicked

If not provided, the buttons will use default values pointing to Pointer’s resources.

​
Complete example

Here’s a complete example showing all customization options:

<PointerProvider
  apiKey="your-api-key"
  // Theme
  primaryColor="#111827"
  secondaryColor="#6B7280"
  tertiaryColor="#f5f5f5"
  accentColor="#6366f1"
  backgroundColor="#ffffff"
  borderColor="#e4e4e7"
  borderRadius="12px"
  // Branding
  logomark="/path-to-your-logo.png"  // Your company logo, .png or .svg
  triggerIcon="sparkles"
  // Content
  welcomeMessage="Hi there 👋"
  welcomeSubheading="How can we help?"
  inputPlaceholder="Ask AI anything..."
  // Link buttons
  link1Text="Discord"
  link1Icon="users"
  link1Url="https://dub.sh/pointer-community"
  link2Text="Documentation"
  link2Icon="book"
  link2Url="https://docs.pointer.so"
  link3Text="Email us"
  link3Icon="mail"
  link3Url="mailto:team@pointer.so"
>
  {/* Your app content */}
</PointerProvider>

All customization properties are optional. If not provided, Pointer will use its default theme and content settings.

Onboarding flowsPricing