Back
Add Search Bar - Header Option | Yext 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.
Creating and Styling a Search Bar
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:
- Initialize the library
- Place the search bar
- 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”.
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.
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 DetailsbusinessId- 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 Detailslocale- 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 (exv1.0) in this changelogquerySource- 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.
2. 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 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.
3. 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 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”:
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.
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.
Daily Quiz Streak: 0
Quiz Accuracy Streak: 0
Question 1 of 3
Which pages does the script to initialize the Search library need to be added to?
Question 2 of 3
Can a business apply their own styling to the search bar after following these instructions?
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?
Soon you'll be your brand's hero! 🎓
