How to Rapid Prototype with Coveo's Atomic Component Library

If you leverage Coveo for your website’s search and want to know what search features resonate the most with your users, you should employ Coveo Atomic to perform rapid prototyping. Through Coveo Atomic, you can quickly evolve your site’s search interface into the best search experience possible — one that helps visitors find all the content they need in fewer steps.

What is Coveo Atomic? 

Coveo Atomic is a web-component library for assembling responsive, accessible, and future-proof search interfaces, powered by Coveo, a leading provider of AI-powered search and recommendations solutions. Atomic components are self-encapsulated, composable, and lightweight. Under the hood, Atomic relies on the Coveo Headless library to interface with the Coveo Platform and handle the search application state. 

How Can You Use Coveo Atomic? 

Out of the box, you can use Atomic components to create a full-featured, production-ready search interface without any development. You can also craft custom Atomic components using Stencil to implement customization while you take advantage of Atomic’s library of published components. 

As versatile as it is, the Atomic library isn’t ideal for every Coveo search implementation. If you need to fully customize your search interface, you should probably use the Coveo Headless library. Or if you're integrating a Coveo search interface with Salesforce, you should leverage the Quantic library. 

But no matter how you intend to integrate the Coveo search interface into your project, the Atomic library still provides an ideal way to quickly assemble and test prototype search interfaces. 

How to Quickly Build a Prototype Interface 

Coveo provides the ability to create simple “hosted” search interfaces through its user interface (UI). However, these interfaces provide limited ways you can experiment with modifications to layout, facet parameters, conditional logic, dependencies, and result displays. 

To create a prototype, all you need is a Coveo API Key set to your Pipeline, the Org ID, and a local HTML file with sample code provided by Coveo. Only limited HTML knowledge is needed to implement a feature-rich search interface using Atomic html tags. For example, you can use  <atomic-result-text field=“description”> </atomic-text> to display the description field of a search result.

The sample code includes JavaScript variables to set the values of the API Key and Org ID. 

// Initialization 
        await searchInterface.initialize({ 
          accessToken: 'xx564559b1-0045-48e1-953c-3addd1ee4457', 
          organizationId: 'searchuisamples', 
          organizationEndpoints: await searchInterface.getOrganizationEndpoints( 
            'searchuisamples' 
          ), 
        });  

The HTML output for your search interface prototype can be simply viewed locally in a browser, where you can interact with the fully-featured search interface. 

Interface Component Tags 

Coveo provides an excellent Storybook component resource to interact with each element’s code and properties, along with documentation references. 

A few key component tags include: 

<atomic-layout-section> — This component provides optional, CSS grid-based layouts for specific sections of the interface: main, facets, results, etc. This is useful to provide an intuitive layout for your interface. But be aware that Coveo expects that particular components will be used within specific sections. Therefore, a component may not be visible if it’s not intended for that section.  

<atomic-search-box> — This component provides built-in support for suggestions, along with numerous property options, such as minimum query length and suggestion delay.

<atomic-search-box-query-suggestions> — This component displays autocomplete suggestions based on Coveo’s Query Suggestions machine learning model. 

<atomic-facet> — This highly configurable component displays filter facets for the search interface. It includes customization properties for sort criteria, displaying a search box within the facet, dependencies on other facet selections, and more. 

<atomic-result-template> — This component determines the format of result queries. You can use multiple templates to format results based on the type of result, using the MustMatch or MustNotMatch property conditions. 

<atomic-result-text> — This component renders the value of a string result field. Use it within your <atomic-result-template>.

<atomic-field-condition> — This is a powerful component. It takes a list of conditions that if fulfilled, can refine the display of your templates. 

Real-time Testing and Demonstrations 

With a feature-rich prototype that accurately depicts a Coveo search interface implementation, testing, and reviewing features and functionality can happen in real time with no deployments necessary. 

Test Conditional Logic 

Quickly test and update conditional logic by adding and updating properties to facets and conditional fields.  

Update Facet Properties to Improve UX 

Easily experiment with various facet properties to refine the user experience of filtering and refining results. 

Refine Result Ranking 

Make changes to Coveo’s Query Pipeline’s Result Ranking rules to view changes to result ordering based on query rules in real-time. 

Implement and Review Machine Learning Models 

Quickly see the effects of applying Machine Learning models to the Query Pipeline, such as Automatic Relevance Tuning and Query Suggestions. You can configure models to be in “Test configuration mode” to accelerate your implementation by reducing the amount of analytics data required to build the model. 

The Advantages of Full-Featured Prototypes for Stakeholders

Demonstrating a full-featured Coveo interface to your stakeholders offers several advantages. It provides a concrete representation of your search functionality, facilitating clearer communication and alignment between developers and stakeholders. Real-time testing during demonstrations enables immediate feedback, accelerating the development process. Your stakeholders gain confidence in the search’s effectiveness and can make informed decisions about customization options and feature enhancements. Ultimately, showcasing the interface fosters transparency, collaboration, and a shared vision for delivering exceptional search experiences in your organization.

Want to learn more about how you can perform rapid prototyping with Coveo’s Atomic Component Library? Reach out. Our Coveo experts can help you get started.