Step 2: Adding Search UI Javascript to the Page

Next, we’ll add the Search UI Javascript library via the following <script> placed in the <head> tag.

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

Our HTML file should now 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="wishful-thinking" style="width: 100%; text-align: center" ;>Man I wish I had Search!</div>
  </div>
</body>

</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="wishful-thinking" style="width: 100%; text-align: center";>Man I wish I had Search!</div>
  </div>
</body>

</html>

<% elem.innerText %>