Customize Your AI Search Bar

🌗 System Theme (Light or Dark)

Decide how your search bar should appear for visitors:

Auto-detect – Automatically adapts to each visitor’s system settings (light or dark mode). Best for modern, responsive websites.
Light Mode – Clean, bright, and perfect for websites with white or light backgrounds.
Dark Mode – Sleek, elegant, and ideal for websites with darker themes.

👉 Tip: If your site already has a theme, pick the one that matches best.

🔠 Font Family

Choose the font that appears inside the widget (this is what people see when typing their questions).

Default: Albert Sans — modern, clean, and easy to read.
You can change it later to match your brand’s typography.

🎨 Colors

Give your widget a branded touch by customizing its colors:

Primary Accent – Your main accent color (often your brand’s main color).
Secondary Accent – Works with the primary color to create smooth gradients.
Tertiary Accent – An additional accent for highlights and details.

💡 Pro Tip: Use the same colors as your logo or website theme for a consistent, professional look.

💬 Placeholder Text

This is the friendly little message inside the search bar before someone types.

Default: “Ask Anything…”
You can make it your own:
- “Need help? Start typing…”
- “Search our knowledge base…”
- “Looking for answers? Try me!”

📍 Location

Decide where the search bar should live on your site:

Floating (Recommended): The widget “floats” in the corner of the screen, always accessible without taking up extra space.
Inline: The bar is placed directly in a chosen section of a page (for example, at the top of your Help Center).

💾 Save Your Style

Once everything looks good:

Click the Save button.
That’s it — your AI search bar is now styled perfectly for your site!

✨ Awesome Work!

You’ve just customized your AI search bar so it looks and feels like part of your brand. Next up: we’ll walk you through installing the widget on your site so your visitors can start using it right away. 🚀