Add Search to Your Site – Yext Help

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

Search Bar — Users input a query into a search bar which redirects them to your Search results page.
Overlay Module — Users view and interact with search results, the search bar, and prompts within an expandable module on the corner of your webpage.

Search Bar

If you choose to add a search bar to your page, users will conduct a query and be redirected to a standalone search results page. Yext recommends adding a prominent search bar to the header and making sure it is pre-expanded with useful placeholder text so users know what they can search for.

This step is typically handled by a developer. There are three steps needed to add and style a search bar.

Before You Begin

If you are not using the Search snippet generator, you'll need the following:

Property	Description
`experienceKey`	Experience Key
`businessId`	Business ID
`apiKey`	Content Delivery API Key
`locale`	Locale of the experience
`redirectUrl`	URL of the search results page
`JS version`	The most recent version of the Search JavaScript library
`cloudRegion`	Optional. Set to `"eu"` if you want data hosted in the EU. Defaults to `"us"`. Requires Theme v1.31+.
`cloudChoice`	Optional. The cloud provider: `"multi"` (default) or `"gcp"`. Requires Theme v1.34.3+.
`querySource`	Optional. Set a custom integration source if you have multiple search bars. Defaults to `"STANDARD"` or `"OVERLAY"`.

Integrations Embed Code (Snippet Generator)

To skip manual setup, the Integrations screen generates pre-populated code snippets from your account.

Navigate to Search > [Your Experience] > Integrations and select "Embed Code."

Click the Search Bar tab, fill in your search results URL, and copy the snippet. It includes all three steps — initializing the library, placing, and styling the search bar — already populated with your account variables. This is currently only available for the static search bar.

Step 1: Initialize the Library

Note: These instructions reference a searchbar-only version of the Search UI SDK, which contains only the necessary JS for the search bar component — optimized for page speed.

Add the searchbar-only version of the Search UI SDK and CSS to the <head> on every page that has a search bar. Replace all properties prefixed with REPLACE_ME with your account values.

Note: The code below uses v1.6. Before deploying, always check the Search Bar Only changelog for the latest version.

