Search Initialization | Yext Hitchhikers Platform
Adding Answers JS to a page is a two step process.
- Initialize the library
- 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”. |
|
cloudChoice
|
string
|
multi
|
The cloud provider to use for the experience. Either “multi” or “gcp”. |
<% elem.innerText %>