---
title: Integrate a hosted search page in a Sitecore item
slug: '3257'
canonical_url: https://docs.coveo.com/en/3257/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Integrate a hosted search page in a Sitecore item
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.


[.version.c4sc.c4sc-new.5-0-710-2.June-12&-2020]
[Coveo for Sitecore 5.0.710.2](https://docs.coveo.com/en/3235#release-notes)


If you've [created a legacy hosted search page in the Coveo Administration Console](https://docs.coveo.com/en/1656/), you can integrate that search page in your Sitecore website seamlessly by inserting the [Coveo Hosted Search Page](https://docs.coveo.com/en/3259/) 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 Platform](https://docs.coveo.com/en/186/) 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**.

![Insert from template | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/hosted-search-page-insert-from-template.png)

. In the `Branches/Coveo Hive/` folder, select the **Example Hosted Search Page** template and give your new item a name.

![New Example Hosted Search Page | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/hosted-search-page-branch.png)

. In the content tree, select the **Example Hosted Search Page** data source item.

![Select the data source | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/select-hosted-search-page-data-source.png)

If you're getting an error in the `Search Page` field, see [Generate new Coveo for Sitecore API Keys](#generate-new-coveo-for-sitecore-api-keys).

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

> **Important**
>
> Many powerful Coveo features (for example, analytics reporting and machine learning driven features) rely on [search hub](https://docs.coveo.com/en/o7qa1002/) 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](https://docs.coveo.com/en/3302#setting-the-search-hub-when-using-server-side-code-to-call-the-search-api) you may use to call the Search API), ensure you [set search hub values](https://docs.coveo.com/en/3302#setting-the-search-hub) properly from the beginning.

![Hosted search page setting data source values | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/hosted-search-page-edit-data-source.png)

You can now browse your new hosted search page item in the **Experience Editor** or in **Preview** mode.
If your search page doesn't appear, your current Coveo for Sitecore API keys may lack required privileges.
See [Generate new Coveo for Sitecore API Keys](#generate-new-coveo-for-sitecore-api-keys).

## 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](https://docs.coveo.com/en/2930#automatic-recomputation-of-the-clickable-uri-at-query-time) on your CDs.

Consequently, to have the host name in clickable URIs adjusted at query time, you must use another mechanism.
A solution is to take advantage of the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) and its event system by editing the [hosted search page](https://docs.coveo.com/en/2866/) code.
To modify the hosted search page code in Coveo

. [Open the legacy hosted search page in the Interface Editor](https://docs.coveo.com/en/1852/).

. At the top of the page, select the **CODE VIEW** tab.

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

```html
<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);<1>
        result.clickUri = publicItemUrl;
        result.printableUri = publicItemUrl;
      });
    });
  });
</script>
```
<1> 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.

## Editing a hosted 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, use the [Coveo Platform](https://docs.coveo.com/en/186/) [Interface Editor](https://docs.coveo.com/en/1656/) and leverage the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) 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](https://docs.coveo.com/en/2214/) 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](https://docs.coveo.com/en/3003/) section of the [Coveo Hive Framework](https://docs.coveo.com/en/2214/) provide useful filtering and boosting functionalities.
With a Coveo hosted search page, you can achieve similar results by [setting up query pipelines](https://docs.coveo.com/en/1791/).

## Generate new Coveo for Sitecore API keys

If you're getting errors with the **Coveo Hosted Search Page** rendering or if its content isn't being rendered, your Coveo for Sitecore API keys may lack required privileges.
You can fix this by generating new API keys.

To generate the API keys

. Access the **Coveo Cloud Organization** page of the **Command Center** at `\http://<INSTANCE_HOSTNAME>/coveo/command-center/index.html#cloud-organization/`, where `<INSTANCE_HOSTNAME>` is the name of your Sitecore instance.

. Click **Log out**.

. Click **Log in**.

. Authenticate in to the [Coveo Platform](https://docs.coveo.com/en/186/) as an administrator.

. On the **Coveo Cloud Organization** page, under the **Existing** tab, make sure the [Coveo organization](https://docs.coveo.com/en/185/) you want to generate the API keys for is selected.

. Click **Apply and restart**.

> **Tip**
>
> For ease of management and security purposes, delete your old Coveo for Sitecore API keys.
> You can perform this action from the [**API Keys**](https://platform.cloud.coveo.com/admin/#/orgid/organization/api-access/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/organization/api-access/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/organization/api-access/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/organization/api-access/)) page in the [Coveo Administration Console](https://docs.coveo.com/en/183/).