Use a standalone search box

This is for:

Developer

In this article

Create the page with the standalone search box
Communicate between the two pages
Create the full search page

A standalone search box is a search box that exists separately from its result list. As an example, take the search box at the top of this page. It allows you to start your search while on this page before redirecting you to the full search page. Because such a search experience involves two pages, some data needs to be shared between them so that the query response is correct, and so that you log the proper usage analytics events.

This article walks you through the implementation of such a search experience.

If you’ve already worked with Coveo Headless controllers, this step should already be familiar to you. You need to create a search engine, instantiate a standalone search box controller and connect it to the search box DOM element. A React example implementation is available here.

Communicate between the two pages

When a visitor makes a search request using the standalone search box, the query and analytics data need to be stored before redirecting the user, to ensure that the full search page receives this stored query and analytics data. You should use local storage as the browser storage mechanism, because the client ID used by Coveo Usage Analytics is kept in local storage. For example, in the page with the standalone search box, you would include the following:

searchBox.subscribe(() => {
    const {redirectTo, value, analytics} = searchBox.state;

    if (redirectTo) {
        const data = {value, analytics};
        localStorage.setItem('coveo_standalone_search_box_data', JSON.stringify(data));

        // perform redirect
        window.location.href = redirectTo;
    }
})

Create the full search page

Prior to executing the first search on the full search page, you should configure originLevel3 so that your queries are logged correctly. You also need to set the correct query.

You can configure originLevel3 using the document.referrer value when initializing the engine, as shown below:

import { buildSearchEngine } from '@coveo/headless';

const engine = buildSearchEngine({
  configuration: {
    // ...
    analytics: {
      originLevel3: document.referrer,
    },
  },
});

In your full search page, you can set the query using the updateQuery action, as shown below:

import {loadQueryActions} from '@coveo/headless';

const {updateQuery} = loadQueryActions(engine);
const data = localStorage.getItem('coveo_standalone_search_box_data');
const {value} = JSON.parse(data);

engine.dispatch(updateQuery({q: value}));

The final steps are to delete the data in local storage and to handle the case where someone reaches the search interface without using the standalone search box (in which case there’s no data in localstorage).

If you do all of this, here’s what the code for your full search page will look like:

import {buildSearchEngine, loadQueryActions, loadSearchAnalyticsActions} from '@coveo/headless';

const engine = buildSearchEngine({
  configuration: {
    // ...
    analytics: {
      originLevel3: document.referrer,
    },
  },
});

const {updateQuery} = loadQueryActions(engine);
const data = localStorage.getItem('coveo_standalone_search_box_data');

if (data) {
  localStorage.removeItem('coveo_standalone_search_box_data');
  const {value, analytics} = JSON.parse(data);
  engine.dispatch(updateQuery({q: value}));
  engine.executeFirstSearchAfterStandaloneSearchBoxRedirect(analytics);
} else {
  engine.executeFirstSearch();
}

There you go! If you’ve made it this far, you’ve set up a standalone search box that’s sending the necessary analytics events, which can be leveraged by reporting dashboards and Coveo Machine Learning (Coveo ML).