Step 1: Approach 1 - JS Snippet Integration

##

This first approach for creating a Search Results page is called the JS Snippet path, In this approach, you will embed the search results into a page you host and control. Follow the steps below if you’d like to proceed with this option.

1. Choose a Domain

The first step is to pick the URL for your search results. We recommend domain.com/search or /answers, but it’s up to you.

2. Create Page in your CMS

Using the chosen domain, stand up a page in your CMS. If you already have a search results page, then you can skip this step and move on.

3. Replace Content with Search Results

The next step is to embed the search results from Yext Search on that page.

<div id="answers-container"></div>
<script src="REPLACE_ME_PRODUCTION_URL/iframe.js"></script>

Note: Your Search Admin will likely provide production URL to replace the REPLACE_ME_PRODUCTION_URL. If you are building your search experience end to end, you will be add the domain yourself (Visit Step 6 of the Build a Search Experience End-to-End guide for more information.)

Use snippet generator for Search Results Page

To make the process quick and seamless for creating your search results page, you can use the Search snippet generator to automatically create the snippet you need above to integrate with the JS Snippet option.

To generate the snippet, navigate to your Yext account > Search > Experiences > Experience Details and select “Integrate Search on Your Site”. Follow Step 5 in this guide for complete steps on how to use the Search snippet generator.

search snippet generator

Generally this code snippet would be added between the header and the footer. At a high level the page structure might look something like this:

<html>
  <head></head>
  <body>
    <header></header>
    <div id="answers-container"></div>
    <script src="REPLACE_ME_PRODUCTION_URL/iframe.js"></script>
    <footer></footer>
  </body>
</html>

Display a Specific Page

Additionally, to display a specific page in your experience (like a vertical page, or an international subfolder), you can add the data-path attribute in your script tag.

By default, the script tag will pull in the root folder of your experience, landing users on the index.html page. Adding data-path to the script tag will append /[[data-path]] to the iframe’s src.

<div id="answers-container" data-path="locations.html"></div>
<script src="REPLACE_ME_PRODUCTION_URL/iframe.js"></script>

If you want to use the script tag to preview the staging version of your Search experience, you will need to slightly modify the code listed above.

Use the staging URL of you Search experience instead of the production URL. In order to preview the staging version of Search, you will also need to change iframe.js to iframe-staging.js. It will look something like this:

<div id="answers-container"></div>
<script src="REPLACE_ME_STAGING_URL/iframe-staging.js"></script>

At a high level the page structure might look something like this:

<html>
  <head></head>
  <body>
    <header></header>
    <div id="answers-container"></div>
    <script src="REPLACE_ME_STAGING_URL/iframe-staging.js"></script>
    <footer></footer>
  </body>
</html>

This can be particularly useful when trying to preview search on a staging site prior to officially launching Search onto your site.

Also see the directions in the Adding a Search Bar guide to learn how to add a search bar to preview the Staging version of Search.

4. Add H1 Header Tag

We recommend adding an h1 header tag to the page you are embedding the search experience on to clearly indicate what content is included on the page.

5. Update Meta Tags

The final step is to make sure the meta tags on the page make sense. You will want to update your title and meta description to match the experience you now deliver. These live inside the <head></head> tag on the page.

Title

Add (or update) the <title> tag in the <head> to something like “{{Brand Name}} Searh | {{List of entity types}}”. Yext recommends around 60 characters or less.

<title>{{Your Brand Name}} Search | Locations, People, FAQs, Products</title>

Meta Description

Next you will want to update the meta description (<meta name="description">). For this tag we recommend 125 to 150 characters.

<meta
  name="description"
  content="Ask any question to find the answer you need from {{Your Brand Name}} today. Learn more about our {{list of entity types}}"
/>

(Optional) Configure the JS Snippet to Work with your Analytics Platform

If you have custom analytics (like Adobe) that are hosted on your domain and will also be added to Search, follow Step 4 in this guide in addition to the ones above.

light bulb
Note
We recommend funneling as much traffic as possible into search. One way to do this is to redirect any existing links into search that make sense. For example, if you have a “find a location” link on your website, redirect that to search or remove it entirely.
Feedback