# Coveo Recommendation Component (CoveoRecommendation)

The Recommendation component is a SearchInterface that displays recommendations typically based on user history.

This component usually listens to the main SearchInterface. When the main SearchInterface generates a query, the Recommendation component generates another query to get the recommendations at the same time.

To get history-based recommendations, you will likely want to include the `pageview` script in your page (see coveo.analytics.js). However, including this script is not mandatory. For instance, you could use the Recommendation component without the Coveo Machine Learning service to create a simple "recommended people" interface.

It is possible to include this component inside another SearchInterface, but it is also possible to instantiate it as a "standalone" search interface, without even instantiating a main SearchInterface component. In any case, a Recommendation component always acts as a full-fledged search interface. Therefore, you can include any component inside the Recommendation component (Searchbox, Facet, Sort, etc.), just as you would inside the main SearchInterface component.

Available since

  July 2016 Release (v1.667.24)

## Index

### Methods

- attachComponent
- debugInfo
- detachComponent
- detachComponentsInside
- disable
- enable
- getBindings
- getComponents
- getQueryContext

### Properties

- disabled
- logger
- responsiveComponents
- ID

### Component Options

- dropdownHeaderLabel
- enableResponsiveMode
- hideIfNoResults
- id
- mainSearchInterface
- optionsToUse
- responsiveBreakpoint
- sendActionsHistory
- userContext

### Constructors

- constructor

## Methods

### attachComponent

- attachComponent(type: string, component: BaseComponent): void

- Inherited from SearchInterface.attachComponent

  - Defined in ui/SearchInterface/SearchInterface.ts :617

  Attaches a component to the search interface. This allows the search interface to easily list and iterate over its components.

  #### Parameters

  - ##### type: string

    Normally, the component type is a unique identifier without the `Coveo` prefix (e.g., `CoveoFacet` -> `Facet`, `CoveoPager` -> `Pager`, `CoveoQuerybox` -> `Querybox`, etc.).

  - ##### component: BaseComponent

    The component instance to attach.

  #### Returns void

### debugInfo

- debugInfo(): any

- Inherited from BaseComponent.debugInfo

  - Defined in ui/Base/BaseComponent.ts :41

  Return the debug info about this component.

  #### Returns any

### detachComponent

- detachComponent(type: string, component: BaseComponent): void

- Inherited from SearchInterface.detachComponent

  - Defined in ui/SearchInterface/SearchInterface.ts :627

  Detaches a component from the search interface.

  #### Parameters

  - ##### type: string

    Normally, the component type is a unique identifier without the `Coveo` prefix (e.g., `CoveoFacet` -> `Facet`, `CoveoPager` -> `Pager`, `CoveoQuerybox` -> `Querybox`, etc.).

  - ##### component: BaseComponent

    The component instance to detach.

  #### Returns void

### detachComponentsInside

- detachComponentsInside(element: HTMLElement): void

- Inherited from SearchInterface.detachComponentsInside

  - Defined in ui/SearchInterface/SearchInterface.ts :714

  Detaches from the SearchInterface every component that is inside the given element.

  #### Parameters

  - ##### element: HTMLElement

  #### Returns void

### disable

- disable(): void

- Inherited from BaseComponent.disable

  - Defined in ui/Base/BaseComponent.ts :52

  Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

  #### Returns void

### enable

- enable(): void

- Inherited from BaseComponent.enable

  - Defined in ui/Base/BaseComponent.ts :61

  Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

  #### Returns void

### getBindings

- getBindings(): object

- Inherited from SearchInterface.getBindings

  - Defined in ui/SearchInterface/SearchInterface.ts :639

  Returns the bindings, or environment, for the current component.

  #### Returns object

### getComponents

- getComponents<T>(type: string): T[]

- Inherited from SearchInterface.getComponents

  - Defined in ui/SearchInterface/SearchInterface.ts :693

  Gets all the components of a given type.

  #### Type parameters

  - #### T

  #### Parameters

  - ##### type: string

    Normally, the component type is a unique identifier without the `Coveo` prefix (e.g., `CoveoFacet` -> `Facet`, `CoveoPager` -> `Pager`, `CoveoQuerybox` -> `Querybox`, etc.).

  #### Returns T[]

### getQueryContext

- getQueryContext(): Context

- Inherited from SearchInterface.getQueryContext

  - Defined in ui/SearchInterface/SearchInterface.ts :665

  Gets the query context for the current search interface.

  If the search interface has performed at least one query, it will try to resolve the context from the last query sent to the Coveo Search API.

  If the search interface has not performed a query yet, it will try to resolve the context from any avaiable PipelineContext component.

  If multiple PipelineContext components are available, it will merge all context values together.

  Note: Having multiple PipelineContext components in the same search interface is not recommended, especially if some context keys are repeated across those components.

  If no context is found, returns `undefined`

  #### Returns Context

## Properties

### disabled

disabled: boolean

Inherited from BaseComponent.disabled

- Defined in ui/Base/BaseComponent.ts :23

A disabled component will not participate in the query, or listen to ComponentEvents.

type

  {boolean}

### logger

logger: Logger

Inherited from BaseComponent.logger

- Defined in ui/Base/BaseComponent.ts :18

Allows component to log in the dev console.

### responsiveComponents

responsiveComponents: ResponsiveComponents

Inherited from SearchInterface.responsiveComponents

