Customization

Overview

The AI Chat Extension SDK provides extensive customization options to ensure the chat experience seamlessly matches your extension’s brand identity. You can customize logos, colors, UI styles, and behavior.

Branding configuration

Chat badge

The chat badge is the floating UI element that appears when shopping queries are detected.

branding: {
  chatBadge: {
    logoUrl: string;  // REQUIRED if enableChatBadge is true
  }
}

Example:

await initializeAiChatExtensionSdk('your-api-key', {
  featureControls: {
    enableChatBadge: true,
  },
  branding: {
    chatBadge: {
      logoUrl: 'https://your-extension.com/badge-logo.png',
    },
  },
});

Logo requirements:

Format: PNG, SVG, or JPG
Size: 200x200px minimum (square aspect ratio)
Background: Transparent PNG recommended
File size: <100KB for best performance

Chat panel

The chat panel is the 400px sidebar that contains the full AI conversation interface.

branding: {
  chatPanel: {
    logoUrl?: string;                    // Panel header logo
    showLogo?: boolean;                  // Show/hide logo (default: true)
    customStyles?: {
      panelContainer?: {
        backgroundColor?: string;
        border?: string;
        borderTop?: string;
        borderRight?: string;
        borderBottom?: string;
        borderLeft?: string;
        padding?: string;
      };
      chatContentCard?: {
        backgroundColor?: string;
        border?: string;
        borderTop?: string;
        borderRight?: string;
        borderBottom?: string;
        borderLeft?: string;
        borderRadius?: string;
        padding?: string;
      };
      closeButton?: {
        backgroundColor?: string;
        border?: string;
        iconColor?: string;
        hoverBackgroundColor?: string;
        hoverIconColor?: string;
        borderRadius?: string;
        padding?: string;
        iconUrl?: string;
      };
    };
  }
}

Example:

branding: {
  chatPanel: {
    logoUrl: 'https://your-extension.com/panel-logo.png',
    showLogo: true,
    customStyles: {
      panelContainer: {
        backgroundColor: 'rgba(255, 255, 255, 0.98)',
        borderLeft: '3px solid #6366f1',
      },
      chatContentCard: {
        backgroundColor: '#f9fafb',
        borderRadius: '12px',
        padding: '16px',
      },
      closeButton: {
        backgroundColor: '#ef4444',
        iconColor: 'white',
        borderRadius: '8px',
      },
    },
  },
}

Color customization

Color palettes

Define primary and secondary color palettes for the chat UI:

chatConfig: {
  colorsPrimary?: string[];    // Primary colors (buttons, accents)
  colorsSecondary?: string[];  // Secondary colors (backgrounds, borders)
}

Example:

chatConfig: {
  apiKey: 'your-zero-click-api-key',
  colorsPrimary: ['#059669', '#10b981', '#34d399'],     // Green shades
  colorsSecondary: ['#d1fae5', '#a7f3d0', '#6ee7b7'],   // Light green shades
}

Color usage

Primary colors: Used for buttons, links, active states, and key UI elements
Secondary colors: Used for backgrounds, hover states, and subtle UI elements

Brand-specific examples

Blue theme
Purple theme
Orange theme
Dark theme

chatConfig: {
  colorsPrimary: ['#2563eb', '#3b82f6', '#60a5fa'],     // Blue
  colorsSecondary: ['#dbeafe', '#bfdbfe', '#93c5fd'],   // Light blue
}

Custom styles

Panel container

Customize the main chat panel container:

customStyles: {
  panelContainer: {
    backgroundColor: 'rgba(255, 255, 255, 0.98)',
    borderLeft: '3px solid #6366f1',
    padding: '20px',
  }
}

Supported properties:

Layout: padding, margin
Background: backgroundColor
Border: borderLeft, borderRight, borderTop, borderBottom, borderRadius

Chat content card

Customize the card containing chat messages:

customStyles: {
  chatContentCard: {
    backgroundColor: '#f9fafb',
    borderRadius: '12px',
    border: '1px solid #e5e7eb',
    padding: '16px',
  }
}

Close button

Customize the panel close button:

customStyles: {
  closeButton: {
    backgroundColor: '#ef4444',
    iconColor: 'white',
    borderRadius: '8px',
    padding: '8px 12px',
    fontSize: '14px',
    fontWeight: '600',
  }
}

Complete styling example

branding: {
  chatPanel: {
    logoUrl: 'https://your-extension.com/logo.png',
    showLogo: true,
    customStyles: {
      panelContainer: {
        // Modern frosted glass effect
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        backdropFilter: 'blur(20px)',
        borderLeft: '2px solid #e5e7eb',
        padding: '24px',
      },
      chatContentCard: {
        // Subtle card design
        backgroundColor: '#ffffff',
        borderRadius: '16px',
        border: '1px solid #f3f4f6',
        padding: '20px',
      },
      closeButton: {
        // Prominent close button
        backgroundColor: '#ef4444',
        iconColor: 'white',
        borderRadius: '12px',
        padding: '10px 16px',
        fontSize: '15px',
        fontWeight: '700',
      },
    },
  },
}

Disclaimer text

Customize the disclaimer text shown while the chat is loading:

chatConfig: {
  disclaimerText: 'AI responses may not always be accurate. Please verify information before making purchases.',
}

Default text: "AI responses may contain errors" Use cases:

Legal disclaimers
Custom warnings
Brand-specific messaging

Logo customization

Using logo URLs

The simplest approach is to provide logo URLs:

