loading

Answers Initialization

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 Initialization Options section.

Answers Initialization API
Property Type Default Description
apiKey
string
REQUIRED Your API key
experienceKey
string
REQUIRED Your answers experienceKey
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.