Legacy Intelligent 404 module (deprecated)

08 Jul, 2025 Uncategorized

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="000" data-eid="000"> (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>

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