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.
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.
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:
<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.<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>
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>
Example of a traditional separate results page
If you want to show your search results on a traditional results page, follow these instructions.
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.
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>
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>
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.
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.
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.
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.
We’re always happy to help with code or other questions you might have. Search our documentation, contact support, or connect with our sales team.