Standing Up a Search Results Page - Client Hosted and JS Snippet Options | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• Learn how to stand up a results page with the “JS Snippet” path
• Learn how to stand up a results page with the “Subdomain” path

Overview

The final integration step will be jointly handled by the Admin and Developer. The outcome is that you will produce a search results page where the user will land after conducting a search. As a reminder, this step is required for header search bar integrations and overlay modules that link out to a standalone search results page.

Try it out yourself and start at https://www.yext.com/ ! You’ll notice that when you input a search on the homepage, you are redirected to the search results page, which lives at https://search.yext.com .

In this unit, you’ll learn all about standing up the search results page, which Yext has done at search.yext.com.

With the “JS Snippet” path, the results page URL will be within the existing domain (i.e. [[clientdomain]].com/search).

For the “subdomain” path, the search results page will live at a subdomain URL (i.e. search.[[clientdomain]].com). This is the approach that you see with Yext at search.yext.com!

Standing up a results page with the Client Hosted “JS Snippet” path

As noted in Unit 1 of this module, the “JS Snippet” path maintains the integrity of the header/footer and any changes made to the header/footer flow separately from changes made to the Search experience (because it’s a component injected onto the search results page). No workflow is required from Yext for any header/footer updates. The technical instructions below detail how the developer will integrate with this path.

Inject the Experience

The “JS Snippet” path utilizes the Javascript snippet below to inject the Search experience onto an existing search results page (see here for instructions on how to create a search results page):

<div id="answers-container"></div>
<script src="[production_url]/iframe.js"></script>

Any existing content on the search results page should be removed and the [production_url] parameter should be updated to the Production URL. The [production_url] can be found in the Sites UI within your Production environment.

To make the process quick and seamless for creating your search results page, we’ve added a new Search Snippet Generator to the Yext platform that will automatically create the snippets you need to integrate with JS Snippet or Subdomain. To generate the snippet, navigate to Search > All Search Experiences > View Experience > Experience Details and select “Integrate Search on Your Site”.

Follow the prompts to select your site and choose the JS Snippet integration type.

This will provide a code snippet to add the Search experience to your search results page that you can use.

Note

When you successfully publish your Search site to production, the Yext platform presents you with a Production URL from the Sites UI. You can place the Production URL right into the above snippet, and the experience will render on the page. You can always test this out in an online code editor like Codepen .

Once the developer has completed the necessary steps, you’ll see the Search experience surface on the search results page (with your header and footer in place if you’ve added them to the search results page as they are separate components from the experience integration).

Standing up a results page with the Yext Hosted “Subdomain” path

As noted above in Unit 1 of this module, Yext will recreate the header/footer for this path and workflow is required with Yext any time the header/footer is updated to ensure changes flow through (because the Search experience is replacing the search results page entirely). The instructions below detail how the client will integrate with this path.

Determine subdomain

For this path, the client will need to first determine the subdomain on which Yext will host the Search experience. We suggest one of the following:

• search.[[clientdomain]].com
• answers.[[clientdomain]].com
• find.[[clientdomain]].com

Ensure CNAME record is created and pointed to subdomain.[[clientdomain]].com.pagescdn.com.

The client will then need to create a CNAME record - they should point this record to subdomain.[[clientdomain]].com.pagescdn.com.

Be sure to include the subdomain in its entirety and include the trailing dot (“.”). For example, if the client selected search.[[clientdomain]].com, then the CNAME will point to search.[[clientdomain]].com.pagescdn.com.

For reference, the trailing dot is required by DNS specification when setting up a CNAME to another domain (pagescdn.com, in this case). There are some DNS providers that handle this automatically. The client will also need to set up the CNAME record on their internal DNS, if they have one. This will ensure the subdomain displays on the client’s internal network.

Once the CNAME has been configured properly, you will see the DNS Status and SSL Status update to “Active” on the Domains tab.