Step 4: Integrate with the Overlay

Overlay Integration

So far, we’ve walked through standing up a searchbar on your website (likely in your header) to display your Search experience. But there’s an alternative option to adding Search: You can add the search bar and search results experience within a single, simple overlay module.

With SDK version 1.8.0 and the Search Hitchhiker Theme version 1.21.0, your Search experience can be triggered via a button on your website. It requires that you add some Javascript to any pages where you’d like the overlay to show. With this integration, you can either show the results inline, or redirect a user to a full page. We’ll walk through both options below.

Overlay

Overlay with Results Inline

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

  1. Color(s) for the button, overlay panel background and text
  2. A panel heading and description
  3. Hardcoded prompts
  4. Your domain, which will be provided to you by your Yext Administrator.

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>

Overlay with Redirect URL

Searches in the Overlay panel can optionally redirect the user to a full page, instead of showing them inline.

To add the overlay with a redirect URL, you’ll need:

  1. Color(s) for the button, overlay panel background and text
  2. A panel heading and description
  3. Hardcoded prompts
  4. Your Search Results URL (domain). To set this up, follow the instructions here .
  5. Your experiencePath, which will be provided by your Yext Adminstrator.

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",
      experiencePath: "REPLACE_ME_EXPERIENCE_PATH",
      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",
          url: "REPLACE_ME_SEARCH_RESULTS_URL?query=Locations near me",
          target: "_top"  
        },
        { 
          text: "Do you have gift cards",
          url: "REPLACE_ME_SEARCH_RESULTS_URL?query=Do you have gift cards",
          target: "_top" 
        },
        { 
          text: "Operations & COVID-19",
          url: "REPLACE_ME_SEARCH_RESULTS_URL}?query=Operations & COVID-19",
          target: "_top"  
        },
        { 
          text: "How do I log in?",
          url: "REPLACE_ME_SEARCH_RESULTS_URL}?query=How do I log in?",
          target: "_top" 
        },
      ]
    };
  </script>
  <!-- end Search Overlay Script Tag --> 

</body>
</html>

Learn more about this integration option in the Add Searchbar Overlay unit in the Search track.

Feedback