Quick Installation Instructions

  1. For easy search design and installation check out the Search Designer tool.
    Go to Search Designer
  2. For developers, we provide the Search UI Library. Search UI Library provides developers an easy and flexible way of creating a search view for your website.
    Go to Search UI Library

Detailed Installation Instructions

The simplest way to install AddSearch is to copy a few lines of code to your site template.

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.

These are instructions on how to install ready-made search views on your website.

  1. Install Widget View
  2. Install Separate Results Page View
  3. Install Separate Results Page View with Widget

Find your sitekey

To find your Site key, follow these instructions:

  1. Login to your AddSearch Account
  2. Go to Keys and installation under Setup
  3. Copy your site key under Your Site Key

Screenshot of the Dashboard Keys and installation section

Keys and installation

These instructions can be used to install AddSearch on basically any content management systems, including Squarespace, Webflow, WebEx, Drupal, and Joomla.

Widget view

Screenshot of the ready-made 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:
     window.addsearch_settings = {
      "asw_01": {
        "results_box_opening_direction": "right",
        "show_search_suggestions": true,
        "search_suggestion_position": "left",
        "default_sortby": "relevance",
        "analytics_enabled": false,
        "automatic_filter_results_by_site_language": false,
        "display_date": false,
        "display_meta_description": false,
        "display_result_image": true,
        "link_target": "_self",
        "hide_logo": false,
        "direction": "ltr"
    <script src="https://cdn.addsearch.com/v4/addsearch-ui.min.js?key=xxxxxx&id=asw_01"></script>
  4. Save the changes to your template and publish them to your website.


Separate results page

Screenshot of the ready-made results page view

Example of a traditional 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" />

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:

 window.addsearch_settings = {
  "arp_01": {
    "analytics_enabled": false,
    "show_search_suggestions": true,
    "automatic_match_all_query": true,
    "automatic_filter_results_by_site_language": false,
    "default_sortby": "date",
    "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",
    "facets": {
      "Category": "documentation_category"
<script src="https://cdn.addsearch.com/v4/addsearch-ui.min.js?key=xxxxxx&type=search_results_page&id=arp_01"></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.


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.

Was this helpful?

Need more help?

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.