How to Implement the Legacy Inline or Overlay Template (deprecated)

16 Jun, 2025 Implementation

This guide covers the deprecated Legacy Inline template; see the Overlay section near the end of this article for how the Overlay template differs.

Current alternative: Implementing the Rich Inline Template.

1: Add or Update Search Form

Add the search form or update this to include the ID "cludo-search-form":

<form id="cludo-search-form" role="search">
    <input type="search" class="search-input" aria-label="Search">
    <button type="submit" class="search-button" id="search-button">Search</button>
</form>

2: Add Default Styling

Add the following stylesheet references to the <head> section of all pages:

<link href="https://customer.cludo.com/css/templates/v2.1/essentials/cludo-search.min.css" type="text/css" rel="stylesheet">

3: Add and Adjust Script

Select one of the scripts below and insert this on all pages just before the ending <body> tag (</body>).

Here, there are a few required properties that need to be adjusted for the search to work:

  • Customer ID and engine ID (customerId and engineId)
    Find these values in MyCludo → Configuration → API)
  • Language
    The default value is ‘en’ for English. You can find the complete list of languages and their ISO code here.
  • Search URL (searchUrl)
    This must reflect the destination of your search results page. It is recommended using a relative URL, such as /search.
  • Search input selector(s) (searchInputs)
    If you are using other selectors than the one provided with the standard search input in the above step, these must be added here.

Just Results (no categories)

<script type="text/javascript" src="https://customer.cludo.com/scripts/bundles/search-script.min.js"></script>
<script>
var CludoSearch;
(function () {
    var cludoSettings = {
        customerId: CUSTOMER ID, //Find your customer ID in MyCludo -> Configuration -> API.
        engineId: ENGINE ID, //Find your engine ID in MyCludo -> Configuration -> API.
        searchUrl: '/search', //Must point to the destination of your search results page
        language: 'en', //Change this to reflect the language of the search
        searchInputs: ['cludo-search-form'], //Array of CSS selectors for input fields that should trigger search
        template: 'InlineBasic',
        hideSearchFilters: true,
        focusOnResultsAfterSearch: true,
        type: 'inline'
    };
    CludoSearch = new Cludo(cludoSettings);
    CludoSearch.init();
})();
</script>
<!--[if lte IE 9]>
    <script src="https://api.cludo.com/scripts/xdomain.js" slave="https://api.cludo.com/proxy.html" type="text/javascript"></script>
<![endif]-->

Results + Categories

<script type="text/javascript" src="https://customer.cludo.com/scripts/bundles/search-script.min.js"></script>
<script>
var CludoSearch;
(function () {
    var cludoSettings = {
        customerId: CUSTOMER ID, //Find your customer ID in MyCludo -> Configuration -> API.
        engineId: ENGINE ID, //Find your engine ID in MyCludo -> Configuration -> API.
        searchUrl: '/search', //Must point to the destination of your search results page
        language: 'en', //Change this to reflect the language of the search
        searchInputs: ['cludo-search-form'], //Array of CSS selectors for input fields that should trigger search
        template: 'InlineBasic',
        focusOnResultsAfterSearch: true,
        type: 'inline'
    };
    CludoSearch = new Cludo(cludoSettings);
    CludoSearch.init();
})();
</script>
<!--[if lte IE 9]>
    <script src="https://api.cludo.com/scripts/xdomain.js" slave="https://api.cludo.com/proxy.html" type="text/javascript"></script>
<![endif]-->

Results with Images + Categories

<script type="text/javascript" src="https://customer.cludo.com/scripts/bundles/search-script.min.js"></script>
<script>
var CludoSearch;
(function () {
    var cludoSettings = {
        customerId: CUSTOMER ID, //Find your customer ID in MyCludo -> Configuration -> API.
        engineId: ENGINE ID, //Find your engine ID in MyCludo -> Configuration -> API.
        searchUrl: '/search', //Must point to the destination of your search results page
        language: 'en', //Change this to reflect the language of the search
        searchInputs: ['cludo-search-form'], //Array of CSS selectors for input fields that should trigger search
        template: 'InlineBasicImages',
        focusOnResultsAfterSearch: true,
        type: 'inline'
    };
    CludoSearch = new Cludo(cludoSettings);
    CludoSearch.init();
})();
</script>
<!--[if lte IE 9]>
    <script src="https://api.cludo.com/scripts/xdomain.js" slave="https://api.cludo.com/proxy.html" type="text/javascript"></script>
<![endif]-->

4: Insert search results container

Select the option that fits your choice above and Insert this code on the search results page where you’d like the results to appear.

Just Results (no categories)

<div id="cludo-search-results">
    <div class="cludo-r">
        <div class="cludo-c-12">
            <div class="search-result-count"></div>
            <div class="search-did-you-mean"></div>
            <div class="search-results"></div>
        </div>
    </div>
</div>

Results + Categories

<div id="cludo-search-results">
    <div class="cludo-r">
        <div class="cludo-c-3">
            <div class="search-filters" role="navigation"></div>
        </div>
        <div class="cludo-c-9">
            <div class="search-result-count"></div>
            <div class="search-did-you-mean"></div>
            <div class="search-results"></div>
        </div>
    </div>
</div>

Results with Images + Categories

<div id="cludo-search-results">
    <div class="cludo-r">
        <div class="cludo-c-3">
            <div class="search-filters" role="navigation"></div>
        </div>
        <div class="cludo-c-9">
            <div class="search-result-count"></div>
            <div class="search-did-you-mean"></div>
            <div class="search-results"></div>
        </div>
    </div>
</div>

You have now successfully implemented search on your site!

If your search is not working at this point and you are not able to troubleshoot this, don’t hesitate to reach out to support.

Styling the Legacy Template Elements

Styling the search results

.cludo-search-results-item {
  /* Insert styling */
}

.cludo-search-results-item__title-anchor {
  /* Insert styling */
}

.cludo-search-results-item__title {
  /* Insert styling */
}

.cludo-search-results-item__description {
  /* Insert styling */
}

.cludo-search-results-item__path-anchor {
  /* Insert styling */
}


Styling the search filters (categories)

.cludo-facet {
  /* Insert styling */
}

.cludo-facet__header {
  /* Insert styling */
}

.cludo-facet__value-list-item {
  /* Insert styling */
}

.cludo-facet__value-list-item.active {
  /* Insert styling */
}

Using the Overlay Template

Overlay is a separate deprecated template from Legacy Inline: instead of a dedicated search results page, it renders results in an overlay on the same page. It uses the same script setup as Legacy Inline above, with these differences:

  • Set type: 'overlay' instead of type: 'inline' in your cludoSettings.
  • Use the Overlay default stylesheet instead: https://customer.cludo.com/css/overlay/cludo-search-default.min.css.
  • A few script options differ in availability between the two: for example hideSearchFilters works on Overlay but not Legacy Inline, while focusOnResultsAfterSearch, loading, initFacets, and customNoResultsMessage work on Legacy Inline but not Overlay. See Customize search using CludoJS options for the full option reference.

Because Overlay renders inline on the same page rather than on a separate results page, its HTML container setup differs from the steps above. If you’re maintaining an existing Overlay implementation and need help with it, reach out to Cludo Support.

Related Posts