Skip to main content

Installing the Widget with a Separate Results Page View

This guide walks you through setting up the AddSearch Widget on your website so that users see instant search results below the search field and are redirected to a separate search results page after pressing Enter.

Overview​

The installation involves these main steps:

  1. Create a separate search results page on your website
  2. Identify where to add the Widget script in your website's design template
  3. Configure the Widget view and add the Widget script to your site template
  4. Configure the Separate Results Page view and add its script to the results page

1. Create the Results Page​

Create a new search results page using your Content Management System (CMS) or use an existing page designed for search results. Consult your CMS documentation for creating or editing pages.

Note the full URL of this results page; you will need it when configuring the Widget view.

2. Locate the Widget Script Placement in Your Design Template​

Find your website's design template where the search form appears. Depending on your CMS, templates may be found under menus named Theme, Template, Design, or Appearance.

For example, in WordPress, templates reside under Appearance > Editor in the dashboard.

Locate the existing HTML <form> element that represents your search form, which looks like <form ...></form>.

Replace this entire <form> element with the AddSearch Widget script snippet after you generate it in the next step.

3. Configure the Widget and Add Its Script to Your Template​

  1. Open the AddSearch Search Designer Widget tool.
  2. Enter your Site key to access your search index.
  3. Click Advanced to expand advanced settings.
  4. Set the Search result's page URL field to the URL of the results page you created in step 1. This ensures users are forwarded there on pressing Enter.
  5. Customize other Widget options to your preferences using the available controls.
  6. Click Apply changes to save your configuration.
  7. Click Installation script at the top right to open the script prompt.
  8. Click Copy script to copy the Widget installation snippet.
  9. Paste the script into the location of your website template identified in step 2.
  10. Save your changes to the website template.

Example Widget script snippet:
(Note: Replace the placeholder URL with your actual results page URL in the configuration.)

<!-- AddSearch Widget script snippet example -->
<script src="https://cdn.addsearch.com/.../addsearch-widget.js"></script>
<script>
  AddSearch.init({
    sitekey: "your-site-key",
    searchResultUrl: "https://yourdomain.com/search-results"
  });
</script>

4. Configure the Separate Results Page View and Add Its Script​

  1. Open the AddSearch Search Designer Separate Results Page tool.
  2. Enter your Site key to access your search index.
  3. Customize the Separate Results Page settings according to your preferences.
  4. Click Apply changes to save your configuration.
  5. Click Installation script at the top right to view the results page script.
  6. Click Copy script to copy the snippet.
  7. Paste the snippet into the HTML source of your search results page.
  8. Save the changes to the results page.

Example Separate Results Page script snippet:

<!-- AddSearch Separate Results Page script snippet example -->
<script src="https://cdn.addsearch.com/.../addsearch-results.js"></script>
<script>
  AddSearchResults.init({
    sitekey: "your-site-key"
  });
</script>

After completing these steps, your website will display instant search suggestions below the Widget’s search field, and forward users to your dedicated search results page upon submission.

For more details, refer to the AddSearch Search Designer documentation.