<head>
  <!-- Other stuff in the head here -->
  <link
    rel="stylesheet"
    type="text/css"
    href="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.css"
  />
  <script src="https://assets.sitescdn.net/answers-search-bar/v1.6/answerstemplates.compiled.min.js"></script>
  <script>
    function initAnswers() {
      ANSWERS.init({
        apiKey: "REPLACE_ME_API_KEY",
        experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
        experienceVersion: "PRODUCTION",
        locale: "en",
        businessId: "REPLACE_ME_BUSINESS_ID",
        templateBundle: TemplateBundle.default,
        cloudRegion: "us",
        cloudChoice: "multi",
        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.6/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>

Optional Configurations

Hosting Data in the EU Cloud Region

Change cloudRegion to "eu".
Optionally set cloudChoice to "gcp" to direct analytics events to a GCP-only events URL.
Replace all references to https://assets.sitescdn.net with https://assets.eu.sitescdn.net.

<head>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://assets.eu.sitescdn.net/answers-search-bar/v1.6/answers.css"
  />
  <script src="https://assets.eu.sitescdn.net/answers-search-bar/v1.6/answerstemplates.compiled.min.js"></script>
  <script>
    function initAnswers() {
      ANSWERS.init({
        apiKey: "REPLACE_ME_API_KEY",
        experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
        experienceVersion: "PRODUCTION",
        locale: "en",
        businessId: "REPLACE_ME_BUSINESS_ID",
        templateBundle: TemplateBundle.default,
        cloudRegion: "eu",
        cloudChoice: "gcp",
        onReady: function () {
          ANSWERS.addComponent("SearchBar", {
            container: ".search_form",
            name: "search-bar",
            redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
            placeholderText: "Search...",
          });
        },
      });
    }
  </script>
  <script
    src="https://assets.eu.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>

Preview Staging Version

Update experienceVersion to "STAGING" when initializing the library.

Sandbox Account

Prepend "sandbox" to the apiKey so it becomes sandbox-exampleapikey123.

Polyfilled Site

If you're already polyfilling your site or Internet Explorer support is not a priority, reference answers-modern.min.js instead of answers.min.js for better page performance.

ASP.NET Integration

ASP.NET sites wrap the entire site in a <form> element. Set useForm: false on the SearchBar component:

ANSWERS.addComponent("SearchBar", {
  container: ".search_form",
  useForm: false, // REQUIRED FOR ASP.NET SITES
  name: "search-bar",
  redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
  placeholderText: "Search...",
});

RequireJS or Other Script Loader

Use the IIFE template bundle and reference templateBundle: TemplateBundle (not TemplateBundle.default):

<script src="https://assets.sitescdn.net/answers-search-bar/v1.6/answerstemplates-iife.compiled.min.js"></script>

Step 2: Place the Search Bar

Add the following div where you want the search bar located. This should entirely replace your existing search bar implementation.

<div class="search_form"></div>

Note: The container property in the init call (.search_form) must match the class of this div.

For example, if your navigation bar looks like this today:

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

Update it to:

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

Note: Make sure Search is featured prominently. Yext recommends putting it in the header and making sure it is pre-expanded with useful placeholder text (e.g., "Search for Locations, Events or FAQs"). If the placeholder is just "Search" or just an icon, users won't know what they can search for.

Adding a Second Search Bar

To add a second search bar (e.g., one in the header and one on the homepage), use a unique name and container for each:

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",
});

Step 3: Style the Search Bar

The Yext Search Bar is designed to look great out of the box. You can further style it using these CSS classes:

Class	Details
`.yxt-SearchBar-container`	Controls border and radius of the container
`.yxt-SearchBar-input`	The input itself
`.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 (keyboard navigation)

Example: Color Customization

.search-bar-container-2 .yxt-SearchBar-container {
  border-radius: 0px;
  border: 1px solid black;
}
.search-bar-container-2 .yxt-SearchBar-button,
.search-bar-container-2 .yxt-SearchBar-clear,
.search-bar-container-2 .yxt-SearchBar-form,
.search-bar-container-2 .yxt-AutoComplete-wrapper {
  background-color: lightpink;
}
.search-bar-container-2 .yxt-AutoComplete:before {
  background-color: black;
}
.search-bar-container-2 .yxt-AutoComplete-option.yxt-selected,
.search-bar-container-2 .yxt-AutoComplete-option:hover {
  background-color: darkorchid;
  color: white;
}

Example: Rounded Edges

.search-bar-container-3 .yxt-SearchBar-container {
  border-radius: 28px;
  border: 1px solid black;
  box-shadow: 1px 1px 1px black;
  color: white;
}
.search-bar-container-3 .yxt-SearchBar-button,
.search-bar-container-3 .yxt-SearchBar-clear,
.search-bar-container-3 .yxt-SearchBar-form,
.search-bar-container-3 .yxt-AutoComplete-wrapper {
  background-color: black;
}
.search-bar-container-3 .yxt-AutoComplete-option,
.search-bar-container-3 .yxt-SearchBar-input {
  color: white;
}
.search-bar-container-3 .yxt-AutoComplete:before {
  background-color: black;
}
.search-bar-container-3 .yxt-AutoComplete-option.yxt-selected,
.search-bar-container-3 .yxt-AutoComplete-option:hover {
  background-color: darkblue;
  color: white;
}
.search-bar-container-3 .yxt-SearchBar-clear,
.search-bar-container-3 svg {
  color: white;
  fill: white;
}
.search-bar-container-3 path {
  stroke: white;
}

Live working examples: https://codesandbox.io/embed/search-bar-styling-mh542?codemirror=1&fontsize=13&hidenavigation=1&theme=dark&view=preview

Updating the Search Bar Icon

To replace the Yext logo with a different icon, add one of the following to the addComponent call:

// Use a built-in icon
ANSWERS.addComponent("SearchBar", {
  container: ".search_form",
  name: "search-bar",
  redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
  placeholderText: "Search...",
  submitIcon: 'magnifying_glass'
});

// Use a custom icon URL
ANSWERS.addComponent("SearchBar", {
  container: ".search_form",
  name: "search-bar",
  redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
  placeholderText: "Search...",
  customIconUrl: "static/assets/images/icon-arrow-right.svg"
});

See the Logo Styling reference doc for more options.

Typed Animation

To encourage more users to search, you can show animated placeholder text that cycles through prompt suggestions using Typed.js. This pulls options from the /autocomplete endpoint using axios.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Search bar with Typed</title>
    <link rel="stylesheet" type="text/css"
      href="https://assets.sitescdn.net/answers/v1.5/answers.css" />
    <script src="https://assets.sitescdn.net/answers/v1.5/answers.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div class="search-bar-container"></div>
    <script>
      const apiKey = "REPLACE_ME_API_KEY";
      const experienceKey = "REPLACE_ME_EXPERIENCE_KEY";
      const experienceVersion = "PRODUCTION";
      const businessId = "REPLACE_ME_BUSINESS_ID";
      const locale = "en";
      const cloudRegion = "us";
      const cloudChoice = "multi";
      ANSWERS.init({
        apiKey, experienceKey, businessId, experienceVersion, locale, cloudRegion, cloudChoice,
        onReady: function() {
          this.addComponent("SearchBar", { container: ".search-bar-container" });

          var url = 'https://liveapi-cached.yext.com/v2/accounts/me/answers/autocomplete';
          url += '?v=20190101&api_key=' + apiKey + '&sessionTrackingEnabled=false';
          url += '&experienceKey=' + experienceKey + '&input=&version=' + experienceVersion + '&locale=' + locale;

          axios.get(url).then(function(response) {
            const strings = response.data.response.results.map(r => r.value);
            var typed = new Typed(".js-yext-query", {
              strings, showCursor: true, cursorChar: "|",
              typeSpeed: 45, backSpeed: 20, smartBackspace: true,
              loop: true, startDelay: 500, backDelay: 2000, attr: "placeholder",
            });
          });
        },
      });
    </script>
  </body>
</html>

For the EU cloud region, replace the autocomplete URL with https://cdn-cached.eu.yextapis.com/v2/accounts/me/answers/autocomplete and set cloudRegion: "eu" and cloudChoice: "gcp".

For a sandbox account, use https://liveapi-sandbox.yext.com/v2/accounts/me/answers/autocomplete and pass the API key without the "sandbox" prefix in the URL (though you do still prepend "sandbox" when initializing the library).

Live example: https://codesandbox.io/embed/quizzical-grass-sluqj?codemirror=1&fontsize=13&hidenavigation=1&theme=dark&view=preview

Search Bar on Page Builder

You can also add a search bar to your Page Builder template through Yext Pages. The only prerequisite is a created and established Search configuration.

There are two module options:

Yext Search Bar — Inserts a full-width search bar into your template. Yext recommends placing it at the top of the page below your header.
Navigation Bar with Yext Search Bar — Inserts a search bar within the nav.

To set up either option, add the module, select your Experience, and insert a redirectUrl into the "Search Results Page URL" field.

Overlay Module

The overlay module allows you to add Search to any page so users can search and view results without leaving the current page. Users can still view and interact with your web page while using Search.

You can present Search two ways within the overlay:

Inline within the overlay panel — Results display inside the module itself.
Redirect URL — Links the user out to a separate search results page.

Components of the Overlay Module

Component	Description
Overlay Button	The button that triggers the launch of the overlay. Use the built-in button or create your own.
Overlay Panel	The initial panel that displays query suggestions.
Search Results (No Page)	Inline results — shown when someone conducts a search within the overlay.

Option 1: Add Overlay with Results Inline

With this option, search results display inside the overlay panel — no separate results page needed.

You'll need:

Color(s) for the button and overlay panel background and text.
A panel heading and description.
Your apiKey, experienceKey, businessId, and locale from your Yext account.
Your experiencePath, which will be provided by your Yext Administrator.

Add the following to any page where you want the overlay:

<html>
<head>
  <!-- head stuff here -->
</head>
<body>
  <!-- other body stuff here -->

  <!-- begin Search Overlay Script Tag -->
  <script type="text/javascript" async
    src="REPLACE_ME_EXPERIENCE_PATH/overlay.js"></script>

  <script>
  window.YxtAnswersOverlaySettings = {
    apiKey: "REPLACE_ME_API_KEY",
    experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
    businessId: "REPLACE_ME_BUSINESS_ID",
    locale: "en",
    experiencePath: "REPLACE_ME_EXPERIENCE_PATH",
    button: {
      alignment: 'right',
      color: {
        background: '#808080', // update with your desired color
        text: '#FFFFFF'
      },
    },
    panel: {
      header: "We're here to help.", // update with your desired header
      subtitle: "Find frequently asked questions and resources.", // update with your desired subtitle
      color: {
        background: '#808080', // update with your desired color
        text: '#FFFFFF'
      },
    },
  };
  </script>
  <!-- end Search Overlay Script Tag -->
</body>
</html>

Option 2: Add Overlay with Redirect URL

With this option, searches in the overlay panel redirect the user to a full search results page.

You'll need:

Color(s) for the button and overlay panel background and text.
A panel heading and description.
Hardcoded prompts.
Your Search Results Page URL (domain) — set this up first using Phase 3: Stand Up the Search Results Page.
Your experiencePath, which will be provided by your Yext Administrator.

<html>
<head>
  <!-- head stuff here -->
</head>
<body>
  <!-- other body stuff here -->

  <!-- begin Search Overlay Script Tag -->
  <script type="text/javascript" async
    src="REPLACE_ME_SEARCH_RESULTS_URL/overlay.js"></script>

  <script>
  window.YxtAnswersOverlaySettings = {
    domain: "REPLACE_ME_SEARCH_RESULTS_URL",
    experiencePath: "REPLACE_ME_EXPERIENCE_PATH",
    button: {
      alignment: 'right',
      color: {
        background: '#808080', // update with your desired colors
        text: '#FFFFFF'
      },
    },
    panel: {
      header: "We're here to help.", // update with your desired header
      subtitle: "Find frequently asked questions and resources.", // update with your desired subtitle
      color: {
        background: '#808080', // update with your desired colors
        text: '#FFFFFF'
      },
    },
    prompts: [ // update with your desired prompts
      {
        text: "Locations near me",
        url: "REPLACE_ME_SEARCH_RESULTS_URL?query=Locations near me",
        target: "_top"
      },
      {
        text: "Do you have gift cards",
        url: "REPLACE_ME_SEARCH_RESULTS_URL?query=Do you have gift cards",
        target: "_top"
      },
      {
        text: "Operations & COVID-19",
        url: "REPLACE_ME_SEARCH_RESULTS_URL?query=Operations & COVID-19",
        target: "_top"
      },
      {
        text: "How do I log in?",
        url: "REPLACE_ME_SEARCH_RESULTS_URL?query=How do I log in?",
        target: "_top"
      },
    ]
  };
  </script>
  <!-- end Search Overlay Script Tag -->
</body>
</html>