Legacy Intelligent 404 module (deprecated)

08 Jul, 2025 Configuration

This documentation covers the legacy Intelligent 404 implemented via the standard 404 script. To create a custom Intelligent 404 implementation with more styling options, check out the new Experience Builder.

To implement the latest version of the Intelligent 404 feature, please refer to this article here.

How to implement the legacy Intelligent 404

  1. Copy the snippet below
  2. Paste the snippet into your 404 page. The snippet should go inside the HTML container where you would like Intelligent 404 to render recommended page

    Important: In the snippet, be sure to update the data-cid attribute with your own Customer ID and the data-eid attribute with your own Engine ID.
<script id="cludo-404-script" data-cid="CUSTOMER ID" data-eid="ENGINE ID"> (function () { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://customer.cludo.com/scripts/404/cludo-404.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })(); </script>

Advanced settings

  • Suggestions title: Customize the text that appears above the suggested pages.
  • Use query parameter: If your website uses a query parameter (instead of a unique 404 page URL), add the parameter name here. This allows Intelligent 404 to strip the parameter from the URL before generating relevant suggested results.

Example

Replace CUSTOMER ID, ENGINE ID, and the attribute values with your own.

<script
  id="cludo-404-script"
  data-cid="CUSTOMER ID"
  data-eid="ENGINE ID"
  data-suggestion-title="Were you looking for one of these pages?"
  data-query-parameter="404-url-parameter"
>

How to style the legacy Intelligent 404

Styling of the Intelligent 404 UI can be overridden with your own CSS rules. Use these CSS selectors to apply your styles to specific UI elements.

#cludo-404 .cludo-results h3 {
}
#cludo-404 .cludo-results ul {
}
#cludo-404 .cludo-results li {
}

Loading animation

While it is possible to fully override the loader with the selector below, you can also change individual styles for the existing loader like the line thickness and color.

#cludo-404 .cludo-results div.loader {
  // An example of changing line thickness and color
  border: 6px solid #f2f2f2;
}

Related Posts