Upgrade Your Boring Input Box To A Coveo Standalone Search Box

February 18, 2022

By David Austin

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.

Image of Fishtank employee David Austin

David Austin

Development Team Lead | Sitecore Technology MVP x 3

David is a decorated Development Team Lead with Sitecore Technology MVP and Coveo MVP awards, as well as Sitecore CDP & Personalize Certified. He's worked in IT for 25 years; everything ranging from Developer to Business Analyst to Group Lead helping manage everything from Intranet and Internet sites to facility management and application support. David is a dedicated family man who loves to spend time with his girls. He's also an avid photographer and loves to explore new places.