Advanced Options

Advanced options

AI Site Search is designed to be flexible and adaptable to your website's needs. Here are some ways you can customize its appearance and behavior:

Controlled vs Uncontrolled Usage

By default, AI Site Search is uncontrolled and provides its own trigger button. However, you can also use it in a controlled manner for more flexibility.

Uncontrolled (Default)

<AISiteSearch apiKey="your-ai-site-search-api-key" />

Controlled

function App() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open AI Site Search</button>
      <AISiteSearch
        apiKey="your-ai-site-search-api-key"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      />
    </div>
  );
}

Customizing appearance

You can customize various aspects of AI Site Search to match your website's branding:

• Title: Change the title of the search modal
• Placeholder: Customize the placeholder text in the search input

Here's an example of how to customize these elements:

<AISiteSearch
  apiKey="your-ai-site-search-api-key"
  title="Search Our Knowledge Base"
  placeholder="What would you like to know?"
/>

Dark Mode

Users can also toggle between light and dark mode using the sun/moon icon in the search interface.