How To Configure Coveo Atomic's Search Interface

Configuring The Coveo Atomic Search Interface

Similarly to the JSUI version, configuring Coveo's atomic-search-interface for things like language, which pipeline to use, etc. is relatively simple. It is however, a lot more streamlined in what options you have.

The purpose of the Search Interface is to act as the parent for all other components, manage the Headless search engine, and deal with any localization. Configuring things like analytics, and such are now designated to their respective components.

What Options Are There?

Understanding the purpose of the atomic-search-interface we can now dive into what options there are. I should also point out that Atomic is still in the early stages so I fully anticipate for these options to increase and or be changed entirely over the course of development.

• engine
• il8n
• language
• logLevel
• pipeline
• reflectStateInUrl
• scrollContainer
• searcHub

engine & il8n

This is the core of the component itself and not something you're likely to need to alter. If you are looking at interacting with the engine more closely, then Headless or JSUI are more likely what you should be using.

language

If you have a site in multiple languages then configuring this appropriately you can cater the results to show only one language or another. The default value is 'en'.

logLevel

When you move your application into production, this is something you likely want to silence, but from a development perspective it's extremely handy. You're able to determine what information is shown in the browser's console to aid in debugging. Values such as "debug" | "error" | "fatal" | "info" | "silent" | "trace" | "warn" | undefined can help you narrow in on what you want to see.

pipeline

Perhaps the most important option is the pipeline value. Assuming you are using pipelines to define segments of your search results, and I hope you are. In order to configure this value, feel free to review our article, Understanding Filter Rules Within A Query Pipeline. The default value is, well, 'default'.

reflectStateInUrl

There are only two possible values for this, "true" | "false". If you know how when you select a facet, traditionally you'd see that value show in the URL. This is great for bookmarking and state management, but if you aren't interested in allowing users to bookmark a result, then you will want to set this to 'false'. The default value is 'true'.

scrollContainer

If you find yourself at the bottom of the page and hit the next page in the set, this is the CSS selector where the page will scroll back to. i.e. if you want it to scroll to the absolute top of the page or if you just want it to scroll to the top of the results.

searcHub

Giving this a value will aid in analytics reporting and enable you to identify, if you have multiple search pages, which queries are coming from where.

Example Use

Below is what a typical example use might look like.

<atomic-search-interface language='fr' pipeline='insights' reflectStateInUrl='false' logLevel='silent' scrollContainer='#top-of-results' searchHub='Articles'></atomic-search-interface>

As options are added or changed we will look at updating this article with any changes made.