Installation on a regular website

You can find your Site Key once you log in to your Admin Panel, under Installation. The simplest form of installation involves copying a single line of code to your site template. After installation, there is zero maintenance needed.

Standard installation

Default results view: Widget

Quick Method

Our default results view, the search widget view, can be seen on the top right corner of this page. To install AddSearch on your site as a search widget, follow these instructions:

  1. Access the design template of your site. If you’re using a content management system, this template will reside in a menu called “Theme”, “Template”, “Design”, “Appearance” or similar. For WordPress sites, the templates reside in Appearance -> Editor.
  2. If you have an existing search on your site: Go to site template edit and find your site’s search form. This is a HTML element that starts with a <form> tag, such as <form id="search">. Once you’ve found the relevant <form> tag, delete it, and everything up to and including the closing </form> tag.
  3. Copy the JavaScript code below (and replace #### with your Site Key) to where ever you want the AddSearch field to appear:
    <script src="https://addsearch.com/js/?key=####"></script>
  4. Save the changes to your template and publish them to your website.

When using the Quick Method above, the AddSearch script inserts a single search field into the site. The look & feel of the search field can then be customized via the AddSearch Dashboard.

Advanced Method

If you want to have multiple search widgets on one page, or use your own input field with special styles, use the Advanced Method described below.

When using the advanced method, the CSS for the search field in the Admin Panel > Settings> “Look & Feel” customization will not be applied. You need to define the CSS for the search field on your site’s style sheets.

  1. Access the design template of your site. If you’re using a content management system, this template will reside in a menu called “Theme”, “Template”, “Design”, “Appearance” or similar. For WordPress sites, the templates reside in Appearance -> Editor.
  2. Insert one or more <input type="text" class="addsearch"/> elements where you want your search fields to reside. You can define multiple CSS class names to your input fields, but make sure that addsearch class is one of them.
  3. Copy the below JavaScript code (and replace #### with your Site Key) to the bottom of your page, before the <body> tag, but after the <input type...> element from the previous step.
    <script type="text/javascript" src="https://addsearch.com/js/?key=####"></script>
  4. Save the changes to your template and publish them to your website.


Separate results page

Example of a traditional separate results page

If you want to show your search results on a traditional results page, follow these instructions. An example website with a separate results page can be found from this link.

Search field

The search field you need to add to your website template is a simple HTML form with one text field. The form is submitted to the results page, which you need to create as well. The form’s action parameter needs to match your results page’s URL. In this example the URL is “/search.html”:

<!-- Form's action must be the results page's URL -->
<form method="get" action="/search.html">
  <!-- Search field's name must be addsearch -->
  <input type="text" name="addsearch" placeholder="Search" />
</form>

Results page

Results page needs to have at least two elements: Div where the results are rendered and the AddSearch JavaScript below the div. You can also show a search field above search results with an input field:

<!-- Show a search field above results as well (optional) -->
<input type="text" class="addsearch" placeholder="Search.." />

<!-- Search results will be rendered to this div -->
<div id="addsearch-results"></div>

<!-- Script must be below search field and addsearch-results div -->
<script src="https://addsearch.com/js/?key=####&type=resultpage"></script>


Search API

To create a fully customized search results view, or integrate AddSearch to a mobile app, head to our REST API documentation’s Search API section. With our simple JSON API you can query your search index and show the results in any format you wish.