branding: {
  chatBadge: {
    logoUrl: 'https://your-extension.com/badge-logo.png',
  },
  chatPanel: {
    logoUrl: 'https://your-extension.com/panel-logo.png',
  },
}

Hiding the logo

To hide the logo entirely:

branding: {
  chatPanel: {
    showLogo: false,
  },
}

Message limits

Control the maximum number of messages per conversation:

chatConfig: {
  messageLimitPerThread: 50,  // Default: unlimited
}

When the limit is reached, users must start a new conversation. Recommended values:

Short sessions: 20-30 messages
Standard sessions: 50-75 messages
Extended sessions: 100+ messages

Complete customization example

Here’s a fully customized configuration:

import { initializeAiChatExtensionSdk } from '@sleek/ai-chat-extension-sdk';

await initializeAiChatExtensionSdk('your-sleek-api-key', {
  // Features
  featureControls: {
    enableChatBadge: true,
    enableChatPanel: true,
  },

  // Platforms
  platformControls: {
    enableGoogle: true,
    enableChatGPT: false,
  },

  // Chat configuration
  chatConfig: {
    apiKey: 'your-zero-click-api-key',

    // Brand colors
    colorsPrimary: ['#6366f1', '#818cf8', '#a5b4fc'],
    colorsSecondary: ['#e0e7ff', '#c7d2fe', '#a5b4fc'],

    // Custom disclaimer
    disclaimerText: 'Your Brand AI Assistant - Responses are AI-generated and may not be accurate',

    // Message limit
    messageLimitPerThread: 75,
  },

  // Branding
  branding: {
    chatBadge: {
      logoUrl: 'https://cdn.yourbrand.com/badge-logo.png',
    },
    chatPanel: {
      logoUrl: 'https://cdn.yourbrand.com/panel-logo.png',
      showLogo: true,
      customStyles: {
        panelContainer: {
          backgroundColor: 'rgba(249, 250, 251, 0.98)',
          borderLeft: '3px solid #6366f1',
          padding: '24px',
        },
        chatContentCard: {
          backgroundColor: '#ffffff',
          borderRadius: '16px',
          border: '1px solid #e5e7eb',
          padding: '20px',
        },
        closeButton: {
          backgroundColor: '#6366f1',
          iconColor: 'white',
          borderRadius: '12px',
          padding: '10px 16px',
          fontSize: '15px',
          fontWeight: '700',
        },
      },
    },
  },

  // Debug mode (development only)
  enableDebug: process.env.NODE_ENV === 'development',

  // Data providers
  dataProviders: {
    offerRedirectUrlProvider: async (url) => {
      // Your implementation
      return null;
    },
    merchantCashbackProvider: async (urls) => {
      // Your implementation
      return {};
    },
  },
});

Preview your customization

To see your customization in action:

Test on Google Search

Navigate to Google Search and search for “best headphones” or another shopping query

Verify badge appearance

Check that the chat badge appears with your custom logo and suggested prompts

Open chat panel

Click the badge or a suggested prompt to open the chat panel

Verify panel styling

Confirm your custom colors, styles, and branding appear correctly in the panel

Best practices

1. Maintain brand consistency

Use the same colors, logos, and styling as your main extension UI to create a cohesive experience.

2. Test on light and dark pages

Test your customization on both light and dark websites to ensure readability:

customStyles: {
  panelContainer: {
    // Use semi-transparent backgrounds for better adaptation
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    backdropFilter: 'blur(10px)',
  }
}

3. Keep logos optimized

Use SVG for scalable logos
Optimize PNG files to <100KB
Serve logos from a CDN for fast loading

4. Use accessible colors

Ensure sufficient contrast for readability:

Text on backgrounds: 4.5:1 contrast ratio minimum
Buttons and interactive elements: 3:1 contrast ratio minimum

Use tools like WebAIM Contrast Checker to verify.

5. Test responsiveness

The chat panel is fixed at 400px width, but test on different screen sizes to ensure it doesn’t obscure critical page content.

Troubleshooting

Logo not appearing

Causes:

Invalid logo URL
CORS restrictions on logo image
showLogo: false is set

Solutions:

Verify logo URL is accessible
Host logo on a CDN with CORS enabled
Check showLogo is true (default)

Custom styles not applying

Causes:

Typos in CSS property names
Invalid CSS values
Properties not supported

Solutions:

Use React.CSSProperties type for autocomplete
Test styles in browser DevTools first
Refer to supported properties list above

Colors look different than expected

Causes:

Page CSS interfering with panel
Browser color profile differences
Transparency/backdrop filter effects

Solutions:

Test on multiple browsers
Use specific color values (not theme keywords)
Adjust transparency levels

Next steps

Events

Track user interactions with the event system

Troubleshooting

Common issues and solutions

AI Chat Extension SDK Reference

​Overview

​Branding configuration

​Chat badge

​Chat panel

​Color customization

​Color palettes

​Color usage

​Brand-specific examples

​Custom styles

​Panel container

​Chat content card

​Close button

​Complete styling example

​Disclaimer text

​Logo customization

​Using logo URLs

​Hiding the logo

​Message limits

​Complete customization example

​Preview your customization

​Best practices

​Troubleshooting

​Next steps

Events

Troubleshooting

Overview

Branding configuration

Chat badge

Chat panel

Color customization

Color palettes

Color usage

Brand-specific examples

Custom styles

Panel container

Chat content card

Close button

Complete styling example

Disclaimer text

Logo customization

Using logo URLs

Hiding the logo

Message limits

Complete customization example

Preview your customization

Best practices

Troubleshooting

Next steps