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 inferred 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	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

Back

< Using a Custom Renderer

Results Pages >

Feedback

<% elem.innerText %>