loading

Step 1: Initialize the Library

light bulb
New Release Feature
This unit references the new Answers Snippet Generator from our September ‘21 Monthly release. Test out the new feature in Hitchhikers and Playground Accounts. To turn on this beta feature (“Fall ‘21: Answers Snippet Generator (Early Access)“) in your Production account, you can fill out this form here.

Overview

To add the search bar to a page, we’ll use a version of the Answers 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.

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

First, add the searchbar-only version of the Answers Search UI SDK and CSS to the page, and then initialize Answers. 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 on every page that has a search bar. Make sure you replace any of the properties you collected above 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.

Version 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 Answers 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 Answers JS Library uses a <form> around the search bar to maximize accessibility. If you are trying to use Answers 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>
Splash Loading