- Defined in ui/SearchInterface/SearchInterface.ts :528

Allows to get and set the different breakpoints for mobile and tablet devices.

This is useful, amongst other, for Facet, Tab and ResultList

### Static ID

ID: string

Inherited from BaseComponent.ID

- Defined in ui/Base/BaseComponent.ts :28

The static ID that each component needs in order to be identified.
For example, SearchButton -> static ID: SearchButton -> className: CoveoSearchButton

## Component Options

### dropdownHeaderLabel

dropdownHeaderLabel: string

- Defined in ui/Recommendation/Recommendation.ts :196

If Recommendation.options.enableResponsiveMode is `true` for all Recommendation components, specifies the label of the dropdown button that allows to display the Recommendation components when in responsive mode.

If more than one Recommendation component in the search interface specifies a value for this option, then the framework uses the first occurrence of the option.

Default value is `Recommendations`.

Markup configuration example(s) :

    data-dropdown-header-label='foo'

### enableResponsiveMode

enableResponsiveMode: boolean

- Defined in ui/Recommendation/Recommendation.ts :169

Specifies whether to enable responsive mode for Recommendation components. Setting this options to `false` on any Recommendation component in a search interface disables responsive mode for all other Recommendation components in the search interface.

Responsive mode displays all Recommendation components under a single dropdown button whenever the width of the HTML element which the search interface is bound to reaches or falls behind a certain threshold (see Recommendation.options.responsiveBreakpoint).

See also Recommendation.options.dropdownHeaderLabel.

Default value is `true`.

Default

  `true`

Markup configuration example(s) :

    data-enable-responsive-mode='true'
    data-enable-responsive-mode='false'

### hideIfNoResults

hideIfNoResults: boolean

- Defined in ui/Recommendation/Recommendation.ts :146

Specifies whether to hide the Recommendations component if no result or recommendation is available.

Default value is `true`.

Default

  `true`

Markup configuration example(s) :

    data-hide-if-no-results='true'
    data-hide-if-no-results='false'

### id

id: string

- Defined in ui/Recommendation/Recommendation.ts :100

Specifies the ID of the interface. The usage analytics use the interface ID to know which recommendation interface was selected.

Default value is `Recommendation` for the first one and `Recommendation_{number}`, where {number} depends on the number of Recommendation interfaces with default IDs in the page for the others.

Markup configuration example(s) :

    data-id='foo'

### mainSearchInterface

mainSearchInterface: HTMLElement

- Defined in ui/Recommendation/Recommendation.ts :85

Specifies the main SearchInterface to listen to.

### optionsToUse

optionsToUse: string[] | ("expression" | "advancedExpression" | "constantExpression" | "disjunctionExpression")[]

- Defined in ui/Recommendation/Recommendation.ts :119

Specifies which options from the main QueryBuilder to use in the triggered query.

Possible values are:

- `expression`
- `advancedExpression`
- `constantExpression`
- `disjunctionExpression`

Example:

Adding the expression (`q`) and the advanced expression (`aq`) parts of the main query in the triggered query:

`data-options-to-use="expression,advancedExpression"`

Default value is `expression`.

Default

  `[expression]`

### responsiveBreakpoint

responsiveBreakpoint: number

- Defined in ui/Recommendation/Recommendation.ts :185

If Recommendation.options.enableResponsiveMode is `true` for all Recommendation components, specifies the width threshold (in pixels) of the search interface at which Recommendation components go in responsive mode.

Recommendation components go in responsive mode when the width of the search interface is equal to or lower than this value.

The `search interface` corresponds to the HTML element with the class `CoveoSearchInterface`.

If more than one Recommendation component in the search interface specifies a value for this option, then the framework uses the last occurrence of the option.

Default value is `1000`.

Default

  `1000`

Markup configuration example(s) :

    data-responsive-breakpoint='10'

### sendActionsHistory

sendActionsHistory: boolean

- Defined in ui/Recommendation/Recommendation.ts :135

Specifies whether to send the actions history along with the triggered query.

Setting this option to `false` makes it impossible for this component to get Coveo Machine Learning recommendations.

However, setting this option to `false` can be useful to display side results in a search page.

Default value is `true`.

deprecated

  This option is now deprecated. The correct way to control this behavior is to configure an appropriate machine learning model in the administration interface (Recommendation, Relevance tuning, Query suggestions).

Default

  `true`

Markup configuration example(s) :

    data-send-actions-history='true'
    data-send-actions-history='false'

### userContext

userContext: IStringMap<any>

- Defined in ui/Recommendation/Recommendation.ts :91

Specifies the user context to send to Coveo usage analytics. The component sends this information with the query alongside the user history to get the recommendations.

## Constructors

### constructor

- new Recommendation(element: HTMLElement, options?: IRecommendationOptions, analyticsOptions?: object, _window?: Window): Recommendation

- Overwrites SearchInterface.constructor

  - Defined in ui/Recommendation/Recommendation.ts :206

  Creates a new Recommendation component.

  #### Parameters

  - ##### element: HTMLElement

    The HTMLElement on which to instantiate the component.

  - ##### Default value options: IRecommendationOptions = {}

    The options for the Recommendation component.

  - ##### Default value analyticsOptions: object = {}

  - ##### Default value _window: Window = window

  #### Returns Recommendation

### Implements

- IComponentBindings
- IComponentBindings