Step 2: Place the Search Bar

Next, you will want to place the search bar DOM element where you want the search bar located. This element should replace your existing search bar implementation. This search bar comes pre-wired with autocomplete and other features. Add the following div swhere you want the search bar located.

If you’re using the Search snippet generator in the Yext platform, you will copy this search bar markup in the Add a Search Bar snippet step.

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

This new search bar should entirely replace the old one. For example, if your navigation bar looks something like this today:

<nav>
  <!-- OTHER ELEMENTS HERE -->
  <div>
    <input placeholder="Search Here!" />
  </div>
</nav>

You should update it to look like this:

<nav>
  <!-- OTHER ELEMENTS HERE -->
  <div class="search_form"></div>
</nav>

Note

Make sure search is featured prominently on the website. We recommend putting it in the header and making sure it is pre-expanded with a useful placeholder text (e.g. Search for Locations, Events or FAQs). If the placeholder text is just Search, or just an icon, users won’t know what they can search for.

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. Here is an example of the javascript init:

ANSWERS.addComponent("SearchBar", {
  container: ".search-bar-container",
  name: "search-bar",
  redirectUrl: "https://www.domain.com/search-results",
});

ANSWERS.addComponent("SearchBar", {
  container: ".search-bar-container-2",
  name: "search-bar-2",
  redirectUrl: "https://www.domain.com/search-results",
});

<% elem.innerText %>