Skip to main content

Installation Guide

How to install Site Search 360 on your site​

Go to the Design & Publish section of your SS360 Control Panel. It comes with a built-in Search Designer tool allowing you to easily tweak colors, placeholders, result and filter layouts as well as choose an implementation style: results can be shown in an overlay, embedded on your site, or in a fullscreen mode.

Check out this guide exploring the Search Designer settings in detail.

Step 2: Connect Site Search 360 to an existing search bar or add a new one.​

The search needs to be connected to a trigger (e.g., a search icon) or a search input field on your site. If you already have a search bar, try loading your website in the top bar and we'll detect it automatically:

loading your site in search designer

  • If your site has several search boxes that should be connected to Site Search 360, you can provide the CSS selectors for your search boxes and buttons manually under General > Search box and Search button selectors:
    connecting existing search bar in search designer
  • If you don't have a search box on your site yet, you can insert the following code snippet wherever you want the box and search button to be displayed on your site - for example, in your site header:
<section role="search" data-ss360="true">  
   <input type="search" id="searchBox" placeholder="Search…">  
   <button id="searchButton"></button>  
</section>
  • You can also go for the "Add a search bar to my website" option and specify before or after which element on your site you'd like the search box to appear: add a search bar with the SS360 script

Step 3: Add the code snippet to your site.​

Once you're happy with the design, press "Publish" in the top-right corner to get your personalized code snippet.

We recommend implementing our lightweight script bundle (a single line of JavaScript) so that the next time you return to the Search Designer to tweak some settings, all you'd need to do to apply your changes is click "Publish" and wait for a few minutes. No need to touch the code ever again.

<script async src="https://js.sitesearch360.com/plugin/bundle/0000.js"></script>

Alternatively, you can copy and paste the full configuration script and update it manually with all subsequent changes.

Remember that the SS360 script is supposed to go before the closing </body> tag and that the last four digits vary from project to project, so you'll need to get your own line of code rather than paste the one from this guide to your website.

If you're using a site platform where you can't access your site's or your site template's source code, try adding a code block element instead.

Please note: this documentation page refers to our latest search script (v14). If you are using the v13 script or older, check out our upgrade instructions.

Multiple Configurations​

Our Search Designer will offer you a great deal of flexibility when it comes to both the search’s aesthetic and its functionality, and here’s the kicker - you’re not limited to a single setup.

What if you decide to revamp your configuration once it’s live on your site or create a separate one for your dev environment? What if your search needs to be customized for each of the domains you index or even specific sections of a single site? What if you want to add a new search box to your site and make both its design and the results it will return distinctly different from that of your original search box? These are just a few scenarios where an extra config object could come in handy.

In short, this feature will allow you to handle multiple (entirely unique) search moulds independently of one another. Each of them will come with a unique code snippet, so you’ll never have to worry about mixing up your meticulously customized configurations.

To get the ball rolling, click on “Main search” in the upper left corner of the “Design & Publish” section of the Control Panel to open a dropdown list of your config object(s) and press the “Add new configuration” button:

config selection menu

If need be, you can copy the parameters of your original configuration to the new one rather than start from scratch:

adding a new configuration