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

Search Results & Analytics

If you choose to add a header search bar to your page, your user will conduct a query and be redirected to 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.

When analyzing your search analytics, you may be curious about search trends depending on which site the search lives on if you have multiple sources or pages where the search lives. In Report Builder, you’ll be able to dimension and filter by integration source, which will show “STANDARD” or “OVERLAY” depending on what kind of search bar it is. You will also be able to specify a custom source for when you have multiple search bars on different sites.

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 a search results 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 Search 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 Search > All Search Experiences > Your Experience > Experience Details and select “Integrate Search 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.

1. Initialize the library

The search bar will utilize a version of the 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...",
          });
        },
        querySource: "REPLACE_ME_QUERY_SOURCE",
      });
    }
  </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 Search > All Search Experiences > Your Experience > Experience Details
  • businessId - Found both in the URL and in the Yext platform, under Account Settings > Personal Settings > Account ID (to find Account Settings, click the Account Details icon at the bottom of the navigation bar)
  • apiKey - Found in the Yext platform, under Search > All Search Experiences > Your Experience > Experience Details
  • 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. search.[[clientdomain]].com)
  • JS version - You can find the latest version number (ex v1.0) in this changelog
  • querySource - This is an optional property to set a custom integration source for your site, in the event you have multiple search bars that lead to the same search experience, so that you can differentiate the search bars in your Analytics. If you do not wish to set this property, remove this line and it will default to “STANDARD”.

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

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 Search 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.

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 Search 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 Search 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 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. 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, “Yext Search Bar” and “Navigation Bar with Yext Search Bar”:

search bar options

Yext 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 Yext 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 3

    Which pages does the script to initialize the Search library need to be added to?

    Error Success Question 2 of 3

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

    Error Success Question 3 of 3

    What property can you use in the integration to specify the integration source searches from a particular searchbar are coming from?

    You're out of this world! 🌎

    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
Feedback