Step 5: Customizing the Experience

Our search bar is looking a bit empty and could use some placeholder text. Conveniently enough, the property is called placeholderText. Let’s update the property in our SearchBar component:

this.addComponent("SearchBar", {
  container: ".search-bar",
  placeholderText: "Questions? I got Answers"
});

Refresh the page and the text should be in the search bar automatically!

Our final HTML file will 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>
  <!-- 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>

<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>
  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>

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

</html>

Want to learn more?

To learn more about the components on our page and the properties they use, check out the following:

SearchBar
SpellCheck
DirectAnswer
UniversalResults
LocationBias

Check out our component library for adding new components.

<% elem.innerText %>