Custom search results page enhancement

The custom search results page enhancement allows a workplace administrator to customize the text that displays when no results are found in a search. This customization changes the text that appears in the search bar quick results and the contents of the search page. 

Sections in this article:

• Considerations
• Set up the enhancement

Considerations

Keep in mind the following when using this enhancement: 

• Display language: The replacement text only displays in a single language and is not responsive to a user's language selection.
• Not compatible with custom 'Search Everywhere' text: This enhancement conflicts with the Replace 'Search Everywhere' text enhancement. If this enhancement is added to a site, the search bar text will revert to "Search Everywhere."

Set up the enhancement

To enable the enhancement for the first time, follow the steps below. To request this enhancement to be enabled on your site by our Professional Services team, complete and submit an Enhancement Request Form.

Customize enhancement code

Customize the following code to reflect the custom text you want to appear on the site. The text in all caps below will be changed to the values that should appear on the search page/search bar results.

<!-- Search customization enhancement begins -->
    <script>
        let searchTerms = window.location.href.split("=")[1]
        let searchPageHeader = `SEARCH PAGE TITLE`;
        let searchPageText = `SEARCH PAGE TEXT`;
        let searchBarText = `SEARCH BAR TEXT`;
    </script>
    <script src="https://enhancementsprod.blob.core.windows.net/enhancements/custom-search-results-page/custom-search-results-page.js"></script>
<!-- Search customization enhancement ends -->

The following parameters can be changed to update the search page content:

Including the search terms in the custom text

On the No Results Found page, you can include the search terms that were not found in the Search Page Header or Search Page Text using ${searchTerms}. This can be used to create a link to a different site's search that preserves the search terms.

For example, using the value below for the searchPageText parameter would include a link to a Google search for the search terms that the user entered:

 let searchPageText = `No results found for those search terms. Try <a href="http://wwww.google.com/?search=${searchTerms}">searching Google?</a>`;

Add enhancement code to the site header

Add the code customized above to the site's header. For instructions on how to navigate to your header, see Accessing the Header page.