Answers - Typed Animation

Search Best Practices - Integration
1

Hi Community!

One of my clients is in the process of applying the typed animation functionality to their search bar. However, the code example in the integration instructions does not include the vars for production_url and redirecturl, but does include the other vars from the init script block.

  1. Are these two things completely separate integrations? Or do both scripts need to be included in the page?
  2. If the client is using 2 search bars on their page, will they be able to only animate one of them?

Thank you in advance!

Best,
Pat

2

Hi Pat!

"Are these two things completely separate integrations, Or do both scripts need to be included in the page?

  • The Typed animation is third party library (see here: GitHub - mattboldt/typed.js: A JavaScript Typing Animation Library). The following scripts <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script> and <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> are needed for the typed animation to show. Production URL / Redirect URL for typed are not required. The code explicitly calls the Yext Autocomplete Endpoint to animate the input placeholder.

If the client is using 2 search bars on their page, will they be able to only animate one of them?

  • It is possible to animate a second search bar - the code var typed = new Typed('.element', options); will add the animation to any “input element”. For the client’s use case they are using var typed = new Typed(".js-yext-query", options); they will have to add a line below the line var typed = new Typed(".js-yext-query", options); that will be of the format var typed = new Typed("scpecific css selector", options); - which will solve your issue!

Let me know if you have any questions

Mau

1 Like