atomic-recs-interface

This is for:

Developer
In this article

The atomic-recs-interface component is the parent to all other atomic components in a recommendation interface. It handles the headless recommendation engine and localization configurations.

Properties

Property Attribute Description Type Default

CspNonce

csp-nonce

The value to set the nonce attribute to on inline script and style elements generated by this interface and its child components. If your application is served with a Content Security Policy (CSP) that doesn’t include the script-src: 'unsafe-inline' or style-src: 'unsafe-inline' directives, you should ensure that your application server generates a new nonce on every page load and uses the generated value to set this prop and serve the corresponding CSP response headers (i.e., script-src 'nonce-<YOUR_GENERATED_NONCE>' and style-src 'nonce-<YOUR_GENERATED_NONCE>'). Otherwise you may see console errors such as - Refused to execute inline script because it violates the following Content Security Policy directive: […​] - Refused to apply inline style because it violates the following Content Security Policy directive: […​].

Example:

<script nonce="<YOUR_GENERATED_NONCE>">
import {setNonce} from '@coveo/atomic';
setNonce('<YOUR_GENERATED_NONCE>');
</script>

string | undefined

analytics

analytics

Whether analytics should be enabled.

boolean

true

engine

The recommendation interface headless engine.

RecommendationEngine<{}> | undefined

fieldsToInclude

fields-to-include

A list of non-default fields to include in the query results.

Specify the property as an array using a JSON string representation:

<atomic-recs-interface fields-to-include='["fieldA", "fieldB"]'></atomic-recs-interface>

string | string[]

'[]'

i18n

The recommendation interface i18next instance.

i18n

i18next.createInstance()

iconAssetsPath

icon-assets-path

The icon assets path. By default, this will be a relative URL pointing to ./assets.

Example: "/mypublicpath/icons"

string

'./assets'

language

language

The recommendation interface language.

string

'en'

languageAssetsPath

language-assets-path

The language assets path. By default, this will be a relative URL pointing to ./lang.

Example: "/mypublicpath/languages"

string

'./lang'

localizationCompatibilityVersion

localization-compatibility-version

The compatibility JSON version for i18next to use (see i18next Migration Guide).

"v3" | "v4"

'v3'

logLevel

log-level

The severity level of the messages to log in the console.

"debug" | "error" | "fatal" | "info" | "silent" | "trace" | "warn" | undefined

pipeline

pipeline

The recommendation interface query pipeline.

If the recommendation interface is initialized using initializeWithRecommendationEngine, the query pipeline should instead be configured in the target engine.

string | undefined

searchHub

search-hub

The recommendation interface search hub.

If the recommendation interface is initialized using initializeWithRecommendationEngine, the search hub should instead be configured in the target engine.

string | undefined

timezone

timezone

The tz database identifier of the time zone to use to correctly interpret dates in the query expression, facets, and result items. By default, the timezone will be guessed.

Example: "America/Montreal"

string | undefined

Methods

getOrganizationEndpoints

Signature: getOrganizationEndpoints(organizationId: string, env?: PlatformEnvironment) => Promise<{ platform: string; analytics: string; search: string; admin: string; }>

Returns: Promise<{ platform: string; analytics: string; search: string; admin: string; }>

getRecommendations

Fetches new recommendations.

Signature: getRecommendations() => Promise<void>

Returns: Promise<void>

initialize

Initializes the connection with the headless recommendation engine using options for accessToken (required), organizationId (required), renewAccessToken, and platformUrl.

Signature: initialize(options: RecsInitializationOptions) => Promise<void>

Returns: Promise<void>

initializeWithRecommendationEngine

Initializes the connection with an already preconfigured headless recommendation engine. This bypasses the properties set on the component, such as analytics, recommendation, searchHub, language, timezone & logLevel.

Signature: initializeWithRecommendationEngine(engine: RecommendationEngine) => Promise<void>

Returns: Promise<void>