Step 2: Add a Component

Now you have the sample app up and running, you can start building.

First, open App.tsx. Here, you’ll see a reference to the Search Headless provider, which is being passed properties from the answersHeadlessConfig object.

export default function App() {
  return (
    <AnswersHeadlessProvider {...answersHeadlessConfig}>
      <PageViewContextProvider >
        <div className='flex justify-center px-4 py-6'>
          <div className='w-full max-w-5xl'>
            <PageRouter
              Layout={StandardLayout}
              routes={routeConfig}
            />
          </div>
        </div>
      </PageViewContextProvider>
    </AnswersHeadlessProvider>
  );
}

Navigate to answersHeadlessConfig.ts to see the details of our experience which are being passed to the Search Headless provider.

import { AnswersHeadlessProvider } from '@yext/search-headless-react';

type HeadlessProviderProps = Parameters<typeof AnswersHeadlessProvider>[0];

export const answersHeadlessConfig: HeadlessProviderProps = {
  apiKey: '3517add824e992916861b76e456724d9',
  experienceKey: 'answers-js-docs',
  locale: 'en',
  sessionTrackingEnabled: true,
};

Next, open the UniversalSearchPage.tsx, which details everything on the universal search page.

Let’s add the location bias component.

Import the LocationBias component.

import LocationBias from '../components/LocationBias';

Below the UniversalResults, add
```
<LocationBias />
```

Your return statement becomes

return (
   <div className='UniversalSearchPage'>
     <DirectAnswer />
     <UniversalResults
       appliedFiltersConfig={universalResultsFilterConfig}
       verticalConfigs={universalResultsConfig}
     />
     <LocationBias />
   </div>
 );

Navigate to the experience to view the location bias component at the bottom of the page.

Feedback

<% elem.innerText %>