Search Initialization | Yext Hitchhikers Platform

Adding Answers JS to a page is a two step process.

  1. Initialize the library
  2. Add components.

Basic Initialization

The first step is to initalize the library. This is done using the ANSWERS.init command. This function accepts a set of configuration options.

At a minimum apiKey, experienceKey, businessId and experienceVersion must be specified. Here is an example:

ANSWERS.init({
  apiKey: "3517add824e992916861b76e456724d9",
  experienceKey: "answers-js-docs",
  businessId: "3215760",
  experienceVersion: "PRODUCTION",
  onReady: function() {
    // ADD COMPONENTS HERE
  },
});

The onReady property is used to add components. You can learn more about adding components in the Components section.

Additional Initialization Options

Learn more about additional initialization configuration in the verticalPages section.

Search Initialization API

Property Type Default Description
apiKey
string
REQUIRED Your API key.
experienceKey
string
REQUIRED Your Search experience key.
onReady
function
function() {}
REQUIRED Invoked when the Answers component library is loaded/ready.
businessId
string
Yext businessId, strongly encouraged to send analytics requests.
useTemplates
boolean
true
If false, don’t fetch pre-made templates. Only use this if you plan to implement custom renders for every component!
templateBundle
object
If useTemplates is false, provide the precompiled templates here.
locale
string
en
The locale of the configuration. The locale is passed to the api request, and will affect how queries are interpreted and the results returned.
experienceVersion
string
PRODUCTION
The Answers Experience version to use for api requests. Can be a label or version number.
debug
boolean
Prints full Answers error details when set to true.
sessionTrackingEnabled
boolean
true
If true, the search session is tracked using session storage and cookies. If false, there is no tracking.
disableCssVariablesPonyfill
boolean
Opt-out of automatic css variable resolution on init for legacy browsers.
onStateChange
function
function() {}
Invoked when the state of any component changes.
onVerticalSearch
function
function() {}
Analytics callback after a vertical search, see onVerticalSearch Configuration for additional details.
onUniversalSearch
function
function() {}
Analytics callback after a universal search, see onUniversalSearch Configuration for additional details.
search
object
Search specific settings, see Search Configuration .
verticalPages
array
Provide configuration for each vertical that is shared across components, see Vertical Pages Configuration .
navigation
object
DEPRECATED Provide navigation configuration including tab configurations. Use verticalPages instead.
verticalKey
string
The vertical key to use for searches, passed to certain components. Required if a defaultInitialSearch is supplied.
limit
string
20
The number of results to display per page, defaults to 20. Maximum is 50.
defaultInitialSearch
string
A default search to use on page load when the user hasn’t provided a query. If set to “”, the SearchBar’s allowEmptySearch must be set to true.
environment
string
production
Either “production” or “sandbox” depending on the type of Yext account you are using. This will dictate which set of endpoints are called in the experience.
cloudRegion
string
us
The cloud region used for the experience. Either “us” or “eu”.
Feedback