Configurable installation

AddSearch provides ready-made installations with different views and can be installed on your website in a few minutes. These views support suggestions, facets, language detection and many other features of AddSearch and you can customise them in our Search Designer.

For installing AddSearch, you need an AddSearch account that comes with a public sitekey. It is used to identify your search index and return search results from your search index.

You can find your your sitekey in the Keys and installation section of AddSearch dashboard.

AddSearch provides different views you can choose from, including the instant search-as-you-type widget and a separate results page.

1. Install Widget View
2. Use your own input field or multiple search fields with widget
3. Install Separate Results Page View
4. Use your own input field with the Results page
5. Install Separate Results Page View with Widget

Follow the guide for the view you want to install and feel free to contact us via email or in the chat in the bottom right corner if you have any questions.

Widget view

Default results view: Widget

The search widget renders results immediately within the currently viewed 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. Use our Search Designer tool to configure the widget according to your needs and copy the installation script. Then paste the script into your website template to the place where you want the AddSearch field to appear. Here is an example of how the script snippet might look like:

   <script>
    window.addsearch_settings = {
     "asw_01": {
       "show_search_suggestions": false,
       "search_suggestion_position": "left",
       "default_sortby": "relevance",
       "display_date": false,
       "display_meta_description": false,
       "display_result_image": true,
       "link_target": "_self",
       "hide_logo": false,
       "direction": "ltr",
       "analytics_enabled": false,
       "automatic_filter_results_by_site_language": false
     }
   } 
   </script>
   <script src="https://cdn.addsearch.com/v5/addsearch-ui.min.js?key=xxxxxx&id=asw_01"></script>

4. Save the changes to your template and publish them to your website.

Use your own input field or multiple search fields with widget

If you’d like to have multiple search widgets on one page, or use your input field with special styles, use the method described below.

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.

Add attribute data-addsearch-id="placeholder-id" to your existing search input tag. This ID should match the parameter “id” in the installation script’s source.

Copy the below JavaScript code (and replace xxxxxx with your Site Key) to the bottom of your page, before the closing tag, but after the <input type... > element from the previous step.

<script src="https://cdn.addsearch.com/v5/addsearch-ui.min.js?key=xxxxxx&id=placeholder-id"></script>

Separate results page

If you want to show your search results on a traditional results page, follow these instructions.

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 the same as the search query parameter entered in the Search Designer. The default name is search. -->
<input type="text" name="search" placeholder="Search" />
</form>

If you already have a form that submits the search query, you might only need to change the name attribute of the form or even keep it untouched if the name is correct.

Results page

Use our Search Designer tool to configure the results page according to your needs and copy the installation script. Then paste the script to your results page. Here is an example of how the script snippet might look like:

<script>
 window.addsearch_settings = {
  "arp_01": {
    "show_search_suggestions": false,
    "automatic_match_all_query": false,
    "default_sortby": "relevance",
    "display_category": true,
    "display_date": false,
    "display_meta_description": false,
    "display_results_count": true,
    "display_result_image": true,
    "display_url": false,
    "display_sortby": true,
    "link_target": "_self",
    "hide_logo": false,
    "direction": "ltr",
    "analytics_enabled": false,
    "automatic_filter_results_by_site_language": false,
    "facets": {}
  }
} 
</script>
<script src="https://cdn.addsearch.com/v5/addsearch-ui.min.js?key=xxxxxx&type=search_results_page&id=arp_01"></script>

Use your own input field with the Results page

If you’d like to use your own input field with special styles for your Search Result Page implementation, you can use the Advanced Method below.

Add the attribute “data-addsearch-id=placeholder-id” to the existing search input or include it in a new search input. Please note that this ID should match the parameter “id” in the installation script’s source. Place your script where you’d like your results area to appear:

<script src=“https://cdn.addsearch.com/v5/addsearch-ui.min.js?key=xxxxxx&id=placeholder-id&type=search_results_page”></script>

Separate Results Page with Widget

You can combine the Separate Results Page view with the AddSearch Widget. When you type your search term, results are displayed instantly in the Widget. If you press enter, you will be forwarded to a separate results page. An example of the ready-made results page view can be found in the Search Designer.

To implement the Separate Results Page with Widget, follow these instructions.

Widget

The widget installation goes as described in the instructions above; the only change you need to make is to enter the results page relative URL in the Search Designer’s Advanced settings when configuring the widget.

Results page

The results page installation goes as described in the instructions above, but you need to skip the search field step as it will be added by the widget script.

Advanced settings

If you want to restrict the search to certain pages, you can do so by using category filters. You can configure the search script to limit its results to pages that for example have a certain domain or first path segment.