Module Assessment| Hitchhikers Platform

You must include a first name and last name in your profile to create challenge environments.


Imagine that you have fully QA’d your experience in Staging and are ready to go live with the integration. Turtlehead Tacos has requested the following integration approach:

  • Yext will stand up a search results page within a Page Builder template
  • Yext will integrate a search bar within Turtlehead Taco’s existing Restaurant Page Builder Pages

Your Challenge

  1. Make sure your Production Configuration Label is set to the most recent Search Configuration version number explicitly and not set on Latest. Remember from your Search Configuration training that you should always designate a specific configuration version label for Production (and can leave Staging on “Latest” like it is by default).

  2. Publish your Answers site to production

    • Navigate to Sites > Turtlehead Tacos Answers > View Production Environment
    • Then select New Publish > Publish Master (Note: you will never publish Master branch on production for a real implementation of Answers - you would always want to publish a specific commit for Production. This step is specific to the challenge.)
    • Wait until you get a successful publish. This may take a few minutes.
  3. Once you get a successful initial publish, click into “View Code Editor”, edit Master, and navigate to config > index.json file.

    • Update the Search Bar placeholder text (componentSettings.SearchBar.placeholderText) to “Search across restaurants, community stories, and more”. Preview your change (you should see the placeholderText update!).
  4. Commit your change and this time in addition to the commit message, give the commit a specific tag (i.e., Commit-MM-DD-v1 where MM is today’s month and DD is today’s date). Click “Go to Production Environment”.

  5. Publish your site again in Production, except this time, publish the specific tag you just committed. You want to make sure the production version of your site is pinned to a specific commit and not the latest commit. If you don’t see your commit tag immediately, click the arrow button next to the drop down to refresh the list.

    • Wait for your site to Publish successfully.
    • Open your Production URL and confirm your commit appears on the page. The search bar input text should read “Search across restaurants, community stories, and more”.
  6. You are now ready to set up your search bar integration and search results page! Let’s do this within your Page Builder templates. Create a new site and call it “Answers Results Page”.

  7. Select “Add new template” and create a Generic Static Page (Page Type: Static Page, Entity Type: None).

    • Name the template “Answers Results Template”.
    • Delete the Announcement Bar, Banner Image, About this Page, and Three Column List modules
  8. Use the Answers Snippet Generator to obtain the code snippets you’ll need.

    • Navigate to Answers > Experiences > Experience Details and click on “Integrate Answers on Your Site”.
    • The Turtlehead Tacos Answers site should already be selected.
    • Choose the JS Snippet integration type.
    • Click Continue.
    • Copy the Search Results JS Snippet for the next step.
  9. Add an HTML module between the Header and Footer.

    • Use the “JS Snippet” results page method to inject the Answers experience.
    • Paste the code you copied from the Answers Snippet Generator in the previous step.
    • For reference, it should look like the below with your account [[BusinessID]] filled in (this can be found in the URL path after yext.com/s/[[Account ID]]/* or by going to Personal Settings):

      <div id="answers-container"></div>
      <script src="https://answers-turtleheadtacos-[[BusinessID]].landingpagessbx.yextengtest.com/iframe.js"></script>
  10. Now let’s add a search bar to the header of your Restaurant pages. Navigate over to your Page Builder templates and edit your Restaurant page template.

    • Click on the Navigation Bar with Answers Search Bar module, and select answers as your Answers Experience.
    • Remove the Autocomplete Prompt Heading
    • Fill out the Search Results Page URL with the Page Builder Preview link from step 9.
    • Since Page Builder has a pre-built module for the Answers Search Bar, you won’t need to copy the search bar code snippet from the Answers Snippet Generator. To see what the code snippet would look like were you to add a search bar directly to your site, use the Preview link from step 9 to fill in the Search Results URL in the Answers Snippet Generator.
  11. Lastly, we’ll add the Answers Overlay to this page. Add an HTML module to your Restaurant page template. Add the code below and make sure to replace the values according to the following instructions.

    • The domain should be https://answers-turtleheadtacos-[[BusinessID]].landingpagessbx.yextengtest.com
      • Replace the Business ID like you did in step 8
    • The button background color should be #006938 and the foreground color should be #FFFFFF.
    • The panel header should read “Have a question about Turtlehead Tacos?” and the subtitle should read “Ask us anything using the search below.”
    • The panel background and foreground colors should be the same as the button.
    • The prompts should be:

      • Restaurants near me
      • Do you have delivery?
      • Upcoming Events
      window.YxtAnswersOverlaySettings = {
          domain: "<REPLACE_ME>",
          button: {
              alignment: "right",
              text: "Search",
              color: {
              background: "<REPLACE_ME>",
              foreground: "<REPLACE_ME>"
          panel: {
              header: "<REPLACE_ME>",
              subtitle: "<REPLACE_ME>",
              color: {
              background: "<REPLACE_ME>",
              foreground: "<REPLACE_ME>"
          prompts: [
              { text: "<REPLACE_ME>", },
              { text: "<REPLACE_ME>", },
              { text: "<REPLACE_ME>", },
          (function () {
          var w = window;
          var d = document;
          function l() {
              var s = d.createElement("script");
              s.type = "text/javascript";
              s.async = true;
              s.src = w.YxtAnswersOverlaySettings.domain + '/overlay.js';
              var x = d.getElementsByTagName("script")[0];
              x.parentNode.insertBefore(s, x);
          if (w.attachEvent) {
              w.attachEvent("onload", l);
          } else {
              w.addEventListener("load", l, false);
  12. Try running a search from your restaurant page!

Congratulations! You have “gone live” and integrated Answers through the Page Builder templates!

Module Assessment
+<% util.points %> points
Weekly Challenge Streak Weekly Challenge Streak: <% util.streakWeekly %>
You must include a first name and last name in your profile to create challenge environments.
Challenge account expires in <% util.expirationHours > 24 ? Math.round((util.expirationHours * 1.0) / 24) : util.expirationHours %> <% util.expirationHours > 24 ? (Math.round((util.expirationHours * 1.0) / 24) == 1 ? 'day' : 'days') : (util.expirationHours == 1 ? 'hour' : 'hours') %>.
Challenge account has expired. Please create a new account.
Report Card
Add and update the Answers Results template, including adding the HTML module
Common Issues
Getting an error when you publish? expand/collapse module

Here are some things to double check:

  • If your error says “Failed to fetch static content from build artifact” you’re probably moving to fast! A few things need to happen behind the scenes before a site is ready to publish. Wait a few minutes and then try to publish again.

If the issues persist, reach out to the Community for assistance.

Previous Submissions
Attempt #<% submission.attemptNumber %>
<% submission.date %>
Score: <% submission.numericScore %>
Splash Loading