Get Started | Yext Hitchhikers Platform

Search UI is a JavaScript SDK that helps you build search experiences on top of the Yext Search product.

Note

These docs reference version 1.8.0. For older versions, please visit our Github repository and select the desired version’s tag.

Quick Start

Looking to quickly try out an Search experience? The following example uses a basic test account; if you’d like to use your own, replace apiKey, experienceKey and businessId with your own values.

Note

If you are hosting data in the EU cloud region, update the code snippets based on the callouts in the Hosting Data in the EU Cloud Region section.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link
  rel="stylesheet"
  type="text/css"
  href="https://assets.sitescdn.net/answers/v1.17/answers.css"
/>

JS

Next, add the JS lib. Place the following <script> in your <head> tag.

<script src="https://assets.sitescdn.net/answers/v1.17/answers.min.js"></script>

HTML

Next, you’ll need to place some <div>s in in your page’s <body>. These <div>s have class names that match those specified in the component configuration, and is where the library will place the components.

<div class="answers-layout">
  <div class="search-bar"></div>
  <div class="spell-check"></div>
  <div class="direct-answer"></div>
  <div class="universal-results"></div>
  <div class="location-bias"></div>
</div>

Initialize the Library

Last but not least, initialize the JS lib with an apiKey, experienceKey and businessId, (we’ve also added an explicit exprienceVersion and information on verticalPages), and add the components to the page:

<script>
ANSWERS.init({
  apiKey: "3517add824e992916861b76e456724d9",  //sample test experience
  experienceKey: "answers-js-docs", //sample test experience
  businessId: "3215760",  //sample test experience
  experienceVersion: "PRODUCTION",
  onReady: function () {
      // init components
      this.addComponent("SearchBar", {
      container: ".search-bar"
      });
      this.addComponent("SpellCheck", {
      container: ".spell-check"
      });
      this.addComponent("DirectAnswer", {
      container: ".direct-answer"
      });
      this.addComponent("UniversalResults", {
      container: ".universal-results"
      });
      this.addComponent("LocationBias", {
      container: ".location-bias"
      });
  }
});
</script>

Starter Template

Put it all together, your pages should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Search Test Experience</title>
    <!-- Search CSS-->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://assets.sitescdn.net/answers/v1.17/answers.css"
    />

    <!-- Search Layout styling -->
    <style>
      .answers-layout {
        max-width: 50rem;
        margin: auto;
      }
    </style>

    <!-- Search JS-->
    <script src="https://assets.sitescdn.net/answers/v1.17/answers.min.js"></script>
  </head>
  <body>
    <div class="answers-layout">
      <div class="search-bar"></div>
      <div class="spell-check"></div>
      <div class="direct-answer"></div>
      <div class="universal-results"></div>
      <div class="location-bias"></div>
    </div>

    <script>
      ANSWERS.init({
        apiKey: "3517add824e992916861b76e456724d9",  //sample test experience
        experienceKey: "answers-js-docs",  //sample test experience
        businessId: "3215760",  //sample test experience
        experienceVersion: "PRODUCTION",
        onReady: function () {
          // init components
          this.addComponent("SearchBar", {
            container: ".search-bar"
          });
          this.addComponent("SpellCheck", {
            container: ".spell-check"
          });
          this.addComponent("DirectAnswer", {
            container: ".direct-answer"
          });
          this.addComponent("UniversalResults", {
            container: ".universal-results"
          });
          this.addComponent("LocationBias", {
            container: ".location-bias"
          });
        }
      });
    </script>
  </body>
</html>

Here is a fully working example:

Now you’re up and running with a basic universal results page ! Head to the next section to learn more about how to use the Search UI library.

Back

< LocationBias (Deprecated)

Search Initialization >

Feedback

<% elem.innerText %>