loading

Module Assessment

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

Background

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. 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). If Production is set to an outdated label (i.e. a version prior to the version QA’d in Staging), your experience may be missing key updates you’ve made so before going live it’s important to confirm this.

  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

    • Update the Search Bar 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. 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 Module and Three Column List modules
  8. Add an HTML module between the Header and Footer.

    • Use the “JS Snippet” results page method to inject the Answers experience. Copy the code below replacing the [[BusinessID]] with the Yext Account ID for your account (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>
  9. 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 Live Preview link from step 8.
  10. 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 the 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
      <script>
      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);
          }
          })();
      </script> 
  11. Try running a search from your restaurant page!

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

loading Open Dropdown
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 %>
Pending