Integration Guide

Learn how to integrate IndexFox search widget into your website with different configuration options.

Basic Integration (Default - Floating Bubble)

The simplest integration displays a floating search bubble in the bottom-right corner of your website:

html

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

💡 Pro Tip

Replace 'your-website-id' with the actual Website ID from your IndexFox dashboard.

Google Tag Manager Installation

If you're using Google Tag Manager (GTM), you can easily add IndexFox without touching your website code directly. This is perfect for teams that manage all tracking and scripts through GTM.

Open Google Tag Manager

Create a new Custom HTML tag

Click "Tags" → "New" → Choose "Custom HTML" as the tag type.

Paste the IndexFox script

Copy and paste the following code into the HTML field:

html

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

Set the trigger

Under "Triggering", select "All Pages" to make the search widget available site-wide.

Save and submit

Name your tag (e.g., "IndexFox Search Widget"), save it, and submit your GTM container (the "Submit" button in the top-right corner). Your search widget will be live within minutes!

💡 Pro Tip: Using GTM makes it easy to enable/disable the search widget, test on specific pages, or roll out gradually without code changes.

Configuration Options

You can customize the widget behavior by setting configuration options before the script loads:

html

<script>
window.IndexfoxConfig = {
    integration: 'bubble',       // Optional: 'bubble' (default) or 'custom'
    type: 'compact',            // Optional: 'compact' (default) or 'wide'
    position: 'bottom-right',   // Optional: position of the bubble
    triggerKey: 'k',            // Optional: keyboard shortcut key
    triggerModifier: 'Meta',    // Optional: 'Meta' for Cmd, 'Control' for Ctrl
    color: '#007bff'            // Optional: main theme color
};
</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>

Configuration Reference

integration

Type: string

Default: 'bubble'

Options: 'bubble', 'custom'

Controls how the search widget is displayed on your website.

type

Type: string

Default: 'compact'

Options: 'compact', 'wide'

Sets the size and layout of the search interface.

position

Type: string

Default: 'bottom-right'

Options: 'top-left', 'top-right', 'bottom-left', 'bottom-right'

Position of the floating bubble on the screen.

triggerKey

Type: string

Default: 'k'

Keyboard key to open search (combined with modifier).

triggerModifier

Type: string

Default: 'Meta'

Options: 'Meta' (Cmd), 'Control' (Ctrl)

Modifier key for keyboard shortcut.

color

Type: string

Default: '#007bff'

Primary color for the search interface theme.

JavaScript API

Once the widget is loaded, you can control it programmatically using the global JavaScript API:

`window.indexfox.open()`

Opens the search interface programmatically.

javascript

// Open search interface
window.indexfox.open();

`window.indexfox.close()`

Closes the search interface.

javascript

// Close search interface
window.indexfox.close();

`window.indexfox.toggle()`

Toggles the search interface (opens if closed, closes if open).

javascript

// Toggle search interface
window.indexfox.toggle();

`window.indexfox.updateConfig(newConfig)`

Updates configuration after initialization.

javascript

// Update theme color
window.indexfox.updateConfig({
    color: '#ff6b6b'
});

Custom Integration

For more control over when and how the search interface appears, use custom integration:

html

<script>
window.IndexfoxConfig = {
    integration: 'custom'  // Disable automatic bubble
};
</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 onclick="window.indexfox.open()">
    Search Website
</button>

Always-Visible Integration (No Bubble)

To display the search widget permanently without requiring user interaction, use custom integration with auto-opening:

html

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

Container-Based Integration

Embed the search widget inside a specific container on your page:

html

<!-- Container for the search widget -->
<div id="search-container" style="width: 100%; height: 500px; border: 1px solid #ddd; border-radius: 8px;"></div>

<script>
(function(d, w) {
    // Set configuration BEFORE IndexfoxID to prevent race conditions
    w.IndexfoxConfig = {
        integration: 'custom',
        containerId: 'search-container',
        containerStyles: {
            position: 'relative',
            width: '100%',
            height: '100%',
            display: 'block',
            background: 'transparent'
        },
        iframeStyles: {
            position: 'absolute',
            top: '0',
            left: '0',
            width: '100%',
            height: '100%',
            border: 'none',
            borderRadius: '8px',
            background: 'white'
        }
    };
    
    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);

// Auto-open the widget
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        if (window.indexfox) {
            window.indexfox.open();
        }
    }, 500);
});
</script>

Examples

Keyboard Shortcut Only

html

<script>
window.IndexfoxConfig = {
    integration: 'custom',  // No visible bubble
    triggerKey: 's',        // Ctrl+S or Cmd+S to search
    triggerModifier: 'Control'
};
</script>

Custom Styled Button

html

<style>
.search-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
}
</style>

<button class="search-btn" onclick="window.indexfox.open()">
    🔍 Search
</button>

⚠️ Important

Make sure to replace 'your-website-id' with your actual Website ID from the IndexFox dashboard. The widget won't work without a valid ID.

Troubleshooting

Widget Shows "No Results Found"

This usually means the IndexfoxID is not set correctly or your website hasn't been crawled yet:

Verify your Website ID matches exactly what's shown in your IndexFox dashboard
Ensure IndexfoxID is set before the widget script loads
Check that your website status is "Active" in the dashboard
Wait for initial crawling to complete (can take 24-48 hours for new websites)

Widget Not Loading

If the widget doesn't appear at all:

Check browser console for JavaScript errors
Verify the script URL is accessible
Ensure no ad blockers are interfering
Test on HTTPS (required for production)

Configuration Not Working

If your IndexfoxConfig settings aren't being applied:

Make sure IndexfoxConfig is set before loading the script
Check for JavaScript syntax errors in your configuration
Use browser dev tools to verify the configuration object

💡 Need More Control?

For advanced integration patterns like always-visible widgets, custom styling, and event handling, check out our Advanced Integration guide.