Customization

Customize the IndexFox search widget to match your website's design and provide the perfect user experience.

Theme Customization

The easiest way to customize the widget is by setting a primary color that matches your brand:

html

<script>
window.IndexfoxConfig = {
    color: '#ff6b6b',  // Your brand color
    type: 'wide',      // Use wide layout for more space
    position: 'top-right'
};
</script>

Layout Options

Compact Layout

type: 'compact'

Perfect for mobile-first designs and minimal interfaces. Takes up less screen space while maintaining full functionality.

Wide Layout

type: 'wide'

Ideal for desktop experiences. Provides more space for search results and better readability.

Position Options

Control where the floating search bubble appears on your website:

Top Left

javascript

position: 'top-left'

Top Right

javascript

position: 'top-right'

Bottom Left

javascript

position: 'bottom-left'

Bottom Right (Default)

javascript

position: 'bottom-right'

Keyboard Shortcuts

Customize keyboard shortcuts to match your users' expectations:

Command/Ctrl + K (Default)

javascript

triggerKey: 'k',
triggerModifier: 'Meta'  // 'Meta' for Cmd on Mac, Ctrl on Windows

Command/Ctrl + S

javascript

triggerKey: 's',
triggerModifier: 'Control'  // Always use Ctrl

Forward Slash (/)

javascript

triggerKey: '/',
triggerModifier: null  // No modifier key needed

Advanced Styling

For advanced customization, you can override CSS variables after the widget loads:

css

:root {
  /* Override IndexFox CSS variables */
  --indexfox-primary-color: #your-color;
  --indexfox-border-radius: 12px;
  --indexfox-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  --indexfox-font-family: 'Your Font', sans-serif;
}

Custom Trigger Elements

Create your own search buttons and integrate them with the IndexFox API:

html

<!-- Custom search button in your navigation -->
<nav>
  <a href="#" onclick="window.indexfox.open(); return false;">
    Search
  </a>
</nav>

<!-- Search icon in your header -->
<button class="search-icon" onclick="window.indexfox.toggle()">
  <svg><!-- Your search icon --></svg>
</button>

<!-- Text link in your content -->
<p>
  Can't find what you're looking for? 
  <a href="#" onclick="window.indexfox.open(); return false;">
    Try our search
  </a>
</p>

Responsive Behavior

The widget automatically adapts to different screen sizes, but you can customize the behavior:

javascript

// Different configs for different screen sizes
if (window.innerWidth < 768) {
  // Mobile configuration
  window.IndexfoxConfig = {
    type: 'compact',
    position: 'bottom-right'
  };
} else {
  // Desktop configuration
  window.IndexfoxConfig = {
    type: 'wide',
    position: 'top-right'
  };
}

Event Handling

Listen to widget events to integrate with your analytics or custom functionality:

javascript

// Listen for search events
window.addEventListener('indexfox:open', function() {
  console.log('Search opened');
  // Track with your analytics
  gtag('event', 'search_opened');
});

window.addEventListener('indexfox:search', function(event) {
  console.log('User searched for:', event.detail.query);
  // Track search queries
  gtag('event', 'search_query', {
    search_term: event.detail.query
  });
});

window.addEventListener('indexfox:close', function() {
  console.log('Search closed');
});

Complete Customization Example

Here's a complete example with custom styling and behavior:

html

<style>
/* Custom styles for your search button */
.my-search-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s;
}

.my-search-btn:hover {
  transform: translateY(-2px);
}

/* Override widget colors */
:root {
  --indexfox-primary-color: #667eea;
  --indexfox-border-radius: 12px;
}
</style>

<script>
window.IndexfoxConfig = {
  integration: 'custom',  // No default bubble
  type: 'wide',
  color: '#667eea',
  triggerKey: 'k',
  triggerModifier: 'Meta'
};

// Track search usage
window.addEventListener('indexfox:search', function(event) {
  // Your analytics code here
  console.log('Search query:', event.detail.query);
});
</script>

<script>
(function(d, w) {
  w.IndexfoxID = 'your-website-id';
  var s = d.createElement('script');
  s.async = true;
  s.src = 'https://widget.indexfox.ai/indexfox.js';
  if (d.head) d.head.appendChild(s);
})(document, window);
</script>

<!-- Your custom search button -->
<button class="my-search-btn" onclick="window.indexfox.open()">
  🔍 Search Our Site
</button>

Best Practices

🎨 Match Your Brand

Use your brand colors and fonts to make the search widget feel like a natural part of your website.

📱 Test on Mobile

Always test your customizations on mobile devices to ensure a great experience across all screen sizes.

⌨️ Keyboard Shortcuts

Choose keyboard shortcuts that don't conflict with browser or operating system shortcuts.

📊 Track Usage

Use the event system to track how users interact with search and optimize accordingly.

💡 Pro Tip

Start with the default configuration and gradually customize based on user feedback and analytics data. The default settings work well for most websites.