Upgrade Your Boring Input Box To A Coveo Standalone Search Box

Upgrade Your Input Box To A Coveo Standalone Search Box

You've got a fancy search page, but you want to give your users the ability to have a similar experience by searching on any page. Not to mention, capture more analytics, and utilize the Query Suggest model.

Well, it's not that difficult to do if you want to go down the route of a simple Coveo JSUI Standalone Searchbox.

Setup

Resources

Inside the header of the page your adding it to you'll need to reference the Search UI CSS and JavaScript.

<link rel="stylesheet" href="https://static.cloud.coveo.com/searchui/v2.7219/css/CoveoFullSearch.css"/>
<script class="coveo-script" src="https://static.cloud.coveo.com/searchui/v2.7219/js/CoveoJsSearch.Lazy.min.js"></script>

If you need to refer to different versions of the above files, you can reference the JavaScript Search Framework CDN Links.

Configure The Endpoint

Next, you'll need to update the endpoint to point to your Organization along with an API token with the necessary priviledges.

<script>
document.addEventListener("DOMContentLoaded", () => {
    const searchBoxRoot = document.getElementById("searchbox");
    Coveo.SearchEndpoint.configureCloudV2Endpoint("", "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx");
    Coveo.initSearchbox(searchBoxRoot, "https://abccompany.com/search"
    );
});
</script>

When it's initialized, initSearchbox ends up calling initStandaloneSearchInterface.

Add The Search Box HTML

Lastly you need to add the HTML to the page where you want the Search Box to appear.

 <div id="searchbox">
    <div class="CoveoAnalytics" data-search-hub="search_hub_name"></div>
    <div class="CoveoSearchbox"></div>
  </div>

Additional Steps

Be sure to configure a Query Suggest Model in your Platform Admin and attach it to the appropriate Query Pipeline. If you want to know more about setting up a Query Suggest Model, just follow along in the blog Creating a Query Suggest Model in Coveo Cloud Platform Admin.

This will allow for users to get suggested queries based upon previous successful queries by other visitors. Note: this is not results, but rather query suggestions.