Customization

Overview

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

Logo customization

Using logo URLs

Provide a logo URL to display in the chat panel header:

chatConfig: {
  showLogo: true,
  logoUrl: 'https://your-app.com/logo.png',
}

Logo requirements:

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

Hiding the logo

To hide the logo entirely:

chatConfig: {
  showLogo: false,
}

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: {
  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
}

Layout customization

Position and size

Control where the chat panel appears on the page:

chatConfig: {
  layout: {
    position: {
      right: '0px',    // Distance from right edge
      bottom: '0px',   // Distance from bottom edge
      // Or use top/left
      // top: '0px',
      // left: '0px',
    },
    size: {
      width: '400px',   // Default: 400px
      height: '100vh',  // Default: 100vh (full viewport height)
    },
  },
}

Common layouts:

Visual styling

Customize the panel’s visual appearance:

chatConfig: {
  layout: {
    // ... position and size
    borderRadius: '12px',
    border: '1px solid #e5e7eb',
    backgroundColor: 'rgba(255, 255, 255, 0.98)',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
    overflow: 'hidden',
  },
}

Component styling

Panel container

Customize the main chat panel container:

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

Supported properties:

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

Chat content card

Customize the card containing chat messages:

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

Input field

Customize the message input area:

styling: {
  input: {
    backgroundColor: '#ffffff',
    borderColor: '#e5e7eb',
    textColor: '#1f2937',
    placeholderColor: '#9ca3af',
    fontSize: '14px',
    padding: '12px',
    borderRadius: '8px',
    sendButton: {
      backgroundColor: '#3b82f6',
      iconColor: '#ffffff',
      hoverBackgroundColor: '#2563eb',
    },
  }
}

Message bubbles

Customize user and assistant message appearance:

styling: {
  userMessage: {
    backgroundColor: '#3b82f6',
    textColor: '#ffffff',
    borderRadius: '12px',
    padding: '10px 14px',
    fontSize: '14px',
  },
  assistantMessage: {
    backgroundColor: '#f3f4f6',
    textColor: '#1f2937',
    borderRadius: '12px',
    padding: '10px 14px',
    fontSize: '14px',
  },
}

Prompt suggestions

Customize prompt badge styling:

styling: {
  prompt: {
    backgroundColor: '#f3f4f6',
    textColor: '#1f2937',
    hoverBackgroundColor: '#e5e7eb',
    borderColor: '#d1d5db',
    borderRadius: '8px',
    fontSize: '13px',
    padding: '8px 12px',
    iconColor: '#6b7280',
  }
}

Error messages

Customize error display styling:

styling: {
  error: {
    backgroundColor: '#fef2f2',
    textColor: '#991b1b',
    borderColor: '#fee2e2',
    titleColor: '#dc2626',
    buttonBackgroundColor: '#dc2626',
    buttonTextColor: '#ffffff',
  }
}

Top merchants

Customize merchant list styling:

styling: {
  topMerchants: {
    logoSize: '40px',
    brandNameColor: '#1f2937',
    brandNameFontSize: '14px',
    rewardsBadgeBackgroundColor: '#10b981',
    rewardsBadgeTextColor: '#ffffff',
    borderColor: '#e5e7eb',
  }
}

Close button

Customize the panel close button:

styling: {
  closeButton: {
    backgroundColor: '#ef4444',
    iconColor: 'white',
    borderRadius: '8px',
    padding: '8px 12px',
    hoverBackgroundColor: '#dc2626',
  }
}

You can also use a custom icon:

content: {
  closeButton: {
    iconUrl: 'https://your-app.com/close-icon.svg',
  }
}

Content customization

Input placeholder

Customize the input field placeholder text:

content: {
  input: {
    placeholder: 'Ask about products...',
  }
}

Error messages

Customize error message text:

content: {
  error: {
    title: 'Something went wrong',
    message: 'We encountered an error. Please try again.',
    retryButtonText: 'Retry',
  }
}

