loading

Add Search Bar - Header Option| Hitchhikers Platform

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

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 (“Winter ‘21: Answers Snippet Generator (Early Access)“) in your Production account, you can fill out this form here.

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

To make the process quick and seamless for adding a search bar, we’ve added a new Answers Snippet Generator to the Yext platform that will automatically populate the fields below with the variables from your account. To generate the snippet, navigate to your Yext account > Answers > Experiences > Experience Details page and select “Integrate Answers on Your Site”.

answers snippet generator

Follow the prompts (the first step provides the code snippet for creating a search results page which you’ll do in Unit 6 of this module) to fill in the Search Results URL. The snippet provided in the Yext platform will include all three steps below of initializing the library, placing, and styling the search bar.

answers snippet generator search bar code

We will walk through here what each part of the process entails.

Initialize the library

The search bar will utilize a version of the Answers Search UI SDK. 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 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>

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. If using the in-platform snippet generator, these fields will already be populated with your account information. These parameters include the following:

  • experienceKey - Found in the Yext platform, under Answers > Experiences tab
  • businessId - Found both in the URL and in the Yext platform, under Account Settings > Account ID (to find Account Settings, hover over your username in the top right section the Yext platform)
  • apiKey - Found in the Yext platform, under Answers > Experiences tab
  • locale - For English sites, this will always be 'en'
  • redirectUrl - This is the url of the search results page, where a user will and after conducting a search (set to experience URL for Subdomain path - i.e. answers.[[clientdomain]].com)
  • JS version - You can find the latest version number (ex v1.0) in this changelog

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>

If you’re using the Answers Snippet Generator in the Yext platform, you will copy this search bar markup in the Add a Searchbar snippet step.

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. If you’ve copied the Add a Searchbar snippet from the Yext platform then you’ll notice the stylesheet already present. Otherwise, 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-search-bar/vX.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 Answers Integration documentation here.

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

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 Integration 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
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    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?

    You're a star! ⭐️

    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
Splash Loading