Step 1: Adding CSS to the Page

First we’ll need to add the Yext Search stylesheet into our HTML file to load in some CSS. We’ll add the following <link> into the <head>

<link
  rel="stylesheet"
  type="text/css"
  href="https://assets.sitescdn.net/answers/v1.17/answers.css"
/>

so it looks 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-->

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

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