Overlay Configuration Parameters

Owned by Cristian Casais (Unlicensed)
Last updated: Jul 13, 2018 by Noelia Vigil Suárez
3 min read

The Overlay configuration object accepts the following parameters:

NameTypeDescriptionDefault
endpointsObjectConfiguration of the API Endpoints. By default only the host and the version is configured. The instance name must be configured by overriding this property in the snippet.
{  
  host: 'https://api{-}{env}.empathybroker.com',
  version: 'v1'
}
langString

Search results language (catalog data, links, top clicked, etc.).
Format: ISO 639-1 

'en'
displayLangString

Search results display language (tags and labels)
Format: ISO 639-1

'en'
defaultCurrencyString

Currency for the search results.
Format: ISO 4217

'USD'
scopeStringDevice / App where the search is going to be performed. Ask the team if you have doubts or want any specific ones.'mobile', 'tablet', 'desktop'
pageRowsNumberNumber of results to be displayed per page.24
disableTrackingBooleanDisable all tracking events.false
cookieUserIdStringName of the cookie where the user id is stored.'__eb_user_id'
cookieSessionIdStringName of the cookie where the session id is stored.'__eb_session_id'
defaultImageStringURL of the default image to be inserted when a product image is not available. When not provided, our default image is used.null
debugBooleanUsed to log debugging information to the console and enable Angular scopes inspecting.false
debugProductPageBooleanIf true and debug is enabled, fake product_page.html is used instead product page. For debug purposes only.undefined
domTriggerStringSelector of the search box. In case your site search uses multiple inputs, you can provide either a class or concatenate multiple selectors using a comma.'.eb-trigger'
domInputStringSelector of the search box. In case your site search uses multiple inputs, you can provide either a class or concatenate multiple selectors using a comma.'#eb-input'
domHeaderStringSelector of the element under which you want to place the overlay in the desktop version. This keeps the header element visible while performing the search. If your site has multiple headers, feel free to provide as many as you want in this selector and we will pick the one that is visible.undefined
domA2CTriggerStringSelector of the 'add to cart button' in the product page. If add to cart tracking in product page is enabled, a handler is attached to buttons that match with this selector.'#eb-a2c'
loadingAnimationStringURL of your loading animation. When not provided, our default animation is used.undefined
urlHandlerObjectThis parameter can be used to override the default URL query string parameter names. This should only be used when any of those parameters clashes with your URL usage.
{
  label: {  
    query: 'q',
    filters: 'filters',
    sort: 'sort',
    page: 'page',
    top: 'top',
    store: 'store
  }
}
queryOriginObjectThis parameter can be used to override the default values of the query origin sent in the track query event.
{  
  default: 'default',
  empathizeTerm: 'empathize_term',
  empathizeCategory: 'empathize_category',
  suggestions: 'partial',
  history: 'history',
  spellcheck: 'spellcheck',
  url: 'linked'
}

actionCallbacks

Object

An object containing the custom functions for tracking actions callbacks. The name of the properties must be the action name. These functions have to be declared before the EmpathyOverlay.config call, or be declared as anonymous functions in the object. These functions will receive a "data" object as param, containing all information about the action. This information can be customized for each client.

actionCallbacks: {
  query: searchCallback,
  click: clickCallback,
  add2cart: add2cartCallback,
  open: openCallback,
  close: closeCallback,
  resultsChange: resultsChangeCallback
}
OR
actionCallbacks: {
  query: function(data){ /* custom code */},
  click: function(data){ /* custom code */ },
  add2cart: function(data){ /* custom code */},
  open: function() { /* custom code */},  
  close: function() { /* custom code */},  
  resultsChange: function() { /* custom code */}
}
undefined