This example is an example of how to integrate an Optimizely GraphQL generated website with a powerful search engine like Coveo. Coveo has CoveoAtomic components available to integrate into the react front-end. The Coveo components will communicate with the Coveo Platform/Index.
- CMS Visual Builder
- Guide for Optimizely
- Coveo Platform
- Coveo Atomic
- Coveo Headless
- Demo site eCommerce
- Demo site help
- Step 1. Create, or use existing Optimizely Sandbox (
Optimizely Partner portal) - Step 2. Create an Coveo Platform Organization
- Step 3. Index the Optimizely Contents using GraphQL connector
- Step 4. Index other content sources
- Step 5. Download/configure your Front-end or Masterclass Optimizely
- Step 6. Create Search API Key
- Step 7. Build/deploy your front-end (
yarn build) - Step 8. Configure the Coveo Platform
Configure your local env by adding .env.local file in the root folder
Make sure to add the following values:
# Optimizely Global
OPTIMIZELY_DEBUG=0
# Optimizely Graph
OPTIMIZELY_GRAPH_GATEWAY=https://beta.cg.optimizely.com/
OPTIMIZELY_GRAPH_APP_KEY=YOUR_KEY_HERE
OPTIMIZELY_GRAPH_SECRET=YOUR_SECRET_HERE
OPTIMIZELY_GRAPH_SINGLE_KEY=YOUR_SINGLE_KEY_HERE
OPTIMIZELY_GRAPH_UPDATE_DELAY=2000
OPTIMIZELY_GRAPH_QUERY_LOG=0
# Optimizely CMS
OPTIMIZELY_CMS_URL=YOUR_INSTANCE_URL_HERE
OPTIMIZELY_CMS_CLIENT_ID=YOUR_CLIENT_HERE
OPTIMIZELY_CMS_CLIENT_SECRET=YOUR_CLIENT_SECRET_HERE
OPTIMIZELY_CMS_USER_ID=YOUR_USER_ID_HERE
# Frontend specfic
SITE_DOMAIN=localhost:3002
OPTIMIZELY_PUBLISH_TOKEN=optly-5d5216fe-047f-49e3-b8c6-579712b3606e
NODE_TLS_REJECT_UNAUTHORIZED=0
# Coveo
NEXT_PUBLIC_PLATFORM_URL=https://platform.cloud.coveo.com
NEXT_PUBLIC_ORGANIZATION_ID=YOUR_COVEO_ORG_ID_HERE
NEXT_PUBLIC_API_KEY=YOUR_COVEO_SEARCH_API_KEY_HERE
The YOUR_COVEO_SEARCH_API_KEY_HERE should be configured as follows:
- API KEY should have
SearchandAnalytics - Pushpermissions. Important: make sure the SEARCH_KEY targets the properSearchHub=YOUR_HUB - YOUR_HUB set the proper search hub:
export const searchEngine = searchEngineGenerator({
name: "searchEngine",
search: { searchHub: "YOUR_HUB", pipeline: "Search" },
});Then make sure you've got your local environment:
yarn installFinally, start the local development server
yarn devOpen http://localhost:3000 with your browser to see the result.
This section will describe how to use the Coveo Atomic components, how to setup the back-end and the ML models.
Search box on main page: _header.tsx
Search page: Search.tsx
Search Engine configuration: Engine.ts
Which content do we need to show for your specific use case? Based on what you want to show, you must index the contents. When the content comes from Optimizely, what kind of Objects are they? In the examples we index ArticlePages, but you might need more.
Besides Optimizely content, do you need any other contents? You might have:
In many deployments security is an important aspect. The contents provided in the Search Interface are secured based upon a login. This must/should be reflected in your index. With Coveo you can use security settings for each source you index. Some of the connectors natively supports the security ACL from the target system (Salesforce, Sharepoint, etc). When pushing content you can also create the proper security groups.
When you are using security in your index, you must also create a search token for the Search Interface. Based on the token the index knows which items belong to your permissions.
Read about the architecture and design your interfaces accordingly.
In our example we are using a Search API key which can execute queries and sent analytics events. When you have more dedicated scenario's where you need to work with secured contents, read further on authentication provided by Coveo..
Create Search API Key
You must configure it with a specific searchHub. That is being used to secure the token for that specific searchHub. In the src\engine.ts you can specify the name for your specific searchHub.
Since our current UI is build on React, we can use the React Wrapper components from Coveo. They are available here.
Before we can use the components we need to setup the Search Engine. In the example (see)[(/src/engine.ts)].
export const searchEngine = searchEngineGenerator({
name: "searchEngine",
search: { searchHub: "wimssearch", pipeline: "Search" },
});The searchHub is used to identify where the search comes from (and is usually also used to secure the API Key).
The pipeline can be configured to access which Query pipeline will be used to execute the search request.
Inside the Query pipeline you can specify:
- Which filters to use
- Thesaurus entries
- Boosting/Ranking rules
- ML models to use
- Lots more
For each use case on your search (for example recommendated articles or recommended products) you can create other instances of Search Engines, with their own specific properties.
In the search page several facets are defined:
<AtomicFacetManager>
<AtomicFacet field="source" label="Source" />
<AtomicFacet field="author" label="Author" />
<AtomicFacet field="ec_category" label="Category" />
<AtomicFacet field="articletags" label="Article Tag" />
</AtomicFacetManager>Facets must first be defined on a field within the index. Once that has done, a field can be used to shown as a facet. Showing the counts, using them as filters is all included in the default Atomic Components.
Remark: Facets are always based upon the resultlist.
When your result set has multiple different content types, you might want to consider to use differen result templates.
You can set specific conditions (like if a field value exists or from a specific source) to activate a specific template.
The template then can use different result template components to render the result.
A lot of the ML Models are based upon Search Analytics. Most of the Atomic Components will sent Analytic events automatically to the Coveo Platform.
Coveo offers several ML models. From Query Suggestions, Automatic Relevance Tuning to Generative AI models.
Most models work with our out of the box Atomic components.
The back-end Coveo Platform can be used to setup: