Adding an Animated Search Bar to the Results Page

[Micaela_Luders]

The default Answers search bar has a static text label, but you can modify the experience to make the search bar have a typing text animation that pulls from the hardcoded prompts you have already set. You will use the code from the Yext integration guide and follow the steps below to do this:

1. Go to layouts > headerincludes.hbs and add the following:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. Next, you will click into tools and then override theme. You will need to override the on-ready.js file within script. Once you have that file open, you will add the following code (make sure to include the correct variables for your experience):

const apiKey= "INSERT_API_KEY";
const experienceKey= "INSERT_EXPERIENCE_KEY";
const experienceVersion = "PRODUCTION";
const businessId= "INSERT_BUSINESS_ID";
const locale = "en";

  // Make API Call to Options
  var url = 'https://liveapi-cached.yext.com/v2/accounts/me/answers/autocomplete';
  url += '?v=20190101';
  url += '&api_key=' + apiKey;
  url += '&sessionTrackingEnabled=false';
  url += '&experienceKey=' + experienceKey;
  url += '&input=';
  url += '&version=' + experienceVersion;
  url += '&locale=' + locale;
  axios.get(url).then(function(response) {

    // Get strings from response
    const strings = response.data.response.results.map(function(r) {
      return r.value;
    });

    // Set up Typed
    var options = {
      strings: strings,
      showCursor: true,
      cursorChar: "|",
      typeSpeed: 45,
      backSpeed: 20,
      smartBackspace: true,
      loop: true,
      startDelay: 500,
      backDelay: 2000,
      attr: "placeholder",
    };
    var typed = new Typed(".js-yext-query", options);
  });

The Result:

[Rakesh_Keerthi]

Found an issue with typed animation. The first universal prompt doesn’t render, and also there is a blank value in the place of the first prompt.

I’ve 3 universal prompts.

• first query

• second query

• third query

Here is the gif of the same.

If anybody is facing the same, here is a quick fix, add the below line just above line 17 (axios.get(url)).

document.getElementsByClassName("js-yext-query")[0].removeAttribute('placeholder');

Should look like this

and here is the output.

[Hauke_Hagen]

Hi @Micaela_Luders, Thanks so much for your code example!

Follow-up question:
Is there a way to use this in a multi-language experience that uses one frontend for all locales (individual universal + vertical pages)?
I’d like to set locale and experience key dynamically so it pulls the prompts for the matching language from multiple backend search configurations. If this could be set up inside the on-ready.js file that would be amazing.

Any help or ideas are highly appreciated!