Usage

This is for:

Developer

In this article

Install Atomic
Use Components to Create a Search Interface
What’s Next?

The Coveo Atomic library provides you with a customizable set of UI components that are already configured to communicate with the Coveo Platform. These web components, which are built on top of the Coveo Headless library, can be used with or without existing frameworks.

Notes

To create a starter Atomic project, check out the Coveo CLI.
To use the Atomic library in a React, Angular, or Vue.js project, check out the Atomic React wrapper, Atomic Angular wrapper, or Atomic Vue documentation, respectively.

This article provides an overview of the core Atomic concepts.

Install Atomic

CDN

The simplest way to get the Atomic component library is through a content delivery network (CDN).

Include the following scripts in the target HTML page:

<script
    type="module"
    src="https://static.cloud.coveo.com/atomic/v3/atomic.esm.js">
</script> 
<link
    rel="stylesheet"
    href="https://static.cloud.coveo.com/atomic/v3/themes/coveo.css"/>

	The main Atomic script.
	The default Atomic stylesheet. While this import is optional, if you don’t import it you’ll need to define its variables yourself.

Or, with SRI:

<script
  type="module"
  src="https://static.cloud.coveo.com/atomic/v3.11.1/atomic.esm.js"
  integrity="sha512-Zqt/jHmGOM3J/XmlhDMm52SazM0z8jGYUA1hkes8jnBJnMxqZxlxTiVoQ/7OIwmpacVEWgD/fhKYV1FBwYbHpw=="
  crossorigin="anonymous">
</script>
<link
  rel="stylesheet"
  href="https://static.cloud.coveo.com/atomic/v3.11.1/themes/coveo.css"
  integrity="sha512-m2BufPi8Tc6H2jcQfDj/PIl5H57C9jeqhbDFgFXKTtOhoC4S7ULXmx74FseZ8WXpfdT9uyccMHDBJDrIZlrUUQ=="
  crossorigin="anonymous"/>

CDN links are available for the following versions of Atomic releases:

Major: https://static.cloud.coveo.com/atomic/v3/atomic.esm.js

Recommended for development and QA environment purposes. It’s a rather safe way to always have recent features from minor version updates, while not having major breaking changes.

Minor: https://static.cloud.coveo.com/atomic/v3.0/atomic.esm.js

Recommended for production and any customer-facing app. Minor version updates are mostly bug fixes; pointing to a minor version is safe and retrieves patches instantly.

NPM

The library is also available as an npm package.

npm install @coveo/atomic

Use a bundler (Browserify, Webpack, Rollup, etc.) to require('@coveo/atomic') or import '@coveo/atomic'. The resources are exposed through the following entry points:

@coveo/atomic (various types and utilities used by Coveo Atomic, such as initializeBindings)
Example
You want to create a custom component, so you need to import initializeBindings.
import {initializeBindings} from '@coveo/atomic' // ...
@coveo/atomic/loader (Coveo Atomic components types, as well as the defineCustomElements and setNonce utilities)
Example
You use the Atomic Vue wrapper and need to Bind the custom elements to the window object. You import defineCustomElements.
import {defineCustomElements} from '@coveo/atomic/loader' // ...
@coveo/atomic/themes (sample Coveo Atomic themes)
@coveo/atomic/assets (SVG icons used by Coveo Atomic)

@coveo/atomic/lang (localization files used by Coveo Atomic)

Example

You want to copy the Atomic themes, assets and localization files to your project.

import {dirname} from 'node:path'
const themeDirectory = dirname(import.meta.resolve('@coveo/atomic/themes/coveo.css'))
const langDirectory = dirname(import.meta.resolve('@coveo/atomic/lang/en.json'))
const assetDirectory = dirname(import.meta.resolve('@coveo/atomic/assets/all.svg'))
// ...

Note

If you use TypeScript, note that Atomic doesn’t support the classic or node10/node moduleResolution options. See TypeScript module resolution and Announcing TypeScript 5.0 --moduleResolution bundler.

Use Components to Create a Search Interface

Atomic builds search pages by attaching components to target HTML elements.

This means that you can build your search page by assembling the target HTML elements:

<body>
  <atomic-search-interface id="search">
    <atomic-search-box></atomic-search-box>
    <atomic-facet-manager>
      <atomic-facet field="author" label="Authors"></atomic-facet>
      <!-- ... -->
    </atomic-facet-manager>
    <!-- ... -->
  </atomic-search-interface>
</body>

To turn these HTML elements into real Atomic components, you use a script to initialize the overarching atomic-search-interface component:

<head>
  <!-- ... -->
  <script>
    (async () => {
      await customElements.whenDefined('atomic-search-interface');
      const searchInterface = document.querySelector('#search');

      await searchInterface.initialize({
        accessToken: '<ACCESS_TOKEN>', 
        organizationId: '<ORGANIZATION_ID>', 
        renewAccessToken: <CALLBACK>, 
      });

      searchInterface.executeFirstSearch();
    })();
  </script>
  <!-- ... -->
</head>

<ACCESS_TOKEN> (string) is a search token or an API key that grants the Allowed access level on the Execute Queries domain and the Push access level on the Analytics Data domain in the target organization.

We strongly recommend that the access token enforces a searchHub value. See Defining the search hub in the authentication for more details.

<ORGANIZATION_ID> (string) is the unique identifier of your Coveo organization (for example, mycoveoorganizationa1b23c).

<CALLBACK> (function) returns a new access token, usually by fetching it from a backend service that can generate search tokens. The engine will automatically run this function when the current access token expires (that is, when the engine detects a 419 Authentication Timeout HTTP code).

Note

You don’t need to specify a renewAccessToken callback if your application is using API key authentication. This is typically not recommended, but can be legitimate in some scenarios.

Some components expose options. For example, the following atomic-search-box component will offer a maximum of two queries when the user interacts with it:

<atomic-search-box number-of-queries="2"></atomic-search-box>

Some components also expose methods. The following code sample includes two methods exposed by the atomic-search-interface component:

const searchInterface = document.querySelector("atomic-search-interface");

await searchInterface.initialize({
  accessToken: "xx564559b1-0045-48e1-953c-3addd1ee4457",
  organizationId: "searchuisamples",
}); 

searchInterface.executeFirstSearch();

	The `initialize` method is used to initialize the search interface. In this case, the `await` operator is used to wait for the interface to finish its initialization before moving on.
	The `executeFirstSearch` method is used to trigger a search after the search interface has been initialized.

Style Your Components

Atomic uses shadow DOM to instantiate components. This encapsulates a specific section of the DOM to allow for componentization, meaning that the component style is independent from the surrounding DOM styling. As such, you must style those components using their shadow DOM parts. For example:

<style>
  atomic-facet::part(label-button) {
    justify-content: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--atomic-neutral)
  }
</style>

For more detailed guide on how to customize your components, please refer to this article.

What’s Next?

Result templates determine the format of the individual query results in a search interface. When a query is successful, each result is rendered according to the first template whose condition is satisfied by that result.

Atomic currently provides one default template for all result types. More will be added in the future.

You can also create your own result templates with custom styles (see Defining a result template). To learn more, see Defining a Result Template.