Module 3: Customizing Your Search Page

In this module, you’ll learn about customizing your search page. First, you’ll be introduced to promoted results badges. Then, you’ll see how to deal with a scenario where a query returns nothing. Lastly, you’ll learn about the Settings component and the different components that can be nested within it.

Before you begin this module, you must have completed Module 1: Query Pipelines Part 1 and Module 2: Query Pipelines Part 2.

Learning Objectives

By the end of this module you should:

  • Know how to add and customize promoted results badges to your search interface.

  • Understand how to customize content for a query that returns nothing by using the coveo-show-if-no-results class.

  • Know how to add action items to the Settings component by nesting them within it.

Lesson 1: Promoted Results Badges

The PromotedResultsBadge component lets you add badges to query result items in your search interface. These badges can highlight featured results, which you’ve already configured through query pipeline rules, and recommended results, which are boosted by a Coveo Machine Learning (Coveo ML) Automatic Relevance Tuning (ART) model. You can add this component anywhere in your search interface and the component will then add a badge to your results after they render. You can specify both the caption content and color of the badge, which will end up looking something like this:

Results badge

Action 1: Adding Promoted Results Badges

Let’s configure a results badge to say Employee of the Month for one of the Techzample employees. The badge will be attached to the featured result that was configured in Phase 5 Module 1 where Techzample employee Daniela Popescu was selected as the employee of the month.

  1. Open the Interface Editor of your search page and click Code View.

  2. Paste the CoveoPromotedResultsBadge component from the following sample anywhere within your CoveoSearchInterface.

    <div id="search" class="CoveoSearchInterface">
      <!-- ... -->
      <div class="CoveoPromotedResultsBadge"
           data-caption-for-featured="Employee of the month"
      <!-- ... -->
  3. Click Save and then Quit to exit the code view.

Now, if you open your search page, you’ll see that Daniela Popescu is the featured result and that she has the employee of the month promoted results badge, as desired.

Lesson 2: Queries With No Results to Return

Occasionally, queries won’t return any results, in which case you can render custom content to indicate this to the user in the query summary.

The enableNoResultsFoundMessage and noResultsFoundMessage options of the QuerySummary component let you specify a custom message to display when the query returns no results. Furthermore, using the ${query} variable in your customized results statement will inject the word or phrase from the query into your results statement.

Action 2: Customizing the No-Results Message

Let’s perform a query and customize the no-results message that displays when the query returns nothing.

  1. Navigate to the code view in the Interface Editor.

  2. Locate the CoveoQuerySummary component and paste the following lines within it:

    <span class="CoveoQuerySummary"
      data-no-results-found-message="Sorry, there are no results for ${query}.">
  3. Click Save and then Quit to exit the code view.

If you search for background check, you’ll see the following message in the query summary:

No results no emoji

Now, let’s customize the no-results message by embedding more HTML blocks using the coveo-show-if-no-results class within the element bound to the CoveoQuerySummary component:

  1. Paste the lines between the comments below your customized no-results message:

    <span class="CoveoQuerySummary"
      data-no-results-found-message="Sorry, there are no results for ${query}.">
      <!-- Copy this div -->
      <div class="coveo-show-if-no-results">
        <p>Try something else, perhaps?</p>
        <img src="" alt="Thought emoji">
      <!-- ... -->
  2. Click Save and then Quit to exit the code view.

When you return to your search page and make the same query, you’ll see the further customized content, which includes the extra message and the image:

No results with emoji

Lesson 3: The Settings Component

The Settings component renders a Settings icon Settings. You can click this icon to access a popup menu from which you can perform several contextual actions, such as Advanced Search, Export to Excel, and Share Query. When implemented, the Settings icon appears at the right of the Searchbox.

The AdvancedSearch component allows users to build and tune complex queries without using the Coveo query syntax, which is a set of semantic rules that can be used to compose advanced search queries to send to the Search API.

The ExportToExcel component is useful if you want to create Microsoft Excel™ spreadsheets out of result list items to manipulate them externally.

The ShareQuery component allows users to share the search results they obtained for a specific query, and is enabled by default.

Action 3: Configuring the Settings Component

Let’s add and configure the Settings component to your search page.

  1. Locate the <div class="coveo-search-section"> component and then add the Searchbox, Settings, AdvancedSearch and ExportToExcel components below it:

    <div class="coveo-search-section">
      <div class="CoveoSearchbox" data-enable-omnibox="true"></div>
      <div class="CoveoSettings">
        <div class="CoveoAdvancedSearch"></div>
        <div class="CoveoExportToExcel"></div>
  2. Click Save and then Quit to exit the code view.

When you click Settings, you’ll have the option to:

  • Open the Advanced Search panel:

1644 advanced search component
  • Use the Export to Excel feature, which will export search results to a Microsoft Excel™ spreadsheet (i.e., to an .xlsx file).

  • Share the query results with others.

    Share query

What’s Next?

You’ve further customized your hosted search page with more rich features that will improve user experience.

In the next module, you’ll learn how to configure Coveo Machine Learning models and how to associate them to different query pipelines. You’ll learn about the functionality and advantages of using Query Suggestion (QS) and Automatic Relevance Tuning (ART) models to improve user experience.

What's Next for Me?