Support Menu

Coveo component Recommendation

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.

Index

Component Options

dropdownHeaderLabel

dropdownHeaderLabel: string

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

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.

Markup configuration example(s) :
data-enable-responsive-mode='true'
data-enable-responsive-mode='false'

hideIfNoResults

hideIfNoResults: boolean

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

Default value is false.

Markup configuration example(s) :
data-hide-if-no-results='true'
data-hide-if-no-results='false'

id

id: string

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

Specifies the main SearchInterface to listen to.

optionsToUse

optionsToUse: Array<"expression" | "advancedExpression" | "constantExpression" | "disjunctionExpression"> | Array<string>

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.

Markup configuration example(s) :
data-options-to-use='expression'
data-options-to-use='expression,advancedExpression'
data-options-to-use='expression,advancedExpression,constantExpression'
data-options-to-use='expression,advancedExpression,constantExpression,disjunctionExpression'

responsiveBreakpoint

responsiveBreakpoint: number

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.

Markup configuration example(s) :
data-responsive-breakpoint='10'

sendActionsHistory

sendActionsHistory: boolean

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.

Markup configuration example(s) :
data-send-actions-history='true'
data-send-actions-history='false'

userContext

userContext: string

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.

Markup configuration example(s) :
data-user-context='foo'

Methods

attachComponent

  • 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

detachComponent

disable

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

    Returns void

enable

  • enable(): void
  • 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

getComponents

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

hideWaitAnimation

  • hideWaitAnimation(): void

isNewDesign

  • isNewDesign(): boolean

showWaitAnimation

  • showWaitAnimation(): void

Properties

disabled

disabled: boolean

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

type

{boolean}

logger

logger: Logger

Allows component to log in the dev console.

responsiveComponents

responsiveComponents: ResponsiveComponents

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

This is useful, among other things, for Facet, Tab and ResultList components.

Static ID

ID: string

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

Constructors

constructor

  • new Recommendation(element: HTMLElement, options?: IRecommendationOptions, analyticsOptions?: object, _window?: Window): Recommendation
  • 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