loading

Add Search Bar - Header Option

What You’ll Learn

In this section, you will learn:

  • Learn how to create a header search bar
  • Learn how to style a header search bar
  • How to add a header search bar to your Page Builder template

Search Bar & Search Results

If you choose to add a header search bar to your page, your user will conduct a query and be redirected a standalone search results page (see unit 6). 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 the next unit.

This step is typically handled by a developer. The developer guidance for creating and styling a search bar can be found here. In some cases, an Admin may create and style the search bar (this is an integration strategy where an Admin uses Yext’s Page Builder to stand up an Answers search result page). In fact, you will do this in your module challenge!

There are three steps needed to add and style a search bar on your page:

  1. Initialize the library
  2. Place the search bar
  3. Style the search bar

Initialize the library

The search bar will utilize the Answers JS library. To do so, the library will need to exist on every page that has a search bar. If the search bar will be placed in the header (or already lives in the header), this means the code snippet below will live on every page on the site.

<head>
  <!-- Other stuff in the head here -->
  <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",
        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",
            promptHeader: "You can ask:",
            placeholderText: "Search...",
          });
        },
      });
    }
  </script>
  <script
    src="https://assets.sitescdn.net/answers/v0.13.2/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>

As noted above, add this code snippet into the on each page that has a search bar. Be sure to replace all parameters in the code snippet that are prefixed with REPLACE_ME. These parameters include the following:

  • experienceKey - Experience Key (provided by a Yext Admin)
  • businessId - Business ID (provided by a Yext Admin)
  • apiKey - Live API Key (provided by a Yext Admin)
  • locale - Locale of the experience (provided by a Yext Admin)
  • redirectUrl - This is the url of the search results page (set to experience URL for Subdomain path - i.e. answers.[[clientdomain]].com)

You can also configure the text labels (placeholderText, searchText, promptHeader) in the addComponent call above to fit your needs.

Place the search bar

You’ll then need to place the search bar on the page. If a search bar already exists, this element should replace the existing search bar entirely. This search bar component comes preconfigured with autocomplete and other features. Add the div (in the code editor below) where you’d like the search bar to appear:

<div class="search_form"></div>

Note: The container property in the init call above (.search_form) matches the class of the div search_form. These need to match each other.

Style the search bar

There are two ways to style this search bar. You can either start with the default Yext styling or start with no styling. We recommend starting with Yext styling and customizing from there. To use Yext styling, import the Yext CSS with the code snippet below. You should put this in the tag of every page that has a search bar:

<link
  rel="stylesheet"
  type="text/css"
  href="https://assets.sitescdn.net/answers/vX.XX.X/answers.css"
/>

The “vX.XX.X” parameter above should be updated based on the Answers library version that the experience is utilizing.

The most important CSS classes used for styling can be found below:

  • .yxt-SearchBar-container - Controls border and radius of the container
  • .yxt-SearchBar-input - The input in the search bar
  • .yxt-SearchBar-button - Search Button
  • .yxt-SearchBar-clear - Clear Button
  • .yxt-SearchBar-form - Form
  • .yxt-AutoComplete-wrapper - Wrapper around autocomplete
  • .yxt-AutoComplete-option - Autocomplete option
  • .yxt-AutoComplete-option.yxt-selected - Selected autocomplete (using keyboard)

Adding a Second Search Bar

If you want to add a second search bar to the page (potentially one in the header and one on the homepage) then you must use a unique name and container for each one. You can find an example of this in our Developer documentation here.

ASP.NET Integration

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. You can find an example of this in our Developer documentation here.

Adding a Search Bar with Page Builder

There is also the option to add a search bar to your Page Builder template through the Yext Pages product. There are two modules within Page Builder that will directly integrate with your Search Configuration. The only pre-requisite to using the built-in search bar modules is that you’ve created and established your Search Configuration and have a redirectUrl to assign.

There are currently two options for integrating a search bar into Page Builder, “Answers Search Bar” and “Navigation Bar with Answers Search Bar”:

search bar options

Answers Search Bar

This module inserts a full width search bar into your template. We recommend placing the search bar at the top of the page below your header. In order to set up the search bar, all you’ll need to do is add the module, select your Experience, and insert a redirectUrl into the “Search Results Page URL” field.

search bar full width

Navigation Bar with Answers Search Bar

This module inserts a search bar within the nav. In order to set up the search bar, all you’ll need to do is add the module, select your Experience, and insert a redirectUrl into the “Search Results Page URL” field.

search bar nav

unit Quiz
+20 points
    Error Success Question 1 of 2

    Does the script to initialize the Answers library need to be dropped on every page that has the search bar?

    Error Success Question 2 of 2

    Can a business apply their own styling to the search bar after following these instructions?

    Way to go, you passed! 🏁

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect