Add Search to Your Site | Yext Hitchhikers Platform

What You’ll Learn

By the end of this unit, you will be able to:

  • List the high level steps for adding a search bar to a web page
  • Navigate to and utilize the snippet generator to add a search bar
  • Collect the four inputs required to add an overlay module to a web page

Overview

After you stand up the results page, you are ready to have users interact with Search from the home page (or any other page) of your site! There are two ways that users can access your search results page:

  1. Search Bar - Users input a query into a search bar on your web page which redirects them to your Search results page.
  2. Overlay Module - Users view and utilize the components of search like the search results, search bar, and prompts within an expandable module on the corner of your webpage.

You will learn more about each throughout this unit!

If you choose to add a search bar to your page, your user will conduct a query and be redirected to a standalone search results page.

This step is typically handled by a developer. The developer guidance for creating and styling a search bar can be found in the Adding a Search Bar guide. 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

Search Snippet Generator

The Search snippet generator makes the process quick and seamless for adding a search bar (as it also does for setting up the results page from the previous unit!). You can find this tool by navigating to Search > [[Your Experience]] > Experience Details and clicking the “Integration” section.

Integration module to open Snippet Generator

Once you select your site and integration type, It will automatically populate the required variables from your account. The snippet provided in the Yext platform will also include all three steps of initializing the library, placing, and styling the search bar. This is currently only available for the static search bar, and not the overlay option which you will read more about late on in this unit.

Snippet Generator Modal with code to add Search Bar

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

Add Module with Search Bar options list in Page Builder

There are currently two module options for integrating a search bar into Page Builder:

  • 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. Search Bar only module in Page Builder
  • Navigation Bar with Yext Search Bar - This module inserts a search bar within the nav. Search Bar with Navigation module in Page Builder

In order to set up either of these options, all you’ll need to do is add the module, select your Experience, and insert a redirectUrl into the “Search Results Page URL” field.

Overlay Module

So far, we’ve discussed standing up a separate results page to display your Search experience. But what if you want the search experience to be easily accessible on all pages across your site? You can add the search bar and search results experience within a single, simple overlay module.

Overlay Demo for Financial Services brand

With the Search overlay, you’ll be able to add a module to any page of your choosing that allows users to search and view results from within the module itself. This means a user can still view and interact with your web page (may it be a product details page or an outline of service offerings) while still utilizing Search with any questions they have about your brand.

You can read the full overlay integration documentation in the Adding an Overlay Module guide.

Components of Overlay Module

To establish common terminology, we’ll define the components of the overlay as follows:

  • Overlay Button: The button that triggers the launch of the overlay. You can either use our built-in button, or create your own.

Blue overlay button with white icon

  • Overlay Panel: The initial panel that has query suggestions displaying.

Hardcoded prompts list in overlay

  • Search Results - No Page: When results display in-line. Exposed when someone conducts a search within the overlay.

Inline results page within overlay

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 4

    True or False: A search bar is already fully styled and can't be customized.

    Error Success Question 2 of 4

    What tool can you utilize to help add a search bar to your site?

    Error Success Question 3 of 4

    What is the Search overlay?

    Error Success Question 4 of 4

    What do you need in order to add the overlay that redirects to a standalone results page?

    A Hitchhiker in the making! 🔥

    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