Display Smart Snippets

This is for:

Developer

To display Smart Snippets in a JavaScript Search Framework interface, use the SmartSnippet and SmartSnippetSuggestions components.

If you’re using Atomic or Headless, see instead Atomic or Headless.

Notes

  • 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.