Step 1: Initialize the Library

Instructions

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.

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,
        cloudRegion: "us",
        cloudChoice: "multi",
        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.

Optional Configurations

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

Host data in the EU cloud region
Use the staging version of your search experience
Polyfilled Site
ASP.NET Integration
RequireJS or Other Script Loader

Hosting Data in the EU Cloud Region

By default, your search experience and data is stored in the US cloud region. If you want to set it to the EU instead, you’ll have to make some changes to the code snippet above:

Change the cloudRegion value to "eu".
Optionally set the cloudChoice value to "gcp". While all serving in the EU only uses GCP, setting this value as "gcp" will direct analytics events to a GCP-only events URL.
Replace all references to the URL https://assets.sitescdn.net with https://assets.eu.sitescdn.net.

The updated code snippet will look like the following:

<head>
  <!-- Other stuff in the head here -->
  <link
    rel="stylesheet"
    type="text/css"
    href="https://assets.eu.sitescdn.net/answers-search-bar/v1.6/answers.css"
  />
  <script src="https://assets.eu.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,
        cloudRegion: "eu",
        cloudChoice: "gcp",
        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.eu.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>

Preview the Staging Version of Search

In order to use or preview the staging version of Search with your search bar, 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.

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

<% elem.innerText %>