Integrate a Hosted Search Page in a Sitecore Item

This is for:

Developer System Administrator

In this article

Get Dynamic Clickable URIs in Search Results
Required API Key Privileges
Editing a Coveo Search Page Versus Creating Search Pages in Sitecore Items

Legacy feature

This article pertains to the Coveo Hive framework which is now in maintenance mode.

Choose one of Coveo’s more modern, lightweight, and responsive libraries for any future search interface development. See the search interface Implementation guide for more details.

Coveo for Sitecore 5.0.710.2

If you have created a classic hosted search page in the Coveo Administration Console, you can integrate that search page in your Sitecore website seamlessly by inserting the Coveo Hosted Search Page rendering in a Sitecore item. Once the Sitecore item web page is loaded, the Coveo Hosted Search Page component is initialized, at which time the content of the target Coveo search page is retrieved and injected into the page layout.

Coveo for Sitecore further eases the implementation process by providing an Example Hosted Search Page branch template that bundles a Sitecore item linked to a layout which already contains the Coveo Hosted Search Page rendering, and the rendering data source. This branch template may be used in a standard Sitecore site or in an SXA site.

To create a search page item using the Example Hosted Search Page branch template

In the Content Editor, right-click the parent of the new search page item and select Insert > Insert from template.
In the Branches/Coveo Hive/ folder, select the Example Hosted Search Page template and give your new item a name.
In the content tree, select the Example Hosted Search Page data source item.

If you’re getting an error in the Search Page field, see Required API Key Privileges.

Select the Coveo organization search page you want to use from the Search Page Droplist and set a Search Hub value.

Many powerful Coveo features (for example, analytics reporting and machine learning driven features) rely on search hub values. Meaningful search hub values are also essential in identifying the origin of all calls to the Coveo Search API, as this can avoid you accidental extra costs.

Regardless of the way you build your search interfaces (or the other methods you may use to call the Search API), ensure you set search hub values properly from the beginning.

Hosted search page setting data source values | Coveo for Sitecore 5

You can now browse your new hosted search page item in the Experience Editor or in Preview mode. If your Coveo search page doesn’t appear, see Required API Key Privileges.

Get Dynamic Clickable URIs in Search Results

Sitecore items are indexed on the CM instance. Therefore, Sitecore items in the Coveo index have URLs reflecting your CM host name. The Coveo Hosted Search Page rendering doesn’t use the Coveo for Sitecore proxy. That means you don’t get the benefit of having search result clickable URIs automatically recomputed at query time on your CDs.

Consequently, you must implement a mechanism to have the host name in clickable URIs adjusted at query time using another means. A solution is to take advantage of the Coveo JavaScript Search Framework and its event system by editing the hosted search page code.

To modify the hosted search page code in Coveo

Open the classic hosted search page in the Interface Editor.
At the top of the page, select the CODE VIEW tab.

Add the following <script> block after the final closing </div> tag:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const publicHostname = window.location.protocol + '//' + window.location.hostname;
    let publicItemUrl;
    root = document.querySelector("#search");
    Coveo.$$(root).on("preprocessResults", function(e, args) {
      args.results.results.forEach(function(result) {
        publicItemUrl = result.clickUri.replace("<HOSTNAME_TO_CHANGE>", publicHostname);
        result.clickUri = publicItemUrl;
        result.printableUri = publicItemUrl;
      });
    });
  });
</script>

Replace <HOSTNAME_TO_CHANGE> with the protocol and host name of your indexed items (for example, https://development). To target multiple host names, replace <HOSTNAME_TO_CHANGE> with a variable and set its value using the JavaScript regular expression match() method prior to this line.

Required API Key Privileges

Within Sitecore, calls to Coveo are performed to get the list of your organization search pages and to retrieve the code of the selected search page.

In your Coveo organization, for the Configuration API key, the Edit all access right on the Search pages domain is required for the Search Page data source Droplist to be populated.
In your Coveo organization, for the Search API key, the Edit all access right on the Search pages domain is required for the Coveo search page code to be retrieved.

Editing a Coveo Search Page Versus Creating Search Pages in Sitecore Items

Using the Example Hosted Search Page branch template is a quick way to integrate a Coveo organization search page into a Sitecore item layout. To further enhance your search page, you must continue to use the Interface Editor and leverage the Coveo JavaScript Search Framework directly.

The alternative method is to create search pages from the ground up in Sitecore, using Coveo for Sitecore renderings. This approach lets you use

most Coveo JavaScript Search Framework components (and most of their options) indirectly, through the Coveo Hive framework layer.
Sitecore-specific renderings included in the Coveo Hive framework.

Sitecore-specific renderings take advantage of Sitecore features and context information. These renderings can significantly increase the functionality of search pages and the relevance of search page results.

For example, the renderings in the Scopes section of the Coveo Hive Framework provide useful filtering and boosting functionalities. With a Coveo hosted search page, you can achieve similar results by setting up query pipelines.