If you’re already a Hitchhiker, log in to access this content.
Standing Up an Answers Results Page - Client Hosted and JS Snippet Options| 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
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
<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 Answers 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 your Yext account > Answers > Experiences > Experience Details page and select “Integrate Answers 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 Answers experience to your search results page that you can use.
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).
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.
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:
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.
Once the CNAME has been configured properly, you will see the DNS Status and SSL Status update to “Active” on the Domains tab.