Step 1: Initialize the Library

Overview

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. You also have the option to add our overlay search bar option, which is discussed in Step 4.

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.

Note

The code below uses v1.0 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.0/answers.css"
  />
  <script src="https://assets.sitescdn.net/answers-search-bar/v1.0/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.0/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.

Additional Information

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.0/answers-modern.min.js instead of https://assets.sitescdn.net/answers-search-bar/v1.0/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.0/answers.css"
  />
  <script src="https://assets.sitescdn.net/answers-search-bar/v1.0/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.0/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.0/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.0/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.0/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>

Feedback

<% elem.innerText %>