Configure the Search Interface

To leverage Coveo ML Smart Snippets in your search interface, ensure that the interface incorporates the required features to render the model’s output:

Coveo JavaScript Search Framework

If your interface uses the Coveo JavaScript Search Framework, the interface must include the SmartSnippet and SmartSnippetSuggestions components.

The SmartSnippet and SmartSnippetSuggestions components must appear below the ErrorReport and above the ResultList component in a search interface markup as follows:

// ...
<div class="CoveoErrorReport" data-pop-up="false"></div>
<div class="CoveoSmartSnippet"></div>
<div class="CoveoSmartSnippetSuggestions"></div>
<div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true">
// ...

You can use inline styling to customize the SmartSnippet and SmartSnippetSuggestions components. In the following code sample, the CoveoSmartSnippet text color is #f54242:

// ...
<div class="CoveoSmartSnippet">
    <script type="text/css">
        body {
        color: #f54242;
        }
    </script>
</div>
//...

The SmartSnippet and SmartSnippetSuggestions components were introduced in the June 2021 (v2.10086) release of the Coveo JavaScript Search Framework.

Coveo Headless

If your interface uses the Coveo Headless Library, the interface must use the SmartSnippet and SmartSnippetQuestionsList controllers. The QuestionAnswering actions are also available for use with Smart Snippets.

You must use Headless version 1.1.0 and up to use the SmartSnippet and SmartSnippetQuestionsList controllers. See Migrating from Headless v0 to v1 to learn how to migrate to Headless v1.

What's Next for Me?