Step 1: Initialize the Library

light bulb
Note
These instructions reference a searchbar-only version of the Search UI SDK. This bundle only contains the necessary JS for the searchbar component, and nothing else, therefore optimized for page speed.

To add the search bar to a page, we’ll use a version of the Search UI SDK. The below steps walk you through how to configure a search bar in your website header.

First, add the searchbar-only version of the Search UI SDK and CSS to the page, and then initialize Search. This library will need to exist on every page we have a search bar. If the search bar is in the header this will mean it’s on every page on the website.

Add this into the <head></head> on every page that has a search bar. Make sure you replace any of the properties you collected in the introduction step in the script below. These are all prefixed with REPLACE_ME. If using the in-platform snippet generator, these fields will already be populated with your account information.

light bulb
Note
The code below uses v1.6 as the version number. Before deploying it’s always a good idea to make sure you use the latest version of the Search bar asset from Search UI Library. You won’t need to keep this version up to date over time unless you want access to the latest features but for the best performance use the latest version. You can find the full search bar only JS changelog here .
<head>
  <!-- Other stuff in the head here -->
  <link
    rel="stylesheet"
    type="text/css"
    href="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.css"
  />
  <script src="https://assets.sitescdn.net/answers-search-bar/v1.6/answerstemplates.compiled.min.js"></script>
  <script>
    function initAnswers() {
      ANSWERS.init({
        apiKey: "REPLACE_ME_API_KEY",
        experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
        experienceVersion: "PRODUCTION",
        locale: "en", // e.g. en
        businessId: "REPLACE_ME_BUSINESS_ID",
        templateBundle: TemplateBundle.default,
        onReady: function () {
          ANSWERS.addComponent("SearchBar", {
            container: ".search_form",
            name: "search-bar", //Must be unique for every search bar on the same page
            redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
            placeholderText: "Search...",
          });
        },
      });
    }
  </script>
  <script
    src="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>

You can also configure the placeholderText and optionally add a promptHeader in the addComponent call above to fit your needs. For a full list of properties, see the Appendix at the end of this guide.

In order to use or preview the staging version of Search, you will need to update the experienceVersion to STAGING when initizalizing the library.

You will still replace any of the properties prefixed with REPLACE_ME the same way as you would in the directions above.

Also see the directions in the Creating Search Results Page guide to learn how to modify the script tag to utilize the Staging version of Search.

Additional Information (Optional)

Below we outline how to handle the following integration cases. If these don’t apply to you, carry on to Step #2.

  • Polyfilled Site
  • ASP.NET Integration
  • RequireJS or Other Script Loader

Polyfilled Site

The searchbar-only JS asset used in the example above includes polyfills. If you’re already polyfilling your site, or Internet Explorer support is not a priority, you should reference https://assets.sitescdn.net/answers-search-bar/v1.6/answers-modern.min.js instead of https://assets.sitescdn.net/answers-search-bar/v1.6/answers.min.js. This will further improve page performance.

ASP.NET Integration

This section is only relevant for ASP.NET sites.

ASP.NET sites wrap the entire site in a <form></form> element. By default, the Search JS Library uses a <form> around the search bar to maximize accessibility. If you are trying to use Search on an ASP.NET website you will need to turn this off. To do this, set the configuration option useForm to false on the SearchBar component. For example:

<head>
  <!-- Other stuff in the head here -->
  <link
    rel="stylesheet"
    type="text/css"
    href="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.css"
  />
  <script src="https://assets.sitescdn.net/answers-search-bar/v1.6/answerstemplates.compiled.min.js"></script>
  <script>
    function initAnswers() {
      ANSWERS.init({
        apiKey: "REPLACE_ME_API_KEY",
        experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
        experienceVersion: "PRODUCTION",
        locale: "en", // e.g. en
        businessId: "REPLACE_ME_BUSINESS_ID",
        templateBundle: TemplateBundle.default,
        onReady: function () {
          ANSWERS.addComponent("SearchBar", {
            container: ".search_form",
            useForm: false, // REQUIRED FOR ASP.NET SITES
            name: "search-bar", //Must be unique for every search bar on the same page
            redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
            placeholderText: "Search...",
          });
        },
      });
    }
  </script>
  <script
    src="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>

RequireJS or Other Script Loader

The library also includes a non-UMD bundle type for the SDK’s templates; it’s an IIFE bundle that will put the TemplateBundle object into the global window. Because this bundle does not attempt to use AMD bundling, it should not conflict with RequireJS (or similar) implementations of AMD. You are also able to import the bundle however you manage dependencies in your environment.

To use this bundle, follow the instructions as outlined above , but reference the IIFE template bundle and templateBundle: TemplateBundle instead of templateBundle: TemplateBundle.default. This can either be specified as a script tag (below), or using your preferred script loader.

Example

<head>
  <!-- Other stuff in the head here -->
  <link
    rel="stylesheet"
    type="text/css"
    href="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.css"
  />
  <!-- New template bundle, can be a script tag or imported through your preferred require.js method -->
  <script src="https://assets.sitescdn.net/answers-search-bar/v1.6/answerstemplates-iife.compiled.min.js"></script>

  <script>
    function initAnswers() {
      ANSWERS.init({
        apiKey: "REPLACE_ME_API_KEY",
        experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
        experienceVersion: "PRODUCTION",
        locale: "en", // e.g. en
        businessId: "REPLACE_ME_BUSINESS_ID",
        templateBundle: TemplateBundle,
        onReady: function () {
          ANSWERS.addComponent("SearchBar", {
            container: ".search_form",
            name: "search-bar", //Must be unique for every search bar on the same page
            redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
            placeholderText: "Search...",
          });
        },
      });
    }
  </script>
  <script
    src="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>
Feedback