Use a Standalone Search Box

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. There exist several browser storage mechanisms, such as session storage, local storage, cookies and even the URL itself. The best approach depends on the relationship between the two sites. If the sites share the same origin (which is often the case), we recommend using the 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 need to set the correct query and determine the analytics event to associate to the first search. 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 analytics will be either searchFromLink or omniBoxFromLink, depending on how the redirection was triggered. You can retrieve the proper value from the communicated data as follows:

import {loadSearchAnalyticsActions} from '@coveo/headless';
 
const {logSearchFromLink, logOmniboxFromLink} = loadSearchAnalyticsActions(engine);
const data = localStorage.getItem('coveo_standalone_search_box_data');
const {analytics} = JSON.parse(data);
const {cause, metadata} = analytics;
 
const event = cause === 'searchFromLink' ? logSearchFromLink() : logOmniboxFromLink(metadata);
 
engine.executeFirstSearch(event);

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 that case, there’s no data in localstorage).

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

import {loadQueryActions, loadSearchAnalyticsActions} from '@coveo/headless';
 
const {updateQuery} = loadQueryActions(engine);
const {logSearchFromLink, logOmniboxFromLink} = loadSearchAnalyticsActions(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);
    const {cause, metadata} = analytics;
 
    const event = cause === 'searchFromLink' ? logSearchFromLink() : logOmniboxFromLink(metadata);
 
    engine.dispatch(updateQuery({q: value}));
    engine.executeFirstSearch(event);
} 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.

Recommended Articles