You can install the Widget together with the Separate Results Page view. When you type your search term in the Widget’s search field, results are rendered instantly below the search field. After pressing the enter key, you will be forwarded to a separate results page.

Instructions

Installing the Widget with the Separate Results Page view includes the following phases:

1. Creating the separate results page on your website
2. Finding the location to add the Widget script on your website’s design template
3. Configuring the Widget view and placing the script to your website’s design template
4. Configuring the Separate Results Page view and placing the script to the results page

1. Creating the results page on your website

Creating a page depends on your CMS. Please refer to your CMS’ documentation about creating a new page or use an existing template if there is a page for search results already.

Take note of the search result page URL. You will need it when setting up the global search Widget view.

2. Finding the location to add the Widget script to your website’s design template

You can find the template in your CMS, usually under menus, such as “Theme,” “Template,” “Design,” “Appearance,” or similar. The templates for WordPress websites reside in the dashboard under “Appearance” -> “Editor.”

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, replace it and everything down to and including the closing </form> tag with the AddSearch script snippet.

You will refer to this location in the design template after you have created the search Widget script with the Search Designer in the following steps.

3. Configuring the Widget and exporting the script to your website’s design template

Follow the instructions to configure the Widget to export the scripts to the design template:

1. Go to the Search Designer tool here
2. Add your Site key to access your search index
3. Click Advanced button to open the Advanced settings tab
4. Add the result page URL in the input field of the Search result’s page URL option to enable forwarding the user to your results page
5. Configure the Widget with available options in the Search Designer according to your preferences
6. After configuring, click Apply changes to submit the changes
7. Click Installation script from the top right of the Search Designer to display the Installation script prompt
8. Click Copy script to copy the script to the clipboard
9. Paste the script in the location you have located on your website’s design template
10. Save the settings on your design template

Here is an example of how the script snippet might look like (notice the last line with the results page URL):

<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
    "search_results_page_url": "search-results.html"
  }
} 
</script>
<script src="https://cdn.addsearch.com/v5/addsearch-ui.min.js?key=####&id=asw_01"></script>

4. Configuring the Separate Results Page view with the Search Designer and placing the script to the results page

Follow the instructions to configure the Separate Results Page view and export the installation scripts to the results page:

1. Go to the Search Designer tool here
2. Add your Site key to access your search index
3. Configure the Separate Results Page view with available options in the Search Designer according to your preferences
4. After configuring, click Apply changes to apply the changes
5. Click Installation script from the top right of the Search Designer to display the Installation script prompt
6. Click Copy script to copy the script to the clipboard
7. Paste the script to the results page
8. Save the changes made to the 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=####&type=search_results_page&id=arp_01"></script>