Step 1: Add Overlay with Results Inline

To add the overlay to your page, you’ll need:

Color(s) for the button, overlay panel background and text.
A panel heading and description.
Hardcoded prompts.
Your domain. This will be the Production URL listed at the top of the Deploys screen for your site.

The above information should be included in the Search Overlay Script Tag, like this:

<html>
<head>
   <!-- head stuff here -->
</head>
<body>
  <!-- other body stuff here -->

  <!-- begin Search Overlay Script Tag -->
  <script type="text/javascript" async src="REPLACE_ME_SEARCH_RESULTS_URL/overlay.js"></script>
  <script>
    window.YxtAnswersOverlaySettings = {
      domain: "REPLACE_ME_SEARCH_RESULTS_URL",
      button: {
        alignment: 'right',
        color: { //update with your desired colors
          background: '#808080',
          text: '#FFFFFF'
        },
      },
      panel: {
        header: "We're here to help.", //update with your desired header
        subtitle: "Find frequently asked questions and resources.", //update with your desired subtitle
        color: { //update with your desired colors
          background: '#808080',
          text: '#FFFFFF'
        },
      },
      prompts: [ //update with your desired prompts
        { text: "Locations near me" },
        { text: "Do you have gift cards?" },
        { text: "Operations & COVID-19" },
        { text: "How do I log in?" }
      ]
    };
  </script>
  <!-- end Search Overlay Script Tag -->

</body>
</html>

<% elem.innerText %>