Integration Phases and Options – Yext Help

Integrating a Search experience can be broken up into four phases:

(Subdomain integration only) Add a Search domain
Publish the experience to production (after completing QA in staging)
Stand up the search results page
Add and/or update a search bar on the main domain (via a header search bar or overlay module)

Note: Yext also has out-of-the-box integrations for certain content management systems and website builders. You can find all available integrations in the App Directory.

Integration Options: JS Snippet vs. Subdomain

The integration option you choose affects two of the four phases above: adding a domain and standing up the results page. The two options differ in two key ways:

The results page URL format
The header and footer setup and workflow

JS Snippet — You host the search results page and inject the Search experience as a component onto the page using a script tag. The page maintains the integrity of your website's header/footer since it is a page on your own site. Any changes to the header/footer flow separately from changes to the Search experience. The results page typically lives at brand.com/search.

Subdomain — Yext hosts the search results page, and the header/footer is created and maintained using Yext products. Workflow with Yext is required any time the header/footer is updated. To see an example of how to add a header and footer to a subdomain experience, see the Subdomain Header & Footer Styling reference doc. The results page typically lives at search.brand.com.

Note: To add or update a Yext search bar, you'll need a results page for the user to land on via the redirectUrl property. This is required for header search bar integrations and overlay modules that link out to a standalone search results page.

Phase 1: Add a Domain

You only need to add a domain if you are integrating via the subdomain method. For the JS snippet path, since you inject the Search experience into an existing CMS page (e.g., brand.com/search), you can use the placeholder domain that is automatically assigned when you create the site.

When you are ready to add your domain, navigate to Pages > Domains.

JS Snippet

Use the placeholder domain automatically created when you create your Pages site. Find it by navigating to your site and clicking Deploys — you'll see the placeholder domain as a staging and production link. Once ready, publish to production and use the production URL for your integration.

Subdomain

In the "Add New Domain" modal, enter:

Use this domain for Search? = Yes
Integration method = Subdomain
Domain Name formatted as search.brand.com (e.g., search.turtlehead-tacos.com)

Once you input your domain format, you'll be given a bridge domain to set up the CNAME record.

The DNS status will remain "Pending" until you create a CNAME record. You'll be able to publish as soon as the DNS Status switches to "Active."

Note: If you're unsure of your integration path, the Pages deployment UI assigns a placeholder domain as soon as you create your site. You can use this until you decide on your integration path and are ready to add your own domain.

Assigning a Domain

For the subdomain integration method, once you successfully add a domain, assign it to your site by navigating to Pages > [Your Site]. Steps differ based on your site type:

Classic Pages (Legacy): Click the Select Domain dropdown at the top left of the page and select your domain.
Pages: Select Settings in the left navigation. On the Site Settings screen, click the Domain field, open the Select Domain dropdown, and select your domain. Click Save.

Note: Once you have assigned a domain, you cannot change it.

Phase 2: Publish the Experience

Deploy your search experience to staging for testing, then to production for integration. You'll need to publish to production for the search results page to be served at the domain you just added.

Phase 3: Stand Up the Search Results Page

A results page is required if you are adding a search bar to your header or using the overlay module with a redirect URL. (You do not need a results page if you use the overlay module without a redirect URL — results display inline within the overlay.)

By default, the search results page shows a blank search bar with white space on the rest of the page. Since it's not a good user experience to arrive at a blank results page, direct users to the results page only after they have entered a query in the search bar.

To find pre-populated code snippets, navigate to Search > [Your Experience] > Integrations and select "Embed Code."

In the modal, click the Search Results tab, select your site, and copy the code snippet.

Tip: Yext recommends 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 it to Search or remove it entirely.

Approach 1: JS Snippet Integration

In this approach, you embed the search results into a page you host and control.

1. Choose a URL

Pick the URL for your search results page. Yext recommends domain.com/search or domain.com/answers.

2. Create a Page in Your CMS

Using the chosen URL, stand up a page in your CMS. If you already have a search results page, skip this step.

3. Replace Content with Search Results

Embed the search results from Yext on that page:

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

Replace REPLACE_ME_PRODUCTION_URL with the production version of your placeholder domain (found on the Deploys screen of your site). You must publish a deploy to production before this URL is available.

