Speed Optimized Search Bar Component (May '21 Release)

Introducing a new and improved Answers search bar that is faster than ever!

This update will allow for a searchbar-only version of the Answers Search UI SDK. This bundle only contains the necessary JS for the searchbar component, and nothing else, therefore optimized for page speed. When adding the Answers search to their home page, customers be able to add this new search bar by default. This search bar will have no impact on page load time, while maintaining the look and feel of the existing search bar. You can choose to keep the classic Yext styling or apply your own customized CSS to the new search bar as with previous search bar. All analytics and geolocation support with the previous search bar will also be supported with this new search bar.

Upgrade Implications:
If you have yet to integrate Answers, you can find the full instructions for implementing the searchbar-only version here.

If you have already integrated and are using the previous search bar, you will utilize the same search bar integration but reference a different new CDN asset. There are three changes to upgrade to this new searchbar-only version of the Answers Search UI SDK. You will want to make these three changes within your head tag where you initially integrated the Answers searchbar.

  1. Before initializing the library add the following:
  <script src="https://assets.sitescdn.net/answers-search-bar/v1.0/answerstemplates.compiled.min.js"></script>

Then within the ANSWERS.init function, add the template bundle:

        templateBundle: TemplateBundle.default,
  1. Adjust the script to add the Answers JS library to the page to reference the following CDN asset:
<script
   src="https://assets.sitescdn.net/answers-search-bar/v1.0/answers.min.js"
   onload="ANSWERS.domReady(initAnswers)"
   async
   defer
 ></script>
  1. Replace the current search bar CSS styling with the following asset:
  <link
    rel="stylesheet"
    type="text/css"
    href="https://assets.sitescdn.net/answers-search-bar/v1.0/answers.css"
  />

The full script will be as follows:

<head>
  <!-- Other stuff in the head here -->
  <link
    rel="stylesheet"
    type="text/css"
    href="https://assets.sitescdn.net/answers-search-bar/v1.0/answers.css"
  />
  <script src="https://assets.sitescdn.net/answers-search-bar/v1.0/answerstemplates.compiled.min.js"></script>
  <script>
    function initAnswers() {
      ANSWERS.init({
        apiKey: "REPLACE_ME_API_KEY",
        experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
        experienceVersion: "PRODUCTION",
        locale: "en", // e.g. en
        businessId: "REPLACE_ME_BUSINESS_ID",
        templateBundle: TemplateBundle.default,
        onReady: function() {
          ANSWERS.addComponent("SearchBar", {
            container: ".search_form",
            name: "search-bar", //Must be unique for every search bar on the same page
            redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
            placeholderText: "Search...",
          });
        },
      });
    }
  </script>
  <script
    src="https://assets.sitescdn.net/answers-search-bar/v1.0/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>

Further Considerations:
Polyfilled Site
The searchbar-only JS asset used in the example above includes polyfills. If you’re already polyfilling your site, or Internet Explorer support is not a priority, you should reference https://assets.sitescdn.net/answers-search-bar/v1.0/answers-modern.min.js instead of https://assets.sitescdn.net/answers-search-bar/v1.0/answers.min.js. This will further improve page performance.

Have any questions? Leave us a comment below.

Hi Caroline,

Can you confirm this can be upgraded as of today, and is stand alone from needing to upgrade anything else on an experience?

Thanks!

Juan

Hi Juan,

You can make this update today! We have added more detailed instructions if you are upgrading a currently integrated experience vs a net new experience. If net new, simply follow the integration instructions as normal on the guide here: Introduction | Hitchhikers

Please let us know how it goes! We look forward to any feedback.

Best,
Alyssa

Hi Caroline,

Do you know if there are plans to include the SearchBar-only SDK in the NPM package as well? I checked here: @yext/answers-search-ui - npm and it looks like it isn’t available yet.

Thanks
Jami

Hi Jami,

SearchBar-only SDK is currently available from the CDN only. We will release it as a separate NPM package in a month or so!

Best,
Bowen

1 Like