Usage

Coveo Relevance Cloud Developer Atomic Product Documentation

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

Notes

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/v2/atomic.esm.js">
</script> 1
<link
    rel="stylesheet"
    href="https://static.cloud.coveo.com/atomic/v2/themes/coveo.css"/> 2
1 The main Atomic script.
2 The default Atomic stylesheet. While this import is optional, if you don’t import it you will need to define its variables yourself.

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

Major: https://static.cloud.coveo.com/atomic/v2/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/v2.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

All of the resources will be available under /node_modules/@coveo/atomic/dist/atomic. You can include those in target pages with <script> tags.

If you’re using a module bundler (Browserify, Webpack, Rollup, etc.), you can use require('@coveo/atomic') or import '@coveo/atomic'.

Use Components to Create a Search Interface

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

This means 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>

Then, to turn those 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>', 1
        organizationId: '<ORGANIZATION_ID>' 2
      });
​
      searchInterface.executeFirstSearch();
    })();
  </script>
  <!--- ... --->
</head>
1 <ACCESS_TOKEN> (string) is an API key or search token that grants the Allowed access level on the Execute Queries domain, as well as the Push access level on the Analytics Data domain in the target organization.
2 <ORGANIZATION_ID> (string) is the unique identifier of your Coveo organization (e.g., mycoveoorganizationa1b23c).

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

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

For more details about the properties of the atomic-search-box component, see the Reference Documentation for that component.

Some components also expose methods:

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

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

searchInterface.executeFirstSearch(); 2
1 As seen in the example above, the initialize method is used to initialize the interface. In this case, use the await operator to wait for the interface initialization to complete before moving on.
2 The executeFirstSearch method is then used to trigger a search after initializing the interface. For more information about the atomic-search-interface methods, see the Reference Documentation.

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.