loading

Standing Up an Answers Results Page - Client Hosted and JS Snippet Options

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://www.yext.com/answers.

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

With the “JS Snippet” path, the results page URL will be within the existing domain (i.e. [[clientdomain]].com/answers). This is the approach that you see with Yext at yext.com/answers!

For the “subdomain” path, the search results page will live at a subdomain URL (i.e. answers.[[clientdomain]].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 Answers 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 Answers 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.

light bulb
Tip
When you successfully publish your Answers 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 (see: next tip).

Once the developer has completed the necessary steps, you’ll see the Answers 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).

light bulb
Try the JS Snippet for yourself!

An Administrator should always verify code snippets before sending to a developer. For example, before sending the JS Snippet, the Admin should always verify the snippet on an online code editor like Codepen. The Answers experience will render from the HTML code editor on Codepen; therefore, you can be confident in the snippet before sending it off for integration. Try pasting the below into the HTML editor at Codepen and see what happens!

<div id="answers-container"></div>
<script src="https://answers.yext.com/iframe.js"></script>

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 Answers 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 Answers experience. We suggest one of the following:

  • answers.[[clientdomain]].com
  • search.[[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 answers.[[clientdomain]].com, then the CNAME will point to answers.[[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.

Domains

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

unit Quiz
+20 points
    Error Success Question 1 of 3

    Which path integrates an Answers experience by dropping a Javascript snippet onto an existing search results page?

    Error Success Question 2 of 3

    Which search results page path is stood up by utilizing a CNAME?

    Error Success Question 3 of 3

    Which path does Yext.com use for its search results?

    High five! ✋

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect