Components Overview | Yext Hitchhikers Platform

This is the current version of search components

Overview

Components are the core building block of a Search experience. Each component represents a standalone piece of functionality. Some of the most common components include:

  • SearchBar - Displays a NLP Powered Search Bar
  • Navigation - Displays tabs to navigate between search pages
  • UniversalResults - Displays results combining multiple verticals
  • VerticalResults - Displays results for a single vertical

Adding a Component

Components are added to the page one by one using the addComponent API. Here is a basic example adding a search bar.

ANSWERS.init({
  apiKey: "df4b24f4075800e5e9705090c54c6c13",
  experienceKey: "rosetest",
  businessId: "2287528",
  experienceVersion: "PRODUCTION",
  onReady: function() {
    ANSWERS.addComponent("SearchBar", {
      container: ".search-container",
    });
  },
});

You will notice that components are added in the onReady property of the init function. The rest of the examples on this page omit this piece to focus solely on components, but components should ALWAYS be added in the onReady function.

Component Container

The container property is required for every component you wish to add to the page. This property is a JavaScript selector that must match an HTML element. You should choose a unique class name (you cannot add a component to multiple places on the page). In the example above, this HTML should be somewhere on the page:

<div class="search-container"></div>

Full Example

Putting this together a full HTML page could look like this:

<body>
  <div class="search-container"></div>
  <script>
    ANSWERS.init({
      apiKey: "3517add824e992916861b76e456724d9",
      experienceKey: "answers-js-docs",
      businessId: "3215760",
      experienceVersion: "PRODUCTION",
      onReady: function() {
        ANSWERS.addComponent("SearchBar", {
          container: ".search-container",
        });
      },
    });
  </script>
</body>

Overriding a Template

To completely override the UI of a component, you can pass in a custom Handlebars template to the template option. See custom templates for more information.

Custom Rendering

If you want to use a different templating language, you can use the render option. This option accepts a function that returns HTML. See custom rendering for more information.

Custom Components

If you want to create completely custom components, see custom components for more information.

Components Overview API

Property Type Default Description
container
string
REQUIRED The CSS selector to append the component
name
string
A unique name, if using multiple components of the same type
class
string
A custom class to apply to the component
template
string
Override internal Handlebars template
render
function
Override render function. Data provided
transformData
function
A hook for transforming data before it gets sent to render
onMount
function
Invoked when the HTML is mounted to the DOM
analyticsOptions
object
Additional properties to send with every analytics event
Feedback