Introduction | Yext Hitchhikers Platform

This guide will walk you through how to get started with Search UI, a JavaScript SDK for building great search experiences.

You’ll learn the basics by adding Search to a local coffee shop. Let’s get started with an example HTML file.

Copy and paste the following into an HTML file and view it in your browser, or use Codesandbox .

<!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>
  <!-- Answers CSS-->
  <link rel="stylesheet" type="text/css" href="https://assets.sitescdn.net/answers/v1.17/answers.css" />

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

  <!-- Answers 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>
</body>

<script>
  ANSWERS.init({
    apiKey: "3517add824e992916861b76e456724d9",  //sample test experience
    experienceKey: "answers-js-docs", //sample test experience
    businessId: "3215760",  //sample test experience
    experienceVersion: "PRODUCTION",
    cloudRegion: "us",
    cloudChoice: "multi",
    onReady: function () {
      // init components
      this.addComponent("SearchBar", {
          container: ".search-bar",
          placeholderText: "Questions? I got Answers"
      });
      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>
</html>

Hosting Data in the EU Cloud Region

By default, your search experience and data is stored in the US cloud region. If you want to set it to the EU instead, you’ll have to make some changes to the code snippet above:

Change the cloudRegion value to "eu".
Optionally set the cloudChoice value to "gcp". While all serving in the EU only uses GCP, setting this value as "gcp" will direct analytics events to a GCP-only events URL.
Replace all references to the URL https://assets.sitescdn.net with https://assets.eu.sitescdn.net.

The updated code snippet will look like the following:

<!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>
  <!-- Answers CSS-->
  <link rel="stylesheet" type="text/css" href="https://assets.eu.sitescdn.net/answers/v1.17/answers.css" />

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

  <!-- Answers JS-->
  <script src="https://assets.eu.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>
</body>

<script>
  ANSWERS.init({
    apiKey: "3517add824e992916861b76e456724d9",  //sample test experience
    experienceKey: "answers-js-docs", //sample test experience
    businessId: "3215760",  //sample test experience
    experienceVersion: "PRODUCTION",
    cloudRegion: "eu",
    cloudChoice: "gcp",
    onReady: function () {
      // init components
      this.addComponent("SearchBar", {
          container: ".search-bar",
          placeholderText: "Questions? I got Answers"
      });
      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>
</html>

<% elem.innerText %>