---
title: Integrate a recommendation interface in a web page
slug: '1934'
canonical_url: https://docs.coveo.com/en/1934/
collection: javascript-search-framework
source_format: adoc
---
# Integrate a recommendation interface in a web page
[jsui-new Coveo JavaScript Search Framework v1.667.24]
When you want to take advantage of a [Coveo Machine Learning (Coveo ML)](https://docs.coveo.com/en/188/) [Content Recommendation (CR)](https://docs.coveo.com/en/1016/) [model](https://docs.coveo.com/en/1012/) on a site, you should integrate a [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) recommendation interface into each page in which you want to display recommendations (see [Deploy Content Recommendations (CR)](https://docs.coveo.com/en/1886/)).
To integrate a recommendation interface in a web page
* [Import the required JavaScript Search Framework resources](https://docs.coveo.com/en/2075/).
* Configure a search endpoint for the recommendation interface (see the [`SearchEndpoint.configureCloudV2Endpoint`](https://coveo.github.io/search-ui/classes/searchendpoint.html#configurecloudv2endpoint) method).
* Initialize the recommendation interface (see the [`initRecommendation`](https://coveo.github.io/search-ui/globals.html#initrecommendation) top-level function).
* Configure the recommendation interface in the page markup (see the [`Recommendation`](https://coveo.github.io/search-ui/components/recommendation.html) component).
The following sample markup shows how to integrate a recommendation interface.
```html
RECOMMENDATION_INTERFACE_TITLE
```
Where:
* ``
The unique identifier of the target [Coveo organization](https://docs.coveo.com/en/185/) (for example, `mycoveocloudvorganizationg8tp8wu3`).
* ``
A [public API key](https://docs.coveo.com/en/1718#api-key-templates) or a valid [search token](https://docs.coveo.com/en/1346/) if the page requires user authentication (see [Search token authentication](https://docs.coveo.com/en/56/)).
See also [Choose and implement a search authentication method](https://docs.coveo.com/en/1369/).
* ``
A CSS selector that matches the HTML element with the `CoveoRecommendation` class in the search page markup.
For example, if the target element has the `id="recommendation"` attribute, `#recommendation` would be a good selector.
* ``
The name of the [query pipeline](https://docs.coveo.com/en/180/) to enforce for each [query](https://docs.coveo.com/en/231/) originating from the recommendation interface (for example, `techDocsRecommendations`).
This should be set to the name of the [query pipeline which contains the CR model](https://docs.coveo.com/en/1886#Model) that you want to use.
> **Note**
>
> For the sake of simplicity, the above code sample suggests that you [enforce the query pipeline routing](https://docs.coveo.com/en/1666#search-interface-enforced-routing) directly in the markup configuration of your recommendation interface.
>
> A more flexible approach would be to omit the `data-pipeline` attribute in the `Recommendation` component markup configuration, and instead use the [condition](https://docs.coveo.com/en/2793/)-based [query pipeline routing mechanism](https://docs.coveo.com/en/1666#condition-based-routing-recommended).
* ``
> **Leading practice**
>
> Setting the recommendation interface `searchHub` to a distinctive and meaningful value is useful for reporting.
The name of the [origin level 1](https://docs.coveo.com/en/1337/) to use when sending [events](https://docs.coveo.com/en/260/) from the recommendation interface.
This value also defines the [search hub](https://docs.coveo.com/en/1342/) to use for all queries originating from the recommendation interface.
> **Note**
>
> CR models don't take the `searchHub` query parameter into account.
> However, each model can be configured to only learn from search and click events that match certain filters (for example, if the events have `CommunitySearch` as their `originLevel1`).
>
> UA view events don't have an `originLevel1`, but they can still be filtered according to their [`contentType`](https://docs.coveo.com/en/1744/).
* `RECOMMENDATION_INTERFACE_TITLE`
The title to display for the recommendation interface (for example, **People Also Viewed**).
> **Notes**
>
> * For a Coveo organization in the HIPAA environment, you would include a third argument when calling the `configureCloudV2Endpoint` to set your search endpoint URI to `+https://searchhipaa.cloud.coveo.com/rest/search+`:
>
> ```javascript
const endpointUri = "https://searchhipaa.cloud.coveo.com/rest/search";
Coveo.SearchEndpoint.configureCloudV2Endpoint(namespace.organizationId,
namespace.accessToken,
endpointUri);
```
>
> You would also set the [`endpoint`](https://coveo.github.io/search-ui/components/analytics.html#options.endpoint) option of your [`Analytics`](https://coveo.github.io/search-ui/components/analytics.html) component to `+https://analyticshipaa.cloud.coveo.com/rest/ua+`:
>
> ```html
```
>
> * If you're already initializing a search endpoint in a web page (for example, for a standalone search box), you don't need to initialize a new endpoint for your recommendation interface.
## Complete JavaScript Search Framework code sample
You've configured a CR model in the `techDocRecommendations` query pipeline of the `mycoveocloudvorganizationg8tp8wu3` organization.
You include code similar to the following in the pages of your technical documentation website to track users' action history, [send view events](https://docs.coveo.com/en/1818#send-view-events), and render a **People Also Viewed** recommendation interface.
```html
Customize the Acme Widget