loading

verticalPages

Configuration

verticalPages is included in the initialization, and is used in various components that require information about the vertical search pages, including Navigation, Universal Results and No Results in Vertical Results. It takes an array of objects, each representing a vertical search page.

ANSWERS.init({
  apiKey: "3517add824e992916861b76e456724d9",
  experienceKey: "answers-js-docs",
  businessId: "3215760",
  experienceVersion: "PRODUCTION",
  verticalPages: [
  {
    label: "Home",
    url: "index.html",
    icon: "star",
    isFirst: true,
    isActive: true,
    hideInNavigation: false
  },
  {
    label: "Locations",
    url: "/locations.html",
    verticalKey: "locations",
    icon: "pin",
    isFirst: false,
    isActive: false,
    hideInNavigation: false
  },
  // Other pages here
],
  onReady: function() {
    // ADD COMPONENTS HERE
  },
});

Where Is It Used?

Option No Results UniversalResults Navigation
label Used in alernative verticals. Not used Used as tab label
url Used in alernative verticals Used in “View More” link if not specified Used as tab URL
icon Used in alernative verticals. Not used Not used
isFirst Not used Not used Used to determine which tab is pinned to the first slot
isActive Not used Not used Used to determine which tab gets active state
hideInNavigation Not used Not used Used to determine which tabs are hidden

isFirst and isActive

The navigation component should ideally always display universal search as the first tab (isFirst), and the current page as active (isActive). It’s therefore recommended that your Universal tab is always set to isFirst: true on each page, and the current page is set to isActive: true.

hideInNavigation

In the case that you have a vertical that you would like to remove from the navigation, but still maintain a page for, you can toggle the hideInNavigation boolean as needed. All other configuration will still be passed to the Navigation, no results and UniversalResults.

Example

verticalPages API
Property Type Default Description
label
string
REQUIRED The label for this page, used in both the Navigation and no results
url
string
REQUIRED The link to this page, used in Navigation, no results and UniversalResults
verticalKey
string
The verticalKey, required for vertical search pages, must be omitted for universal search
icon
string
The icon associated with this vertical, used in no results
iconUrl
string
the url of the icon associated with this vertical, used in no results. Takes precedence over icon.
isFirst
boolean
If true, will show this page first in Navigation
isActive
boolean
If true, will add active styling to this page in Navigation
hideInNavigation
boolean
If true, hide this tab in the Navigation