Step 4: Initialize the Library

Lastly, we need to initialize the Javascript library with a test apiKey, experienceKey and businessId. We’ll set our experienceVersion to PRODUCTION and add the following <script> to the bottom of our <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"
    });
    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>

This script will update our HTML <div>s with components from Yext. We recommend using async defer with these Yext components for performance. Adding in the following <script> at the end of the file will tell the page to load in the Search UI after everything else is already loaded.

<script
  src="https://assets.sitescdn.net/answers/v1.17/answers.min.js"
  onload="ANSWERS.domReady(initAnswers)"
  async
  defer
></script>

Our code now looks like the following and is a functional search experience!

<!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>
  function initAnswers() {
    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"
        });
        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>

<script
  src="https://assets.sitescdn.net/answers/v1.17/answers.min.js"
  onload="ANSWERS.domReady(initAnswers)"
  async
  defer
></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>
  function initAnswers() {
    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"
        });
        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>

<script
  src="https://assets.eu.sitescdn.net/answers/v1.17/answers.min.js"
  onload="ANSWERS.domReady(initAnswers)"
  async
  defer
></script>

</html>

<% elem.innerText %>