Disclaimer text

Customize the disclaimer text shown during chat:

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

Default text: "AI responses may contain errors"

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 { initializeAiChatSdk } from '@sleek/ai-chat-sdk';

initializeAiChatSdk('your-zero-click-api-key', {
  // Chat configuration
  chatConfig: {
    // Logo
    showLogo: true,
    logoUrl: 'https://cdn.yourbrand.com/logo.png',

    // 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,

    // Layout
    layout: {
      position: {
        right: '20px',
        bottom: '20px',
      },
      size: {
        width: '420px',
        height: '700px',
      },
      borderRadius: '16px',
      boxShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
    },
  },

  // Content customization
  content: {
    input: {
      placeholder: 'Ask me anything about products...',
    },
    error: {
      title: 'Oops!',
      message: 'Something went wrong. Please try again.',
      retryButtonText: 'Try Again',
    },
  },

  // Styling
  styling: {
    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',
    },
    input: {
      backgroundColor: '#ffffff',
      borderColor: '#d1d5db',
      textColor: '#1f2937',
      placeholderColor: '#9ca3af',
      borderRadius: '10px',
      sendButton: {
        backgroundColor: '#6366f1',
        iconColor: '#ffffff',
        hoverBackgroundColor: '#4f46e5',
      },
    },
    userMessage: {
      backgroundColor: '#6366f1',
      textColor: '#ffffff',
      borderRadius: '14px',
      padding: '12px 16px',
    },
    assistantMessage: {
      backgroundColor: '#f3f4f6',
      textColor: '#1f2937',
      borderRadius: '14px',
      padding: '12px 16px',
    },
    closeButton: {
      backgroundColor: '#6366f1',
      iconColor: 'white',
      borderRadius: '12px',
      padding: '10px 16px',
      hoverBackgroundColor: '#4f46e5',
    },
  },

  // 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 {};
    },
  },
});

Best practices

1. Maintain brand consistency

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

2. Test on light and dark pages

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

styling: {
  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 customizable in size, but test on different screen sizes to ensure it doesn’t obscure critical page content.

6. Consider mobile users

If your app is used on mobile, consider responsive sizing:

const isMobile = window.innerWidth < 768;
layout: {
  size: {
    width: isMobile ? '100vw' : '400px',
    height: isMobile ? '100vh' : '600px',
  }
}

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 TypeScript for autocomplete and type checking
Test styles in browser DevTools first
Refer to supported properties in this guide

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
Check Shadow DOM isolation is working

Panel overlapping page content

Causes:

Incorrect positioning
Size too large for viewport
Z-index conflicts

Solutions:

Adjust position and size values
Test on different screen sizes
The SDK automatically manages z-index

Next steps

Events

Track user interactions with the event system

Data providers

Integrate offer redirect URLs and cashback data

Troubleshooting

Common issues and solutions

AI Chat JS SDK Reference

​Overview

​Logo customization

​Using logo URLs

​Hiding the logo

​Color customization

​Color palettes

​Color usage

​Brand-specific examples

​Layout customization

​Position and size

​Visual styling

​Component styling

​Panel container

​Chat content card

​Input field

​Message bubbles

​Prompt suggestions

​Error messages

​Top merchants

​Close button

​Content customization

​Input placeholder

​Error messages

​Disclaimer text

​Message limits

​Complete customization example

​Best practices

​Troubleshooting

​Next steps

Events

Data providers

Troubleshooting

Overview

Logo customization

Using logo URLs

Hiding the logo

Color customization

Color palettes

Color usage

Brand-specific examples

Layout customization

Position and size

Visual styling

Component styling

Panel container

Chat content card

Input field

Message bubbles

Prompt suggestions

Error messages

Top merchants

Close button

Content customization

Input placeholder

Error messages

Disclaimer text

Message limits

Complete customization example

Best practices

Troubleshooting

Next steps