Getting Started Using Coveo Atomic

What Is Coveo Atomic?

Let's face it, Coveo has a few incarnations. You've got the Coveo Platform, the API, Search UI, Headless, Sitecore, Salesforce, etc. and now you can add Atomic to that list. Each has their purpose and their strengths and one of the strengths of Atomic is to get a search page up and running fast.

The latest version of documentation for Atomic can be found here.

It's true purpose is that of a web component for building accessible, responsive and most importantly future proofed Coveo experiences. It does through building upon other another Coveo technology, Headless. You have a React app and you want a search functionality, Atomic. Due to it being in its relative infancy, aspects of it are expected to change and evolve, so just keep that in mind if you're thinking of diving in.

Let's Install It

So how does it work? Well like every other Coveo app things are broken down into a couple distinct areas. The initialization portion. And then the results, how it looks essentially.

Like Headless and JSUI you can install Atomic a couple different ways.

Install Via NPM

The first being by running npm install @coveo/atomic within a project you've setup.

Script Install

The second approach is if you have a page ready, you can simply add in the JavaScript and CSS references into the head tag.


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

Let's Get It Running

Inside the <head> tag of your page you would add the following script tags. Looks pretty familiar doesn't it.


<head>
    <script>
        (async () => {
        await customElements.whenDefined('atomic-search-interface');
        const searchInterface = document.querySelector('atomic-search-interface');
        await searchInterface.initialize({
            accessToken:'<ORGANIZATION_ID>',                                        
            organizationId: '<ACCESS_TOKEN>'                                        
        });
        })();
    </script>
</head>

Looks familiar doesn't it. There are a few key differences however. First you notice it's entirely in an async/await setup waiting for the page to be rendered. It's just more efficient. The second being that it's looking for the atomic-search-interface tag. This refers to the Atomic Search Interface component.

As Atomic is built upon Headless this is how things will be structured. There are now far fewer div tags with class references. You still have them, but they're more for styling and not functional in nature.

Where div tags used to contain data attributes, we now have parameters that can enhance the capabilities and functionality of each component.

Search Interface Structure

Taking a look at the html structure of a basic Atomic search component we see the following.


<atomic-search-interface>
    <atomic-search-box></atomic-search-box>
    <atomic-facet-manager>
        <atomic-facet field="author" label="Authors"></atomic-facet>
    </atomic-facet-manager>
    <div class="results-container">
        <atomic-no-results></atomic-no-results>
        <atomic-result-list></atomic-result-list>
    </div>
</atomic-search-interface>

Have no fear, you can style these like any other HTML tag and as such you can create some phenomenal looking search experiences.

More To Come

In upcoming articles I'll be exploring a bit deeper into the various components you can use to build a search page.

👋 Hey Sitecore Enthusiasts!

What’s in it for you?

Stay up-to-date with the latest Sitecore news
New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
Sitecore pro? Expand your skill set and discover troubleshooting tips
Browse open careers and opportunities
Get a chance to be featured in upcoming editions
Learn our secret handshake
And more!

Meet David Austin

Development Team Lead | Sitecore Technology MVP x 3

📷🕹️👪

David is a decorated Development Team Lead with Sitecore Technology MVP and Coveo MVP awards, as well as Sitecore CDP & Personalize Certified. He's worked in IT for 25 years; everything ranging from Developer to Business Analyst to Group Lead helping manage everything from Intranet and Internet sites to facility management and application support. David is a dedicated family man who loves to spend time with his girls. He's also an avid photographer and loves to explore new places.

Insights