The full page structure should look 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

To display a specific vertical page or international subfolder, add the data-path attribute in your script tag:

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

Preview the Staging Version

To preview the staging version of Search, use the staging URL and change iframe.js to iframe-staging.js:

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

4. Add an H1 Header Tag

Add an h1 header tag to the page to clearly indicate what content is included.

5. Update Meta Tags

Update the title and meta description inside the <head> tag to match the experience.

Title (around 60 characters or less):

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

Meta description (125–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}}"
/>

Approach 2: Subdomain Integration

In this approach, Yext hosts the entire search results page, including a simplified version of your header/footer.

1. Choose a Subdomain

Select a subdomain where Yext will host the Search experience. Yext recommends:

search.mydomain.com
answers.mydomain.com

2. Create a CNAME Record

Create a CNAME record pointed to mysubdomain.mydomain.com.pagescdn.com.

Include the subdomain in its entirety. For example, if you selected search.mydomain.com, your CNAME points to search.mydomain.com.pagescdn.com.
The trailing dot (.) is required by DNS specification. Some DNS providers handle this automatically.
If you have an internal DNS, set up the CNAME record there too, otherwise the subdomain will not display on your internal network.

If hosting data in the EU cloud region: point the CNAME to mysubdomain.mydomain.com.eu.pagescdn.com. instead.

3. Notify Yext of Your Subdomain

Yext will perform a few tests and confirm the configuration is active. No content will appear until the site is deployed to production — prior to launch you may see an error stating that no content is present.

(Optional) Add Sitelinks Search Box Schema

Regardless of which approach you choose, setting up Sitelinks Search Box Schema is recommended. This allows you to take advantage of a Google feature that redirects traffic from Google search onto your internal site search when a user searches for your brand.

Sitelinks Search Box Schema in Action

Add the following schema markup to your main domain. Replace:

REPLACE_ME_URL with your main domain (e.g., https://www.yourdomain.com)
REPLACE_ME_SEARCH_RESULTS_PAGE with your search results page URL (do not change anything after /?query={search_term_string})

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "REPLACE_ME_URL",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "REPLACE_ME_SEARCH_RESULTS_PAGE/?query={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  }
</script>

Also add a rel="canonical" tag to your homepage:

<link rel="canonical" href="https://www.yourdomain.com" />

For full documentation see Google's Sitelinks Search Box documentation.

(Optional) Configure the JS Snippet for Your Analytics Platform

This step applies only to Approach 1 (JS Snippet) and only if you have a custom analytics platform (like Adobe) that relies on first-party cookies.

When a user enters the Yext iFrame, first-party cookies set on your main domain may not be accessible. To preserve them, set up a subdomain of your main domain and CNAME it to Yext's hosting environment, making the iFrame first-party.

1. Confirm Cookies Are Set at Root of Main Domain

Make sure any cookies are set at the root of your main domain, not a subdomain. For example, if your site is yourdomain.com and cookies are set at www.yourdomain.com, the iFrame will not be able to access them.

2. Set Up a Subdomain for the iFrame

Choose a subdomain to host the search experience (it does not need to be consumer-facing, e.g., search.mydomain.com).

Create a CNAME record pointed to mysubdomain.mydomain.com.pagescdn.com.

Include the subdomain in its entirety.
The trailing dot (.) is required.
If you have an internal DNS, set up the CNAME record there too.
If hosting in the EU cloud region: point to mysubdomain.mydomain.com.eu.pagescdn.com. instead.

Notify Yext of the subdomain you've selected. Yext will confirm the configuration is active.

3. Add the Search Experience to the Page

Follow the same JS Snippet steps above, but use the subdomain you selected as the production URL:

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

Phase 4: Add a Search Bar on the Main Domain

The search bar is the main access point for users to run search queries. A search bar can be added to the main domain in two ways:

Classic Search Bar — Links the user out to a separate results page where your Search experience is served. Yext recommends adding a prominent search bar to the header where it can be accessed across your site. You can also add one to your homepage and other pages.

Overlay Module — Allows users to run searches in a popup panel on the current page. You can present results inline within the overlay panel, or use a redirect URL to link the user out to a separate results page.

For step-by-step guidance on both options, see Add Search to Your Site.