Step 3: Adding HTML to the Page

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

We can now delete the wishful-thinking class <div> and replace the contents of the answers-layout <div> with the following:

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

Our file should now look like this, and we’re one more step away from having a search experience ready!

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

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

</html>

<% elem.innerText %>