Multiple Search Boxes

Single Configuration

All search boxes share one ss360Config and one embed snippet. This works well when the boxes have the same look and behaviour and you only need to differentiate what content they return. See Scoping Search Results for how to control scope per input.

---

Separate Configurations

Design & Publish supports multiple independent configurations. Each has its own settings, its own look, and its own embed snippet — meaning you can power two completely different search bars from the same account. Use the configuration menu in the top-left corner of Design & Publish to create and switch between configurations.

See Configurations for a full walkthrough and the Multiple Search Boxes page for a live demo.

---

Multiple Site IDs in Code

If you need to reference two completely separate SS360 projects on the same page, or prefer to manage configuration in code rather than through the UI, use the standard JS integration.

Using ss360Configs

window.ss360Config = {
    siteId: 'mysite',
    searchBox: {
        selector: '#searchBox1'
    }
};
window.ss360Configs = {
    SS360_SECONDSEARCH: {
        siteId: 'mysite2',
        searchBox: {
            selector: '#searchBox2'
        }
    }
};

Using ss360Config as an array

window.ss360Config = [{
    siteId: 'mysite',
    searchBox: {
        selector: '#searchBox1'
    }
}, {
    siteId: 'mysite2',
    searchBox: {
        selector: '#searchBox2'
    }
}];

If you're using the React component, use the alias prop instead — it maps to the same concept as the key in ss360Configs:

<SiteSearch360 siteId=".." alias="SS360mysite1" />
<SiteSearch360 siteId=".." alias="SS360mysite2" />